如何理解 JavaScript 中的 this 关键字

Posted 2023-03-01

this是当前这个对象。
方法调用模式（或称：对象属性模式）
先了解一个概念：方法和函数的区别。方法和函数本质一样，形式不同而已。看下例：
function fn()alert(this)这样就是定义了一个函数，当：fn()的时候，叫这个函数运行。同样是上面这个fn函数,如果把它赋值给一个对象的属性，就成了方法了，看下面的例子。
var obj=new Object();//先定义一个对象obj
obj.objFn=fn;那现在的obj.objFn就是方法了，但其实objFn和fn指向的是同一个内存地址。但fn是直接定义的，就是函数，而objFn是obj这个对象上的一个属性，则objFn就是方法了。方法和函数本质上是一样的，只是在不同的情况下的叫法不同。
但当fn运行的时候，弹出的是window（任何函数被调用，this都表示window）;而objFn运行的时候，弹出的是object，因为当它做为一个方法运行的时候，this关键字表示的是objFn这个属性所属的这个对象obj。也就是说，在这种情况下，this表示obj。
再啰嗦一遍：当函数成为一个对象的属性的值的时候，这个函数里的this指向当前这个对象（这时候函数就变成了方法） 再啰嗦第三遍：当一个函数被保存为对象的一个属性时，我们称它为一个方法。当一个方法被调用时，this被绑定到该对象。方法可以使用this去访问对象，所以它能从对象中取值或修改对象。this到对象的绑定发生在调用的时候。这个“超级”迟绑定使得函数可以对this高度复用。通过this可取得它们所属对象的上下文的方法称为公共方法。 参考技术A 情况一：纯粹的函数调用

这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。

请看下面这段代码，它的运行结果是1。

复制代码代码如下:

function test()

this.x = 1;

alert(this.x);



test(); // 1

为了证明this就是全局对象，我对代码做一些改变：

复制代码代码如下:

var x = 1;

function test()

alert(this.x);



test(); // 1

运行结果还是1。再变一下：

复制代码代码如下:

var x = 1;

function test()

this.x = 0;



test();

alert(x); //0

情况二：作为对象方法的调用

函数还可以作为某个对象的方法调用，这时this就指这个上级对象。

复制代码代码如下:

function test()

alert(this.x);



var o = ;

o.x = 1;

o.m = test;

o.m(); // 1

情况三 作为构造函数调用

所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。

复制代码代码如下:

function test()

this.x = 1;



var o = new test();

alert(o.x); // 1

运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：

复制代码代码如下:

var x = 2;

function test()

this.x = 1;



var o = new test();

alert(x); //2

运行结果为2，表明全局变量x的值根本没变。

情况四 apply调用

apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。

复制代码代码如下:

var x = 0;

function test()

alert(this.x);



var o=;

o.x = 1;

o.m = test;

o.m.apply(); //0

apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。本回答被提问者采纳

理解 JavaScript 中的 this

前言

理解this是我们要深入理解 JavaScript 中必不可少的一个步骤，同时只有理解了 this，你才能更加清晰地写出与自己预期一致的 JavaScript 代码。

本文是这系列的第三篇，往期文章：

1. 理解 JavaScript 中的作用域
2. 理解 JavaScript 中的闭包

什么是 this

消除误解

在解释什么是this之前，需要先纠正大部分人对this的误解，常见的误解有：

1. 指向函数自身。
2. 指向它所在的作用域。

关于为何会误解的原因这里不多讲，这里只给出结论，有兴趣可以自行查询资料。

this 在任何情况下都不指向函数的词法作用域。你不能使用 this 来引用一个词法作用域内部的东西。

this 到底是什么

排除了一些错误理解之后，我们来看看 this到底是一种什么样的机制。

this是在运行时（runtime）进行绑定的，而不是在编写时绑定的，它的上下文（对象）取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

当一个函数被调用时，会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性，会在函数执行的过程中用到。（ PS:所以this并不等价于执行上下文）

this 全面解析

前面 我们排除了一些对于 this的错误理解并且明白了每个函数的this是在调用时被绑定的，完全取决于函数的调用位置。

调用位置

通常来说，寻找调用位置就是寻找“函数被调用的位置“，其中最重要的是要分析调用栈（就是为了到达当前执行位置所调用的所有函数）。我们关心的调用位置就在当前正在执行的函数的前一个调用中。

下面我们来看看到底什么是调用栈和调用位置：

function foo(){
    // 当前调用栈是：foo
    // 因此，当前调用位置是全局作用域
    console.log("foo");
    bar(); // <-- bar 的调用位置
}
function bar(){
    // 当前调用栈是 foo -> bar
    console.log("bar");
}
foo(); // <-- foo 的调用位置

你可以把调用栈想象成一个函数调用链， 就像我们在前面代码段的注释中所写的一样。但是这种方法非常麻烦并且容易出错。 另一个查看调用栈的方法是使用浏览器的调试工具。 绝大多数现代桌面浏览器都内置了开发者工具，其中包含 JavaScript 调试器。

绑定规则

在找到调用位置后，则需要判定代码属于下面四种绑定规则中的哪一种，然后才能对this进行绑定。 注意: this绑定的是上下文对象,并不是函数自身也不是函数的词法作用域

默认绑定

这是最常见的函数调用类型：独立函数调用：

对函数直接使用而不带任何修饰的函数引用进行调用，简单点一个函数直接是func()这样调用，不同于通过对象属性调用例如obj.func()，也没有通过 new 关键字new Function()，也没有通过apply、call、bind强制改变this指向。

当被用作独立函数调用时（不论这个函数在哪被调用，不管全局还是其他函数内），this默认指向到Window。（注意：在严格模式下this不再默认指向全局，而是undefined）。

示例代码：

function foo(){
    console.log(this.name);
}
var name = "window";
foo(); // window

隐式绑定

函数被某个对象拥有或者包含，也就是函数被作为对象的属性所引用，例如obj.func()，此时this会绑定到该对象上，这就是隐式绑定。

示例代码：

var obj = {
    name : "obj",
    foo : function(){
        console.log(this.name);
    }
}
obj.foo(); // obj

隐式丢失：

大部分的this绑定问题就是被“隐式绑定”的函数会丢失绑定对象，也就是说它会应用“默认绑定”，从而把this绑定到Window或undefined上，这取决于是否是严格模式。

最常见的情况就是把对象方法作为回调函数进行传递时：

var obj = {
    name : "obj",
    foo : function(){
        console.log(this.name);
    }
}
var name = "window";
setTimeout(obj.foo,1000); // 一秒后输出 window

显式绑定

我们可以通过apply、call、bind方法来显示地修改this的指向。

关于这三个方法的定义（它们第一个参数都是接受this的绑定对象）：

1. apply：调用函数，第二个参数传入一个参数数组。
2. call：调用函数，其余参数正常传递。
3. bind：返回一个已经绑定this的函数，其余参数正常传递。

比如我们可以使用bind方法解决上一节“隐式丢失”中的例子：

var obj = {
    name : "obj",
    foo : function(){
        console.log(this.name);
    }
}
var name = "window";
setTimeout(obj.foo.bind(obj),1000); // 一秒后输出 obj

new 绑定

使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作：

1. 创建(或者说构造)一个全新的对象。
2. 这个新对象会被执行[[原型]]连接。
3. 这个新对象会绑定到函数调用的this。
4. 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

示例代码：

function foo(a) { 
  this.a = a;
}
var bar = new foo(2); 
console.log( bar.a ); // 2

优先级

直接上结论:

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

判断 this： 现在我们可以根据优先级来判断函数在某个调用位置应用的是哪条规则。可以按照下面的顺序来进行判断：

1. 使用 new 绑定，this绑定的是新创建的对象。

   var bar = new foo();
   

2. 通过call之类的显式绑定，this绑定的是指定的对象。

   var bar = foo.call(obj2);
   

3. 在某个上下文对象中调用(隐式绑定)，this 绑定的是那个上下文对象。

   var bar = obj1.foo();
   

4. 如果都不是的话，使用默认绑定。this绑定到Window或undefined上，这取决于是否是严格模式。

   var bar = foo();
   

   对于正常的函数调用来说，理解了这些知识你就可以明白 this 的绑定原理了。

this 词法

ES6 中介绍了一种无法使用上面四条规则的特殊函数类型：箭头函数。

箭头函数不使用 this 的四种标准规则，而是根据外层(函数或者全局)作用域来决定 this。(而传统的 this 与函数作用域没有任何关系,它只与调用位置的上下文对象有关)。

重要:

• 箭头函数最常用于回调函数中，例如事件处理器或者定时器.
• 箭头函数可以像bind 一样确保函数的this被绑定到指定对象
• 箭头函数用更常见的词法作用域取代了传统的this机制。

示例代码：

var obj = {
    name : "obj",
    foo : function(){
        setTimeout(()=>{
            console.log(console.log(this.name)); // obj
        },1000);
    }
}
obj.foo();

这在 ES6 之前是这样解决的：

var obj = {
    name : "obj",
    foo : function(){
        var self = this;
        setTimeout(function(){
            console.log(console.log(self.name)); // obj
        },1000);
    }
}
obj.foo();

总结

总之如果要判断一个运行中函数的this绑定，就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断this的绑定对象。

1. 由 new 调用？绑定到新创建的对象。
2. 由 call 或者 apply(或者 bind)调用？绑定到指定的对象。
3. 由上下文对象调用？绑定到那个上下文对象。
4. 默认:在严格模式下绑定到undefined，否则绑定到全局对象。

ES6 中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法作用域来决定 this，具体来说，箭头函数会继承外层函数调用的 this绑定(无论 this绑定到什么)。这其实和 ES6 之前代码中的 self = this 机制一样。

（转载于：https://www.v2ex.com/t/529532#reply1）