JavaScript笔记：this全面解析

╰+哭是因爲堅強的太久メ 2022-07-16 08:13 222阅读 0赞

每个函数的 this 是在调用时被绑定的，完全取决于函数的调用位置(也就是函数的调用方法)。

## 调用位置 ##

调用位置就是函数在代码中被调用的位置(而不是声明的位置)。  
只有仔细分析调用位置才能回答这个问题：这个 this 到底引用的是什么?

通常来说，寻找调用位置就是寻找“函数被调用的位置”，但是做起来并没有这么简单， 因为某些编程模式可能会隐藏真正的调用位置。

最重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数)。我们关心的调用位置就在当前正在执行的函数的前一个调用中。

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

注意我们是如何(从调用栈中)分析出真正的调用位置的，因为它决定了 this 的绑定。

## 绑定规则 ##

下面将会解释，函数的执行过程中调用位置如何决定 this 的绑定对象。

你必须找到调用位置，然后判断需要应用下面四条规则中的哪一条。我们首先会分别解释这四条规则，然后解释多条规则都可用时它们的优先级如何排列。

**1、默认绑定**

首先要介绍的是最常用的函数调用类型：独立函数调用。可以把这条规则看作是无法应用其他规则时的默认规则。

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

你应该注意到的第一件事是，声明在全局作用域中的变量(比如 var a = 2)就是全局对象的一个同名属性。它们本质上就是同一个东西，并不是通过复制得到的，就像一个硬币的两面一样。

接下来我们可以看到当调用 foo() 时，this.a 被解析成了全局变量 a。为什么？因为在本例中，函数调用时应用了 this 的*默认绑定，因此 this 指向全局对象。*

那么我们怎么知道这里应用了默认绑定呢？可以通过分析调用位置来看看 foo() 是如何调用的。

在代码中，foo() 是直接使用不带任何修饰的函数引用进行调用的，因此只能使用默认绑定，无法应用其他规则。

如果使用严格模式(strict mode)，那么全局对象将无法使用默认绑定，因此 this 会绑定到 undefined。

**2、隐式绑定**

另一条需要考虑的规则是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含。

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

首先需要注意的是 foo() 的声明方式，及其之后是如何被当作引用属性添加到 obj 中的。  
但是无论是直接在 obj 中定义还是先定义再添加为引用属性，这个函数严格来说都不属于 obj 对象。

然而，调用位置会使用 obj 上下文来引用函数，因此你可以说函数被调用时 obj 对象“拥有”或者“包含”它。

无论你如何称呼这个模式，当 foo() 被调用时，它的落脚点确实指向 obj 对象。当函数引用有上下文对象时，隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。因为调用 foo() 时 this 被绑定到 obj，因此 this.a 和 obj.a 是一样的。

对象属性引用链中只有最顶层或者说最后一层会影响调用位置。举例来说:

function foo() {  
        console.log( this.a );
    }
    var obj2 = { 
        a: 42,
        foo: foo 
    };
    var obj1 = { 
        a: 2,
        obj2: obj2 
    };
    obj1.obj2.foo(); // 42

隐式丢失：

一个最常见的 this 绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是说它会应用默认绑定，从而把 this 绑定到全局对象或者 undefined 上（取决于是否是严格模式）。

function foo() {  
        console.log( this.a );
    }
    var obj = { 
        a: 2,
        foo: foo 
    };
    var bar = obj.foo; // 函数别名!
    var a = "oops, global"; // a是全局对象的属性 
    bar(); // "oops, global"

虽然 bar 是 obj.foo 的一个引用，但是实际上，它引用的是 foo 函数本身，因此此时的 bar() 其实是一个不带任何修饰的函数调用，因此应用了默认绑定。

一种更微妙、更常见并且更出乎意料的情况发生在传入回调函数时:

参数传递其实就是一种隐式赋值，因此我们传入函数时也会被隐式赋值，所以结果和上一个例子一样。

如果把函数传入语言内置的函数而不是传入你自己声明的函数，结果是一样的，没有区别。

就像我们看到的那样，回调函数丢失 this 绑定是非常常见的。除此之外，还有一种情 况 this 的行为会出乎我们意料：调用回调函数的函数可能会修改 this。  
在一些流行的 JavaScript 库中事件处理器常会把回调函数的 this 强制绑定到触发事件的 DOM 元素上。 这在一些情况下可能很有用，但是有时它可能会让你感到非常郁闷。遗憾的是，这些工具通常无法选择是否启用这个行为。

无论是哪种情况，this 的改变都是意想不到的，实际上你无法控制回调函数的执行方式，因此就没有办法控制会影响绑定的调用位置。之后我们会介绍如何通过固定 this 来修复这个问题。

**3、显式绑定**

在分析隐式绑定时，我们必须在一个对象内部包含一个指向函数的属性，并通过这个属性间接引用函数，从而把 this 间接(隐式)绑定到这个对象上。

那么如果我们不想在对象内部包含函数引用，而想在某个对象上强制调用函数，该怎么做呢?

JavaScript 中的“所有”函数都有一些有用的特性，可以用来解决这个问题。具体点说，可以使用函数的 call(..) 和 apply(..) 方法。

严格来说，JavaScript 的宿主环境有时会提供一些非常特殊的函数，它们并没有这两个方法。但是这样的函数非常罕见，JavaScript 提供的绝大多数函数以及你自己创建的所有函数都可以使用 call(..) 和 apply(..) 方法。

这两个方法是如何工作的呢？它们的第一个参数是一个对象，它们会把这个对象绑定到 this，接着在调用函数时指定这个 this。

因为你可以直接指定 this 的绑定对象，因此我们称之为显式绑定。

function foo() {  
        console.log( this.a );
    }
    var obj = { 
        a:2
    };
    foo.call( obj ); // 2

通过 `foo.call(..)`，我们可以在调用 foo 时强制把它的 this 绑定到 obj 上。

可惜，显式绑定仍然无法解决我们之前提出的丢失绑定问题。

但是显式绑定的一个变种可以解决这个问题。

硬绑定：

我们来看看这个变种到底是怎样工作的。我们创建了函数 bar()，并在它的内部手动调用了 foo.call(obj)，因此强制把 foo 的 this 绑定到了 obj。无论之后如何调用函数 bar，它总会手动在 obj 上调用 foo。这种绑定是一种显式的强制绑定，因此我们称之为硬绑定。

硬绑定的典型应用场景就是创建一个包裹函数，传入所有的参数并返回接收到的所有值。

由于硬绑定是一种非常常用的模式，所以在 ES5 中提供了内置的方法 Function.prototype.bind，它的用法如下:

function foo(something) {  
        console.log( this.a, something ); 
        return this.a + something;
    }
    var obj = { 
        a:2
    };
    var bar = foo.bind( obj );
    var b = bar( 3 ); // 2 3 
    console.log( b ); // 5

bind(..) 会返回一个硬编码的新函数，它会把参数设置为 this 的上下文并调用原始函数。

API调用的“上下文”：

第三方库的许多函数，以及 JavaScript 语言和宿主环境中许多新的内置函数，都提供了一个可选的参数，通常被称为“上下文”(context)，其作用和 bind(..) 一样，确保你的回调函数使用指定的 this。

function foo(el) { 
        console.log( el, this.id );
    }
    var obj = {
        id: "awesome"
    };
    // 调用 foo(..) 时把 this 绑定到 
    obj [1, 2, 3].forEach( foo, obj );
    // 1 awesome 2 awesome 3 awesome

这些函数实际上就是通过 call(..) 或者 apply(..) 实现了显式绑定，这样你可以少些一些代码。

**new绑定**

首先需要澄清一个非常常见的关于 JavaScript 中函数和对象的误解。

在传统的面向类的语言中，“构造函数”是类中的一些特殊方法，使用 new 初始化类时会  
调用类中的构造函数。通常的形式是这样的：`something = new MyClass(..);`

JavaScript 也有一个 new 操作符，使用方法看起来也和那些面向类的语言一样，绝大多数开发者都认为 JavaScript 中 new 的机制也和那些语言一样。然而，JavaScript 中 new 的机制实际上和面向类的语言完全不同。

首先我们重新定义一下 JavaScript 中的“构造函数”。在 JavaScript 中，构造函数只是一些使用 new 操作符时被调用的函数。它们并不会属于某个类，也不会实例化一个类。实际上，它们甚至都不能说是一种特殊的函数类型，它们只是被 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 来调用 foo(..) 时，我们会构造一个新对象并把它绑定到 foo(..) 调用中的 this 上。new 是最后一种可以影响函数调用时 this 绑定行为的方法，我们称之为 new 绑定。

## 3、优先级 ##

毫无疑问，默认绑定的优先级是四条规则中最低的，所以我们可以先不考虑它。

隐式绑定和显式绑定哪个优先级更高?我们来测试一下：

可以看到，显式绑定优先级更高，也就是说在判断时应当先考虑是否可以应用显式绑定。

现在我们需要搞清楚 new 绑定和隐式绑定的优先级谁高谁低：

可以看到 new 绑定比隐式绑定优先级高。

但是 new 绑定和显式绑定谁的优先级更高呢?

在看代码之前先回忆一下硬绑定是如何工作的。`Function.prototype.bind(..)` 会创建一个新的包装函数，这个函数会忽略它当前的 this 绑定(无论绑定的对象是什么)，并把我们提供的对象绑定到 this 上。

function foo(something) {  
        this.a = something;
    }
    var obj1 = {};
    var bar = foo.bind( obj1 ); 
    bar( 2 );
    console.log( obj1.a ); // 2
    var baz = new bar(3); 
    console.log( obj1.a ); // 2 
    console.log( baz.a ); // 3

bar 被硬绑定到 obj1 上，但是 new bar(3) 并没有像我们所预料的那样把 obj1.a 修改为 3。相反，new 修改了硬绑定(到 obj1 的)调用 bar(..) 中的 this。因为使用了 new 绑定，我们得到了一个名字为 baz 的新对象，并且 baz.a 的值是 3。

**判断this**

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

1、函数是否在new中调用(new绑定)?如果是的话this绑定的是新创建的对象。
    var bar = new foo()
    2、函数是否通过call、apply(显式绑定)或者硬绑定调用?如果是的话，this绑定的是 指定的对象。
    var bar = foo.call(obj2)
    3、函数是否在某个上下文对象中调用(隐式绑定)?如果是的话，this绑定的是那个上 下文对象。
    var bar = obj1.foo()
    4、如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到 全局对象。
    var bar = foo()

## 绑定例外 ##

**被忽略的this**

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

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

那么什么情况下你会传入 null 呢?  
一种非常常见的做法是使用 apply(..) 来“展开”一个数组，并当作参数传入一个函数。类似地，bind(..) 可以对参数进行柯里化(预先设置一些参数)，这种方法有时非常有用：

function foo(a,b) { 
        console.log( "a:" + a + ", b:" + b );
    }
    // 把数组“展开”成参数
    foo.apply( null, [2, 3] ); // a:2, b:3
    // 使用 bind(..) 进行柯里化 
    var bar = foo.bind( null, 2 ); 
    bar( 3 ); // a:2, b:3

这两种方法都需要传入一个参数当作 this 的绑定对象。如果函数并不关心 this 的话，你仍然需要传入一个占位值，这时 null 可能是一个不错的选择，就像代码所示的那样。

然而，总是使用 null 来忽略 this 绑定可能产生一些副作用。如果某个函数确实使用了 this(比如第三方库中的一个函数)，那默认绑定规则会把 this 绑定到全局对象(在浏览器中这个对象是 window)，这将导致不可预计的后果(比如修改全局对象)。

更安全的this：

一种“更安全”的做法是传入一个特殊的对象，把 this 绑定到这个对象不会对你的程序产生任何副作用。

在 JavaScript 中创建一个空对象最简单的方法都是 Object.create(null)。  
Object.create(null) 和 \{\} 很像，但是并不会创建 Object.prototype 这个委托，所以它比 \{\}“更空”：

function foo(a,b) { 
        console.log( "a:" + a + ", b:" + b );
    }
    // 空对象
    var ø = Object.create( null ); 
    // 把数组展开成参数
    foo.apply( ø, [2, 3] ); // a:2, b:3
    // 使用 bind(..) 进行柯里化 
    var bar = foo.bind( ø, 2 ); 
    bar( 3 ); // a:2, b:3

使用变量名 ø 不仅让函数变得更加“安全”，而且可以提高代码的可读性，因为 ø 表示 “我希望 this 是空”，这比 null 的含义更清楚。

**间接引用**

另一个需要注意的是，你有可能(有意或者无意地)创建一个函数的“间接引用”，在这种情况下，调用这个函数会应用默认绑定规则。

function foo() {  
        console.log( this.a );
    }
    var a = 2;
    var o = { a: 3, foo: foo }; 
    var p = { a: 4 };
    o.foo(); // 3
    (p.foo = o.foo)(); // 2

赋值表达式 p.foo = o.foo 的返回值是目标函数的引用，因此调用位置是 foo() 而不是 p.foo() 或者 o.foo()。根据我们之前说过的，这里会应用默认绑定。

注意：对于默认绑定来说，决定 this 绑定对象的并不是调用位置是否处于严格模式，而是函数体是否处于严格模式。如果函数体处于严格模式，this 会被绑定到 undefined，否则 this 会被绑定到全局对象。

**软绑定**

之前我们已经看到过，硬绑定这种方式可以把 this 强制绑定到指定的对象(除了使用 new 时)，防止函数调用应用默认绑定规则。问题在于，硬绑定会大大降低函数的灵活性，使用硬绑定之后就无法使用隐式绑定或者显式绑定来修改 this。

如果可以给默认绑定指定一个全局对象和 undefined 以外的值，那就可以实现和硬绑定相同的效果，同时保留隐式绑定或者显式绑定修改 this 的能力。

可以通过一种被称为软绑定的方法来实现我们想要的效果：

if (!Function.prototype.softBind) { 
        Function.prototype.softBind = function(obj) { 
            var fn = this;
            // 捕获所有 curried 参数
            var curried = [].slice.call( arguments, 1 ); 
            var bound = function() { 
                return fn.apply(
                    (!this || this === (window || global)) ?
                        obj : this
                        curried.concat.apply( curried, arguments )
                ); 
            };
            bound.prototype = Object.create( fn.prototype );
            return bound; 
        };
    }

除了软绑定之外，softBind(..) 的其他原理和 ES5 内置的 bind(..) 类似。它会对指定的函数进行封装，首先检查调用时的 this，如果 this 绑定到全局对象或者 undefined，那就把指定的默认对象 obj 绑定到 this，否则不会修改 this。此外，这段代码还支持可选的柯里化(详情请查看之前和 bind(..) 相关的介绍)。

下面我们看看 softBind 是否实现了软绑定功能：

可以看到，软绑定版本的 foo() 可以手动将 this 绑定到 obj2 或者 obj3 上，但如果应用默认绑定，则会将 this 绑定到 obj。

## this词法 ##

我们之前介绍的四条规则已经可以包含所有正常的函数。但是 ES6 中介绍了一种无法使用这些规则的特殊函数类型：箭头函数。

箭头函数并不是使用 function 关键字定义的，而是使用被称为“胖箭头”的操作符 => 定义的。箭头函数不使用 this 的四种标准规则，而是根据外层(函数或者全局)作用域来决定 this。

箭头函数的绑定无法被修改。(new 也不行!)