this指向

技术
Word count: 4.1k   |   Reading time≈ 15 min

从一道面试题开始说起

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var number = 5;
var obj = {
    number: 3,
    fn1: (function () {
        var number;
        this.number *= 2;
        number = number * 2;
        number = 3;
        return function () {
            var num = this.number;
            this.number *= 2;
            console.log(num);
            number *= 3;
            console.log(number);
        };
    })()
};
var fn1 = obj.fn1;
fn1.call(null);
obj.fn1();
console.log(window.number);

首先思考一下结果是什么，然后再在浏览器中执行一遍，如果两者一致，且你每一步的依据都很明确，那么恭喜你，你对this指向已经很清楚了，下面的内容你可以选择看或者不看，如果你感觉很晕，或者对自己的答案不确定，那么请继续往下阅读。我相信，你看完这篇文章，一定对this指向有更清晰的理解，这道题就留到最后讲解。那么，让我们开始吧！

this是什么？

this在前端工作中使用的频率很高，合理的使用this可以让我们写出简洁且复用性高的代码，而且this作为前端面试中的高频考点，了解清楚是很有必要的。首先我们需要明确的一点是this不是指向自身，this是一个指针，指向调用函数的对象。为了能一眼看出this的指向，我们首先需要知道this的绑定规则有哪些：

  • 默认绑定
  • 隐式绑定
  • 显式绑定（硬绑定）
  • new绑定

是不是感觉脑阔疼，没事，我们一个一个来梳理清楚。

默认绑定

默认绑定，在不能应用其它绑定规则时使用的默认规则，通常是独立函数调用，来看下面的例子：

1
2
3
4
5
function sayHi(){
    console.log('Hello, ', this.name);
}
var name = 'Tom';
sayHi();

在调用sayHi()时，应用了默认绑定，this指向全局对象（非严格模式下），严格模式下，this指向undefined，undefined上没有this对象，会抛出错误。上面的代码，如果在浏览器环境中运行，那么结果就是 Hello, Tom，但是如果在node环境中运行，结果就是Hello, undefined，这是因为node中name并不是挂在全局对象上的。

本文中，如不特殊说明，默认为浏览器环境执行结果。

隐式绑定

1
2
3
4
5
6
7
8
9
function sayHi(){
    console.log('Hello, ', this.name);
}
var person = {
    name: 'Bob',
    sayHi: sayHi
};
var name = 'Tom';
person.sayHi();

执行上面的代码，控制台打印的结果是Hello, Bob。sayHi函数声明在外部，严格来说并不属于person，但是在调用sayHi时,调用位置会使用person的上下文来引用函数，隐式绑定会把函数调用中的this(即此例sayHi函数中的this)绑定到这个上下文对象（即此例中的person）。

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

来看下面的例子：

1
2
3
4
5
6
7
8
9
10
11
12
function sayHi(){
    console.log('Hello, ', this.name);
}
var person2 = {
    name: 'Tom',
    sayHi: sayHi
};
var person1 = {
    name: 'Bob',
    friend: person2
};
person1.friend.sayHi();

执行上面的代码，控制台打印的结果是Hello, Tom。因为只有最后一层会确定this指向的是什么，不管有多少层，在判断this的时候，我们只关注最后一层，即此处的friend。

隐式绑定有一个大陷阱，绑定很容易丢失(或者说容易给我们造成误导，我们以为this指向的是什么，但是实际上并非如此)，来看下面的例子：

1
2
3
4
5
6
7
8
9
10
function sayHi(){
    console.log('Hello, ', this.name);
}
var person = {
    name: 'Bob',
    sayHi: sayHi
}
var name = 'Tom';
var Hi = person.sayHi;
Hi();

结果是：Hello, Tom。这是为什么呢？Hi直接指向了sayHi的引用，在调用的时候，跟person没有半毛钱的关系，针对此类问题，我建议大家只需牢牢记住这个格式：**XXX.fn()**，fn()前如果什么都没有，那么肯定不是隐式绑定。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function sayHi(){
    console.log('Hello, ', this.name);
}
var person1 = {
    name: 'Jerry',
    sayHi: function(){
        setTimeout(function(){
            console.log('Hello,', this.name);
        });
    }
};
var person2 = {
    name: 'Bob',
    sayHi: sayHi
};
var name='Tom';
person1.sayHi();
setTimeout(person2.sayHi, 100);
setTimeout(function(){
    person2.sayHi();
}, 200);

结果为：

1
2
3
Hello, Tom
Hello, Tom
Hello, Bob
  • 第一条输出很容易理解，setTimeout的回调函数中，this使用的是默认绑定，非严格模式下，执行的是全局对象。
  • 第二条输出是不是有点迷惑了？说好XXX.fun()的时候，fun中的this指向的是XXX呢，为什么这次却不是这样了！Why？其实这里我们可以这样理解：setTimeout(fn, delay){ fn(); }，相当于是将person2.sayHi赋值给了一个变量，最后执行了变量，这个时候，sayHi中的this显然和person2就没有关系了。
  • 第三条虽然也是在setTimeout的回调中，但是我们可以看出，这是执行的是person2.sayHi()使用的是隐式绑定，因此这是this指向的是person2，跟当前的作用域没有任何关系。

读到这里，或许你已经有点疲倦了，但是答应我，别放弃，好吗？再坚持一下，就可以掌握这个知识点了。

alt

显式绑定

显式绑定比较好理解，就是通过call、apply和bind的方式，显式的指定this所指向的对象。

注意:《你不知道的Javascript》中将bind单独作为硬绑定讲解。

1
2
3
4
5
6
7
8
9
10
function sayHi(){
    console.log('Hello, ', this.name);
}
var person = {
    name: 'Bob',
    sayHi: sayHi
}
var name = 'Tom';
var Hi = person.sayHi;
Hi.call(person); // Hi.apply(person)

结果为：Hello, Bob。因为使用显式绑定明确将this绑定在了person上。

那么，使用了显式绑定，是不是就意味着不会出现隐式绑定所遇到的绑定丢失呢？显然不是这样的，不信，来看下面的例子：

1
2
3
4
5
6
7
8
9
10
11
12
function sayHi(){
    console.log('Hello, ', this.name);
}
var person = {
    name: 'Bob',
    sayHi: sayHi
};
var name = 'Tom';
var Hi = function(fn) {
    fn();
};
Hi.call(person, person.sayHi);

结果是：Hello, Tom。原因很简单，Hi.call(person, person.sayHi)的确是将this绑定到Hi中的this了。但是在执行fn的时候，相当于直接调用了sayHi方法(记住: person.sayHi已经被赋值给fn了，像前面介绍的隐式绑定丢失的情况一样)，没有指定this的值，对应的是默认绑定。

现在，我们希望绑定不会丢失，要怎么做？很简单，调用fn的时候，也给它显式绑定，如下：

1
2
3
4
5
6
7
8
9
10
11
12
function sayHi(){
    console.log('Hello,', this.name);
}
var person = {
    name: 'Bob',
    sayHi: sayHi
};
var name = 'Tom';
var Hi = function(fn) {
    fn.call(this);
};
Hi.call(person, person.sayHi);

现在，输出的结果为：Hello, Bob。因为person被绑定到Hi函数中的this上，fn又将这个对象绑定给了sayHi的函数。这时，sayHi中的this指向的就是person对象。

new绑定

革命胜利的曙光已经出现，下面我们来看最后一种绑定——new绑定。

javascript和C++不一样，并没有类，在javascript中，构造函数只是使用new操作符时被调用的函数，这些函数和普通的函数并没有什么不同，它不属于某个类，也不可能实例化出一个类。任何一个函数都可以使用new来调用，因此其实并不存在构造函数，而只有对于函数的“构造调用”。

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

  1. 创建一个空对象，构造函数中的this指向这个空对象；
  2. 这个新对象被执行 [[原型]] 连接；
  3. 执行构造函数方法，属性和方法被添加到this引用的对象中
  4. 如果构造函数中没有返回其它对象，那么返回this，即创建的这个的新对象，否则，返回构造函数中返回的对象。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function _new() {
        let target = {}; //创建的新对象
        //第一个参数是构造函数
        let [constructor, ...args] = [...arguments];
        //执行[[原型]]连接;target 是 constructor 的实例
        target.__proto__ = constructor.prototype;
        //执行构造函数，将属性或方法添加到创建的空对象上
        let result = constructor.apply(target, args);
        if (result && (typeof (result) == "object" || typeof (result) == "function")) {
            //如果构造函数执行的结构返回的是一个对象，那么返回这个对象
            return result;
        }
        //如果构造函数返回的不是一个对象，返回创建的新对象
        return target;
    }
    因此，我们使用new来调用函数的时候，就会把这个函数的this绑定到实例对象上，如下：
    1
    2
    3
    4
    5
    function sayHi(name){
        this.name = name;
    }
    var Hi = new sayHi('Tom');
    console.log('Hello, ', Hi.name);
    输出结果为 Hello, Tom，原因是因为在var Hi = new sayHi(‘Yevtte’);这一步，会将sayHi中的this绑定到Hi对象上。

绑定优先级

现在我们已经知道了this有四种绑定规则，但是如果同时应用了多种规则，怎么办？显然，我们需要了解哪一种绑定方式的优先级更高，这四种绑定的优先级为：new绑定 > 显式绑定 > 隐式绑定 > 默认绑定。这个规则是如何得到的，大家如果有兴趣，可以自己写个demo去测试，或者记住上面的结论即可。

绑定例外的情况

凡事都有例外，this的规则也是这样。如果我们将null或者是undefined作为this的绑定对象传入call、apply或者是bind，这些值在调用时会被忽略，实际应用的是默认绑定规则，来看下面的例子：

1
2
3
4
5
6
7
8
function bar() {
    console.log("Hello, " + this.name);
}
var foo = {
    name: 'Bob'
};
var name = 'Tom';
bar.call(null);

输出的结果是：Hello, Tom，因为这时实际应用的是默认绑定规则。

箭头函数

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

  • 箭头函数体内的this对象，继承的是外层代码块的this。
  • 箭头函数不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
  • 箭头函数不可以使用arguments对象，该对象在箭头函数体内不存在。如果要用，可以用 rest 参数代替。
  • 箭头函数中不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
  • 箭头函数没有自己的this，所以不能用call()、apply()、bind()这些方法去改变this的指向。

下面我们通过一个例子来看看箭头函数的this指向什么：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var obj = {
    hi: function(){
        console.log(this);
        return ()=>{
            console.log(this);
        };
    },
    sayHi: function(){
        return function() {
            console.log(this);
            return ()=>{
                console.log(this);
            };
        };
    },
    say: ()=>{
        console.log(this);
    }
};
let hi = obj.hi();      //输出obj对象
hi();                   //输出obj对象
let sayHi = obj.sayHi();
let fun1 = sayHi();     //输出window
fun1();                 //输出window
obj.say();              //输出window

那么这是为什么呢？如果说箭头函数中的this是定义时所在的对象，那么输出的结果不是大家预期的，按照这个定义，say中的this应该是obj才对。不要慌，我们来分析一下上面代码的执行结果：

  1. obj.hi()：对应了this的隐式绑定规则，this绑定在obj上，所以输出obj，很好理解；
  2. hi()：这一步执行的就是箭头函数，箭头函数继承上一个代码库的this，刚刚我们得出上一层的this是obj，显然这里的this就是obj；
  3. 执行sayHi()：这一步也很好理解，我们前面说过这种隐式绑定丢失的情况，这个时候this执行的是默认绑定，this指向的是全局对象window.
  4. fun1()：这一步执行的是箭头函数，如果按照之前的理解，this指向的是箭头函数定义时所在的对象，那么这显然是说不通。OK，按照箭头函数的this是继承于外层代码库的this就很好理解了。外层代码库我们刚刚分析了，this指向的是window，因此这的输出结果是window.
  5. obj.say()：执行的是箭头函数，当前的代码块obj中是不存在this的，只能往上找，就找到了全局的this，指向的是window。

现在是不是清晰多了，那么箭头函数的this是静态的吗？依旧使用前面创建的obj对象，我们来看看下面代码的执行结果：

1
2
3
4
5
let sayHi = obj.sayHi();
let fun1 = sayHi();          //输出window
fun1();                      //输出window
let fun2 = sayHi.bind(obj)();//输出obj
fun2();                      //输出obj

可以看出，fun1和fun2对应的是同样的箭头函数，但是this的输出结果是不一样的。所以，请大家牢牢记住一点：箭头函数没有自己的this，箭头函数中的this继承于外层代码库中的this。

总结

关于this的规则，至此，就告一段落了，但是想要一眼就能看出this所绑定的对象，还需要不断的训练。下面我们总结一下如何准确判断this的指向：

  • 函数是否在new中调用(new绑定)，如果是，那么this绑定的是新创建的对象。
  • 函数是否通过call或apply调用，或者使用了bind(即硬绑定)，如果是，那么this绑定的就是指定的对象。
  • 函数是否在某个上下文对象中调用(隐式绑定)，如果是的话，this绑定的是那个上下文对象，一般是obj.foo()。
  • 如果以上都不是，那么使用默认绑定。如果在严格模式下，则绑定到undefined，否则绑定到全局对象。
  • 如果把null或者undefined作为this的绑定对象传入call、apply或者bind，这些值在调用时会被忽略，实际应用的是默认绑定规则。
  • 如果是箭头函数，箭头函数的this继承的是外层代码块的this。

下面我们来看看文章开头的例子，我们来分析一下那段代码的执行过程：

  1. 在定义obj的时候，fn对应的闭包就执行了，返回其中的函数，执行闭包中代码时，显然应用不了new绑定(因为没有出现new关键字)，显式绑定也没有（没有出现call、apply或bind关键字），隐式绑定有没有？很显然没有，因为没有出现XX.fn()，所以这里应用的就是默认绑定了，非严格模式下this绑定到了window上(浏览器执行环境)。这里很容易被迷惑的就是以为this指向的是obj，一定要注意，除非是箭头函数，否则this跟词法作用域是两回事，一定要牢记在心。
    1
    this.number * = 2;
    window.number的值是10（var number定义的全局变量是挂在window上的）。
    1
    number = number * 2;
    number的值是NaN，注意我们这边定义了一个number，但是没有赋值，number的值是undefined，Number(undefined)->NaN。
    1
    number = 3;
    number的值被赋值成3。
  2. myFun.call(null)：我们前面说了，call的第一个参数传null，调用的是默认绑定。
    1
    2
    3
    4
    5
    6
    7
    fn: function(){
        var num = this.number;
        this.number *= 2;
        console.log(num);
        number *= 3;
        console.log(number);
    }
    执行时：
    1
    2
    3
    4
    5
    var num = this.number; //num=10，此时this指向的是window
    this.number * = 2;     //window.number = 20
    console.log(num);      //输出结果为10
    number *= 3;           //number=9，这个number对应的闭包中的number，闭包中的number的是3
    console.log(number);   //输出的结果是9
  3. obj.fn()：应用了隐式绑定，fn中的this对应的是obj。
    1
    2
    3
    4
    5
    var num = this.number;//num = 3，此时this指向的是obj
    this.number *= 2;     //obj.number = 6
    console.log(num);     //输出结果为3
    number *= 3;          //number=27，这个number对应的闭包中的number;闭包中的number的此时是9
    console.log(number);  //输出的结果是27
  4. 最后一步console.log(window.number)输出的结果是20。因此在严格模式下，那段代码控制台输出的结果为：
    1
    2
    3
    4
    5
    10
    9
    3
    27
    20

撒花撒花，结束了，恭喜坚持读完的小伙伴们，你们成功get到了this这个知识点，但是想要完全掌握，还是要多回顾和练习。如果你们有什么问题，也欢迎评论区留言，大家一起进步。

alt

Donate
  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
  • Copyrights © 2020-2021 Sanmu
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信