“this”绑定如何在 JavaScript 中工作

╰半夏微凉° 2024-03-27 08:58 11阅读 0赞

## “this”绑定如何在 JavaScript 中工作 ##

*本文译自：[How “This” Binding Works in JavaScript][How _This_ Binding Works in JavaScript]*

***译者按：当前 this 指向的是什么？this is undefined？一文搞明白 this。***

“This”是 JavaScript 中最重要和最常见的问题之一。很多时候，由于对概念的理解不足，我们往往会编写并在我们的软件中遇到错误。

在本文中，我们将尝试揭开“this”话题的神秘面纱。

要确定“this”的绑定，首先要了解几个规则。因此，在您下结论之前，请考虑您正在使用的函数是如何被调用或调用的。

让我们继续并列出有助于我们理解“This”和“Binding”的必要规则

### “This”绑定的类型 ###

#### 默认绑定： ####

当我们正常调用或调用函数时，将应用默认绑定。对于浏览器“窗口”情况下的“默认”，请参考以下示例：

function foo(){
        
        console.log(this);
    
        function bar(){
        
            console.log(this);
        }
    
        bar()
    }
    foo() // 这两个控制台语句都将打印窗口。因为，这里函数是正常调用的。

![在这里插入图片描述][18fb58b9ca234e1199cf9a7dd173515e.png_pic_center]

因此，无论函数是什么或函数定义在哪里，如果它被正常调用，那么默认绑定规则将适用。

#### 隐式绑定： ####

第二种绑定是“隐式”绑定。您还记得有时用 (.) （点）调用函数时的情况吗？像 foo.bar()。这称为隐式绑定。

在这种情况下，“this”指的是调用对象：

function foo(){
        
      console.log(this)
    }
    
    const obj = {
        foo: foo}
    obj.foo() // 将 obj 当作 this 打印

![在这里插入图片描述][1eba3f57e7bb49b7ae3e2b486d83f95e.png_pic_center]

这里“obj”正在调用“foo”。所以“This”现在指的是调用对象。

function foo(){
        
         console.log(this);
    
       function bar(){
        
         console.log(this);
        }
    
      bar()
    }
    
    const obj = {
        foo: foo}
    obj.foo() // 你怎么看?方法 bar 会打印吗?

![在这里插入图片描述][3db34d8a8efa496f9669411bdef13c56.png_pic_center]

在这种情况下，“function foo”有一个内部函数“bar”。并且我们正在调用 foo 内部的 bar()，因此您可以认为，由于“obj”正在调用 foo，因此“bar”也具有与 foo 相同的绑定，即调用对象。

但是请记住，我们在第 1 点中了解到，如果一个函数被正常调用，无论它在何处定义以及在何处被调用，“this”将始终引用“默认绑定”。

在这种情况下，foo 的“obj”是 this，因为 obj 正在调用，但“bar”仍在正常调用，因此对于 bar()，this 仍然是\*\*“window”。\*\*

**Implicit Binding 的优先级高于 default Binding**。

#### 显式绑定 ####

当我们使用“call”、“apply”或“bind”调用任何函数时，它就是显式绑定。因为在这里我们明确地传递了“this”。

function foo(){
        
       console.log(this)
    }
    const obj = {
        name: 'Javascript'}
    foo.call(obj) // 这里我们将obj作为"thisArg"传递，所以现在foo将"obj"作为 this 绑定

![在这里插入图片描述][5930ac9d9f8c4888a01290cec2d9e093.png_pic_center]

如果我们在调用、应用或绑定中将“null”或“undefined”作为 thisArg 传递，它将开始表现得像默认绑定一样，并且在浏览器 env 的情况下，“binding of this”将是 ‘window’。

显式绑定的优先级甚至高于隐式绑定。

例如：

function foo(){
        
       console.log(this)
    }
    const obj = {
        name: 'Javascript', foo: foo}
    const obj1 = {
        name: 'HackerNoon'}
    obj.foo.call(obj1) // 这里call的优先级高于(.)dot。现在foo有obj1作为 this 绑定

![在这里插入图片描述][d0104547ed034086afb094ee456a184b.png_pic_center]

由于显式绑定比隐式绑定具有更高的优先级，现在“foo”将 obj1 作为“this”。

您认为以下示例的输出是什么？

function foo(){
        
       console.log(this)
    }
    const obj = {
        name: 'Javascript', foo: foo}
    const obj1 = {
        name: 'HackerNoon'}
    obj.foo.call(null)

![在这里插入图片描述][686667403b2441a9a668ec4a93e17292.png_pic_center]

请记住我们讨论的要点。如果“null”或“undefined”在调用或应用或绑定方法中作为“thisArg”传递，它开始表现得像“默认绑定”，所以在这种情况下“this”将引用窗口对象。

#### 新绑定 ####

当我们使用“新”键盘调用任何功能时，幕后会发生很多事情。

1.  创建一个新的空白对象。
2.  此对象的原型链接到构造函数的原型
3.  执行构造函数，将“新创建”的对象绑定为“this”
4.  如果没有返回任何其他内容，则返回 obj

正如我们所看到的，当我们使用“new”关键字调用函数时，该函数具有与“this”不同的对象

function Foo(bar1, bar2) {
        
    
      this.bar1 = bar1;
      this.bar2 = bar2;
      console.log(this)
    }
    const obj = new Foo('bar1', 'bar2')

![在这里插入图片描述][45b4e25a09e542ea97ad0ff75ad97443.png_pic_center]

这里一个具有“属性”bar1 和 bar2 的对象是函数 Foo 的“this”绑定。

“新”绑定的优先级甚至高于“显式”或“隐式”绑定。

例如：

function Foo(bar1, bar2){
        
       this.bar1 = bar1;
      this.bar2 = bar2;
      console.log(this)
    }
    
    const obj = {
        foo: Foo}
    new obj.foo('bar1', 'bar2') 
    //output : {bar1: 'nar1', bar2: 'bar2'}

![在这里插入图片描述][85f496f44d7c4653a884315982e4f572.png_pic_center]

这里我们使用带有“(.)”的“new”关键字，即 obj.foo() 但是，“binding of this”仍然是新创建的对象，而不是“obj”。

#### 箭头函数(ES6) ####

箭头函数的行为有点不同。到目前为止我们讨论的规则不适用于箭头函数。

箭头函数没有自己的“this”绑定，所以它们从最近的环境中获取“this”，如果没有这样的环境。对于箭头功能，“this”总是指代浏览器中的“window”。

function foo(){
        
        const es6 = () => console.log(this);
        function normal(){
        console.log(this)};
        es6();
        normal();
    }
    foo()

![在这里插入图片描述][2dfc455f621241ca93b0c369ef688a4f.png_pic_center]

在这种情况下，两个函数都会将“window”打印为“this”，因为没有发生任何特殊情况。

让我们改变调用“foo”的方式，看看会发生什么。

![在这里插入图片描述][1e6da3f6e66c405083267f1571218963.png_pic_center]

现在“foo”将“obj”作为其隐式“this”绑定，因此“es6”会将“obj”打印为“this”，因为我们讨论过 es6 函数采用“最近的 this”，但“正常”函数仍会打印“窗口”，因为“默认绑定规则”仍然适用于“正常”功能。

所以在为箭头函数决定“this”时，只需检查外部环境是否有任何“this”绑定。如果是，那么这就是 es6 函数的“this”绑定。

如果不是，那么“窗口”将是浏览器上下文中的答案

const obj = {
        foo: () => console.log(this)}
    obj.foo()

![在这里插入图片描述][8b97e67e1c964839b6a44cdeb9ec8a40.png_pic_center]

**输出结果是什么？**

暂停一下，隐式绑定的规则在这里不起作用，因为 foo 现在是一个 es6 函数。

由于没有其他绑定，因为 foo 不在任何拥有自己的“this”的普通函数中，“this”的绑定目前是“window”。

[How _This_ Binding Works in JavaScript]: https://hackernoon.com/how-this-binding-works-in-javascript
[18fb58b9ca234e1199cf9a7dd173515e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/5476dbbadfa642cb954a4d8fff2d9b7b.png
[1eba3f57e7bb49b7ae3e2b486d83f95e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e8258b0236724e43bb30015ca9fe2e5c.png
[3db34d8a8efa496f9669411bdef13c56.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ffefa177fade4dff8484680dd6971273.png
[5930ac9d9f8c4888a01290cec2d9e093.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/97314e138c894fabb9e4f2557768cdc4.png
[d0104547ed034086afb094ee456a184b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/c7ae73afccc84853960242bc727efa4c.png
[686667403b2441a9a668ec4a93e17292.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/427d5db3cf66448b8e2fc4b2e7648b7e.png
[45b4e25a09e542ea97ad0ff75ad97443.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f4cbb55f362a465488307385a31c571e.png
[85f496f44d7c4653a884315982e4f572.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/0d863f844c444684b60b5baebffd1ffc.png
[2dfc455f621241ca93b0c369ef688a4f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/8c7ded9165b44d168b7b79bc6d907d5c.png
[1e6da3f6e66c405083267f1571218963.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/87175008277046deadd3250bf71c5810.png
[8b97e67e1c964839b6a44cdeb9ec8a40.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/58042284a3a74f23a522cf9693d7d907.png