解析this关键字

阅读量：6496 次

发布时间：2019-06-24

本文共 8698 字，大约阅读时间需要 28 分钟。

解析this关键字

this关键字是JavaScript中最复杂的机制之一，是一个特别的关键字，被自动定义在所有函数的作用域中，但是很多JavaScript开发者并不是非常清楚它究竟指向的是什么。

请先回答第一个问题，如何准确地判断this指向的是什么？

再看一道题。控制台打印出来是什么？【浏览器运行环境】

var number = 5var 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)        }    })()}

为什么要学习this

this使用频率很高

工作中，滥用this

合理的使用this

面试高频问题

this是什么

<br> this不是指向自身！this就是一个指针，指向调用函数的对象。

<br><br> 为了能够一眼看出this指向的是什么，首先需要知道this的绑定规则有哪些：

默认绑定

隐式绑定

硬绑定

new 绑定

默认绑定

默认绑定，再不能应用其他绑定规则时使用的默认规则，通常是独立函数调用。

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

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

上面的代码，如果在浏览器环境中运行，那么结果就是Hello,make

但是如果在node环境中运行，结果就是Hello,undefined.这是因为node中name并不是挂在全局对象上的。

隐式绑定

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

function sayHi () {    console.log('Hello,',this.name);}var person = {    name: 'make',    sayHi: sayHi}var name = 'kang';person.sayHi();

打印的结果是Hello,make

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

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

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

结果是：Hello,name2。

因为只有最后一层会确定this指向的是什么，不管有多少层，在判断this的时候，只关注最后一层，即此处的friend。

隐式绑定有一个大陷阱，绑定很容易丢失(或者说容易给人造成误导，以为this指向的是什么，但是实际上并非如此)。

function sayHi () {    console.log('Hello,',this.name);}var person = {    name: 'name1',    sayHi: sayHi}var name = 'name2';var Hi = person.sayHi;Hi();

结果是：Hello,name2

这是为什么呢，Hi直接指向了sayHi的引用，在调用的时候，跟person没有半毛钱的关系，针对此类问题，建议大家牢牢记住这个格式：XXX.fn(); fn()前如果什么都没有，那么肯定不是隐式绑定，但是也不一定就是默认绑定！！！

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

function sayHi () {    console.log('Hello,',this.name);}var person1 = {    name: 'name1',    sayHi: function () {        setimeout(function(){            console.log('Hello,',this.name);        }    }}var person2 = {    name: 'name2',    sayHi:sayHi}var name = 'name3';person1.sayHi();setTimeout(person2.sayHi,100);setTimeout(function(){    person2.sayHi();},200)

结果为：

Hello,name3Hello.name3Hello,name2

第一条输出：setTimeout的回调函数中，this使用的是默认绑定，非严格模式下，执行的是全局对象。

第二条输出：setTimeout(fn.delay){ fn(); },相当于是将person2.sayHi赋值给了一个变量，最后执行了变量，这个时候，sayHi中的this显然和person2就没有关系了

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

显式绑定

显示绑定就是通过call,apple,bind的方式，显式的指定this所指向的对象(注意：《你不知道的JavaScript》中将bind单独作为了硬绑定讲解了)。

call,apple和bind的第一个参数，就是对应函数的this所指向的对象。call和apply的作用一样，只是传参方式不同。call和apply都会执行对应的函数，而bind方法不会。

function sayHi () {    console.log('Hello',this.name);}var person = {    name: 'name1',    sayHi: sayHi}var name = 'name'var Hi = person.sayHi;Hi.call(person);    // Hi.apply(person)

输出结果为：Hello,name1.因为使用硬绑定明确将this绑定在了person上。

那么，使用了硬绑定，是不是意味着不会出现隐式绑定所遇到的绑定丢失呢？答案是：并不是！！！

function sayHi () {    console.log('Hello',this.name);}var person = {    name: 'name1',    sayHi: sayHi}var name = 'name';var Hi = function(fn){    fn();}Hi.call(person,person.sayHi);

输出的结果是Hello,name.原因很简单，Hi.call(person,person.sayHi)的确是将this绑定到Hi中的this了。但是在执行fn的时候，相当于直接调用了sayHi方法(记住：person.sayHi已经被赋值给fn了，隐式绑定也丢了)，没有指定this的值，对应的是默认绑定。

如果希望绑定不会丢失，要怎么做？很简单，调用fn的时候，也给他硬绑定。

function sayHi() {    console.log('Hello,',this.name);}var person = {    name = 'name1',    sayHi: sayHi}var name = 'name';var Hi = function(fn) {    fn.call(this);}Hi.call(person,person.sayHi);

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

new绑定

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

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

创建一个新对象；

将构造函数的作用域赋值给新对象，即this指向的这个新对象；

执行构造函数中的代码；

返回新对象。

因此，我们使用 new 来调用函数的时候，就会更新对象到这个函数的this上。

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

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

绑定优先级

this有四种绑定规则，但是如果同时应用了多种规则，怎么办？

显然，需要了解那一种绑定方式的优先级更高吗，这四种绑定的优先级为：

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

绑定例外

凡事都有例外，this的规则也是这样。

如果我们将null或者是undefined作为this的绑定对象传入call/apply或者是bind，这些值在调用时会被忽略，实际应用的是默认绑定规则。

function sayHi() {    console.log('Hello,',this.name);}var person = {    name: 'name',    sayhi: sayHi}var name1 = 'name1';var Hi = function(fn) {    fn();}Hi.call(null,parson.sayHi);

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

箭头函数

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

函数体内的this对象，继承的是外层代码块的this。

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

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

不可以使用yield命令，因此箭头函数不能用作Generator函数。

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

OK，看一下箭头函数的this是什么：

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();     // 输出 windowfun1();                 // 输出 windowobj.say();              // 输出 window

如果说箭头函数中的this是定义时所在的对象，这样的结果显示不是大家预期的，按照这个定义，say中的this应该是obj才对。

分析上面的执行结果：

obj.hi();对应了this的默认绑定规则，this绑定在obj上，所以输出obj。

hi();这一步执行的就是箭头函数，箭头函数继承上一个代码库的this，刚刚我们得出上一层的this是obj，显然这里的this就是obj。

执行sayHi();这一步，前面说过这种隐式绑定丢失的情况，这个时候this执行的是默认绑定，this指向的是全局对象window。

fun1();这一步执行的是箭头函数，如果按照之前的理解，this指向的是箭头函数定义时所在的对象，那么这儿显然是说不通。OK，按照箭头函数的this是继承与外层代码库的this就很好理解了。外层代码库刚刚分析了，this指向的是window，因此这儿的输出结果也是window。

obj.say();执行的是箭头函数，当前代码块obj中是不存在this的，只能往上找，就找到了全局的this，指向的是window。

箭头函数的this是静态的？

依旧是前面的代码，来看看箭头函数中的this真的是静态吗？非也！！！

var obj = {    hi: function() {        console.log(this);        return () => {            console.log(this);        }    },    sayHi: function() {        return function() {            console.log(this);            return () => {                console.log(this);            }        }    },    say: function() {        console.log(this);    }}let sayHi = obj.sayHi();let fun1 = sayHi();         // 输出 windowfun1();                     // 输出 windowlet fun2 = sayHi.bind(obj)();  // 输出 objfun2();                        // 输出 obj

可以看出，fun1和fun2对应的是同样的箭头函数，但是this的输出结果是不一样的。

所以，请牢记注一点：箭头函数没有自己的this，箭头函数中的this继承与外层代码库中的this

总结

1.如何准确判断this的指向是什么？

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

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

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

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

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

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

2. 执行过程解析

var number = 5;var obj = {    number: 3;    fn: (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 myFun = obj.fn;myFun.call(null);obj.fn();console.log(window.number);

我们来分析一下，这段代码的执行过程：

在定义obj的时候，fn对应的闭包就执行了，返回其中的函数，执行闭包中的代码时，显然应用不了new绑定(没有出现new关键字)，硬绑定也没有(没有出现call,apply,bind关键字)，隐式绑定有没有？很显然没有。如果没有XXX.fun(),那么肯定没有应用隐式绑定，所以这里应用的就是默认绑定了，非严格模式下this绑定到了window上(浏览器执行环境)。【这里很容易被迷惑的就是以为this指向的是obj，一定要注意，除非是箭头函数，否则this跟词法作用域是两回事，一定要牢记在心】

window.number *= 2;     //window.nuumber 的值是 10(var number 定义的全局变量是挂在window上的)number = number * 2;    // number的值是NaN； 注意这边定义了一个number,但是没有赋值，number的值是undefined;Number(undefined) -> NaNnumber = 3;             // number 的值为3

myFun.call(null);前面说了，call的第一个参数传null，调用的是默认绑定；

fn: function() {    var num = this.number;    this.number *= 2;    console.log(num);    number *= 3;    console.log(number);}

执行时：

var num = this.number;      // num=10;此时this指向的是windowthis.number *= 2;           // window.number = 20console.log(num);           // 输出结果为 10number *= 3;                // number=9;这个number对应闭包中的number;闭包中number的值是3console.log(number);        // 输出结果是 9

obj.fn();应用了隐式绑定，fn中的this对应的是obj。

var num = this.number;  //num = 3;此时this指向的是objthia.number *= 2;       // obj.number = 6;console.log(num);       // 输出结果为 3；number *= 3;            // number=27;这个number对应的闭包中的number；比保重的number的值此时是 9console.log(number);    // 输出结果是 27