理解 this 绑定

360 阅读3分钟

this 是什么?现在请不要往下看,告诉自己一个答案,什么是 this?它是一个指针?一个对象还是一个函数?其实远没有那么复杂!

this 是什么

名不正则言不顺。今天我们来整理下 this 的简单定义!this 是 Javascript 中的一个关键字,它代表了函数调用的上下文。

  • 如果包含 this 的函数是被对象作为方法调用的,this 就指向这个调用对象,这个时候可以说, this 是一个对象(默认绑定)
  • 如果该函数是直接调用的,那么在严格模式下,this 指向 undefined,非严格模式下 this 指向 window(隐式绑定)
  • 如果 this 是通过 new 关键字调用的,也就是通过构造函数调用的,那么 this 指向 new 返回的对象实例(隐式绑定,可以理解为构造函数时一种特殊的函数)
  • 如果 this 是通过 apply,call,bind 调用,那么 this 指向调用是绑定的对象(显式绑定)

也就是说,this 并不是具体的什么东西。它只有在函数运行的时候才会存在,它存在于运行时的世界中。所以当你看到

function call() {
  /* 这里有很多代码*/
  console.log(this);
  /* 这里有很多代码*/
}

这样的代码的时候,this 在这里并没有什么意义。我们应该关注的是在什么时候 call() 和 如何 call()。现在请简单复习下,当我们通过下面几种方式调用的时候,this 关键字指向了哪里?

new call();
call();
call.bind(null,);
call.apply(null, []);

如何定位 this

关于定位 this,先介绍一个简单粗暴的万金油来说明如何判断;

  1. 是否有点操作符?如果有,左边的就是 this
  2. 是否有 call 或者 apply?如果有,第一个逗号传进来的,就是 this
  3. 方法是被单独调用的吗?如果是,全局对象上下文,就是 this

通过这三点,我们可以判断出绝大多数的 this 指向。少部分的就是上面提到的通过构造函数调用的方式。请看下面这个例子:

var p2 = null;
function Person(name) {
  this.name = name;
  this.age = 8;
  console.log(this); // {name: 'todd', age: 8}
  p2 = this;
}

var p1 = new Person('todd');

console.log(p1 === p2) // true

我们看到,当函数(构造函数) Person 通过关键字调用的时候,此时 this 并没有指向全局上下文,而是指向 new 操作符返回的对象。通过 p1 === p2 的结果可以证明。this 的判断规则十分简单,只要记住前面提到的三种方法再加上 new 关键字的场景,我们可以对全部 this 的调用场景做以区分。比如:

   var name = "windowsName";

    var a = {
        name : "Cherry",

        func1: function () {
            console.log(this.name)
        },

        func2: function () {
            setTimeout(  function () {
                this.func1()
            },100 );
        }

    };

    a.func2()     // this.func1 is not a function

这道题目的 this,看似花里胡哨。其实我们只要根据第三点判断就轻而易举。this 的运行时是在一个定时器中,因为它是匿名函数被单独调用,其上下文是全局,所以没有func1 这个方法。所以必然报错。

假装有总结

没什么好总结的,如果你有更好的建议,请留言讨论吧!

参考资料

  1. How to Eyeball Your ‘This’ Context in Javascript
  2. this,apply,call,bind

pic