学习this指向问题

204 阅读5分钟

1、this是什么?

this是一个指针,指向调用函数的对象。谁调用他,this就指向谁。

2、this绑定规则

为了能够一眼看出this指向的是什么,我们首先需要知道this的绑定规则有哪些?

- 默认绑定

能应用其它绑定规则时使用的默认规则,通常是独立函数调用。

简单地讲,就是全局环境下的this指向问题。

浏览器的全局环境下(非严格模式),this指向的是Windows。

node的全局环境下(非严格模式),this指向的是空对象 { }。

function sayHi(){
    console.log('Hello,', this.name);
}
var name = 'Luck';
sayHi();

在调用sayHi()时,应用了默认绑定,this指向全局对象(非严格模式下),严格模式下,this指向undefined,undefined上没有this对象,会抛出错误。

- 隐式绑定

函数的调用是在某个对象上触发的,即调用位置上存在上下文对象。典型的形式为 XXX.fun()。

function sayHi(){
  console.log('Hello,', this.name);
}
var person = {
  name: 'Luck',
  sayHi: sayHi
}
var name = 'Wiliam';
person.sayHi();//Hello,Luck

sayHi函数声明在外部,严格来说并不属于person,但是在调用sayHi时,调用位置会使用person的上下文来引用函数,隐式绑定会把函数调用中的this(即此例sayHi函数中的this)绑定到这个上下文对象(即此例中的person)。

需要注意的是:对象属性链中只有最后一层会影响到调用位置。

function sayHi(){
          console.log('Hello,', this.name);
      }
      var person2 = {
          name: 'China',
          sayHi: sayHi
      }
      var person1 = {
          name: 'Luck',
          friend: person2
      }
      person1.friend.sayHi();//Hello, China

除了上面这种丢失之外,隐式绑定的丢失是发生在回调函数中(事件回调也是其中一种),我们来看下面一个例子:

function sayHi(){
  console.log('Hello,', this.name);
}
var person1 = {
  name: 'Luck',
  sayHi: function(){
      setTimeout(function(){
          console.log('Hello,',this.name);
      })
  }
}
var person2 = {
  name: 'China',
  sayHi: sayHi
}
var name='Wiliam';
person1.sayHi();
setTimeout(person2.sayHi,100);
setTimeout(function(){
  person2.sayHi();
},200);

结果为:

Hello, Wiliam
Hello, Wiliam
Hello, China
  • 第一条输出很容易理解,setTimeout的回调函数中,this使用的是默认绑定,非严格模式下,执行的是全局对象

  • 第二条输出是不是有点迷惑了?说好XXX.fun()的时候,fun中的this指向的是XXX呢,为什么这次却不是这样了!

    其实这里我们可以这样理解: setTimeout(fn,delay){ fn(); },相当于是将person2.sayHi赋值给了一个变量,最后执行了变量,这个时候,sayHi中的this显然和person2就没有关系了。

  • 第三条虽然也是在setTimeout的回调中,但是我们可以看出,这是执行的是person2.sayHi()使用的是隐式绑定,因此这是this指向的是person2,跟当前的作用域没有任何关系。

- 显示绑定

通过call,apply,bind的方式,显式的指定this所指向的对象。

call,apply和bind的第一个参数,就是对应函数的this所指向的对象。

call和apply的作用一样,只是传参方式不同。call和apply都会执行对应的函数,而bind方法不会。

function info(){
    console.log(this.age);
}
var person = {
    age: 20,
    info
}
var age = 28;
var info = person.info;
info.call(person);   //20
info.apply(person);  //20
info.bind(person)(); //20

如果 call,apply 或者 bind 传入的第一个参数值是 undefined 或者 null,严格模式下 this 的值为传入的值 null /undefined。非严格模式下,实际应用的默认绑定规则,this 指向全局对象(node环境为global,浏览器环境为window)

- 硬绑定

function sayHi(){
  console.log('Hello,', this.name);
}
var person = {
  name: 'luck',
  sayHi: sayHi
}
var name = 'Wiliam';
var Hi = function(fn) {
  fn.call(this);//注意 2
}
Hi.call(person, person.sayHi);//注意 1

此时,输出的结果为: Hello, luck,因为person被绑定到Hi函数中的this上,person.sayHi函数赋值给了fn,相当于这时,sayHi中的this指向的就是person对象。

- new绑定

使用new来调用函数,会自动执行下面的操作:

1. 创建一个新对象
2. 将构造函数的作用域赋值给新对象,即this指向这个新对象
3. 执行构造函数中的代码
4. 返回新象

我们使用new来调用函数的时候,就会新对象绑定到这个函数的this上。但是前提是构造函数中没有返回object或者是function,否则this指向这个object或者是function。

如:

function sayHi(name){
    this.name = name;
}
var Hi = new sayHi('Luck');
console.log('Hello,', Hi.name);

输出结果为 Hello, Luck, 原因是因为在var Hi = new sayHi('Luck');这一步,会将sayHi中的this绑定到Hi对象上。

绑定优先级:

new绑定 > 显式绑定 > 隐式绑定 > 默认绑定

- 箭头函数

箭头函数是ES6中新增的,它和普通函数有一些区别,箭头函数没有自己的this,它的this继承于外层代码库中的this。箭头函数在使用时,需要注意以下几点:

(1)函数体内的this对象,继承的是外层代码块的this。

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

(5)箭头函数没有自己的this,所以不能用call()、apply()、bind()这些方法去改变this的指向.

3、总结如何准确判断this指向的是什么?

  1. 函数是否在new中调用(new绑定),如果是,那么this绑定的是新创建的对象。

  2. 函数是否通过call,apply调用,或者使用了bind(即硬绑定),如果是,那么this绑定的就是指定的对象。

  3. 函数是否在某个上下文对象中调用(隐式绑定),如果是的话,this绑定的是那个上下文对象。一般是obj.foo()

  4. 如果以上都不是,那么使用默认绑定。如果在严格模式下,则绑定到undefined,否则绑定到全局对象。

  5. 如果把Null或者undefined作为this的绑定对象传入call、apply或者bind,这些值在调用时会被忽略,实际应用的是默认绑定规则。

  6. 如果是箭头函数,箭头函数的this继承的是外层代码块的this。

参考链接:juejin.cn/post/684490…