函数内部this指向

函数内部的this指向

this的指向是根据调用者来确定的，调用的方式不同，this的指向不同

1.普通函数this的指向

 //1.普通函数 this指向window
        function fn() {
            console.log('普通函数指向' + this);
        }
        window.fn();

普通函数this指向window：结果如图所示：

2.对象方法的函数this的指向

 var o = {
            sayHi: function() {
                console.log('对象的方法指向' + this)
            }
        }
        o.sayHi();

对象的方法 this指向该方法所属对象，object就是对象。

3.构造函数this的指向

this指向实例对象,原型对象里面的方法也指向实例对象

function Star() {
            console.log('构造函数的方法指向' + this)
        }
        Star.prototype.sing = function() {
            console.log('构造函数原型的方法指向' + this)
        }
        var ig = new Star();
        ig.sing();

图中的object就是函数的实例对象:

4.绑定事件函数this的指向

 //4.绑定事件函数  this指向函数调用者btn
        var btn = document.querySelector('button')
        btn.onclick = function() {
                console.log('绑定事件函数的方法指向' + this);
            } //点击按钮就可以调用函数

HTMLButtonElement 是按钮元素

5.定时器函数this的指向

   // 5. 定时器函数 this指向window
        setInterval(function() {
            console.log('定时器this指向' + this);
        }, 1000); //这个函数定时器每隔一秒自动调用

定时器是window调用的，所以它的this指向window。

6.立即执行函数this的指向

 //6.立即执行函数  this指向window
        (function() {
            console.log('立即执行函数this指向' + this);
        })(); //立即函数自动调用

立即执行函数也是window自动调用的，所以this指向window

改变函数内部的this指向

call方法

1. call() 第一个作用的调用函数 第二个作用是改变函数内部指向
2. call的主要作用是继承

var o = {
	name: 'andy'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn(1,2)// 此时的this指向的是window 运行结果为3
fn.call(o,1,2)//此时的this指向的是对象o,参数使用逗号隔开,运行结果为3

apply方法

1. 第一个是调用函数
2. 第二个 是改变函数内部指向
3. 它的参数必须是数组或者伪数组
4. 3.apply的应用：利用apply借助数学内置对象求最大值

  var o = {
            name: 'andy'
        }

        function fn(arr) {
            console.log(this);
            console.log(arr); //只输出red
        }
        fn.apply(o, ['red', 'pink'])
                //1.第一个是调用函数第二个是改变函数内部指向
                //2.它的参数必须是数组或者伪数组
                //3.apply的应用：利用apply借助数学内置对象求最大值

        var arr1 = [1, 63, 154, 78];
        var max = Math.max.apply(Math, arr1);
        var min = Math.min.apply(Math, arr1);
        console.log(max);
        console.log(min);

bind方法

1.绑定后不会调用原来的函数，可以改变原来函数内部的this指向
2.返回的是原函数改变this之后产生的新的函数
3.如果有的函数我们不想要立即调用，但是又想改变这个函数的内部指向用bind最合适
4.又一个按钮，点击之后禁用按钮，三秒钟后又启用

 var o = {
 name: 'andy'
 };

function fn(a, b) {
	console.log(this);
	console.log(a + b);
};
var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数
f();//调用新函数  this指向的是对象o 参数使用逗号隔开

call、apply、bind三者的异同

• 共同点 : 都可以改变this指向

• 不同点:

  • call 和 apply 会调用函数, 并且改变函数内部this指向.
  • call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递
  • bind 不会调用函数, 可以改变函数内部this指向.

• 应用场景

  1. call 经常做继承.
  2. apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
  3. bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.