this全面解析
0 Views 前端 with
本文字数:1,997 字 | 阅读时长 ≈ 7 min

this全面解析

0 Views 前端 with
本文字数:1,997 字 | 阅读时长 ≈ 7 min

this全面解析

this全面解析

调用位置

在理解 this 的绑定过程之前, 首先要理解调用位置: 调用位置就是函数在代码中被调用的位置(而不是声明的位置)。 只有仔细分析调用位置才能回答这个问题: 这个 this 到底引用的是什么?

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function baz() {
// 当前调用栈是: baz
// 因此, 当前调用位置是全局作用域
console.log( "baz" );
bar(); // <-- bar 的调用位置
}

function bar() {
// 当前调用栈是 baz -> bar
// 因此, 当前调用位置在 baz 中
console.log( "bar" );
foo(); // <-- foo 的调用位置
}

function foo() {
// 当前调用栈是 baz -> bar -> foo
// 因此, 当前调用位置在 bar 中
console.log( "foo" );
}
baz(); // <-- baz 的调用位置

注意我们是如何(从调用栈中) 分析出真正的调用位置的,因为它决定了 this 的绑定,你可以把调用栈想象成一个函数调用链, 就像我们在前面代码段的注释中所写的一样。 但是这种方法非常麻烦并且容易出错。 另一个查看调用栈的方法是使用浏览器的调试工具。 绝大多数现代桌面浏览器都内置了开发者工具,其中包含 JavaScript 调试器。 就本例来说, 你可以在工具中给 foo() 函数的第一行代码设置一个断点, 或者直接在第一行代码之前插入一条 debugger;语句。 运行代码时, 调试器会在那个位置暂停, 同时会展示当前位置的函数调用列表, 这就是你的调用栈。 因此, 如果你想要分析 this 的绑定, 使用开发者工具得到调用栈, 然后找到栈中第二个元素, 这就是真正的调用位置

绑定规则

  1. 我们来看看在函数的执行过程中调用位置如何决定 this 的绑定对象
  2. 你必须找到调用位置, 然后判断需要应用下面四条规则中的哪一条。

默认绑定

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

思考一下下面的代码:

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

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

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

那么我们怎么知道这里应用了默认绑定呢? 可以通过分析调用位置来看看 foo() 是如何调用的。 在代码中, foo() 是直接使用不带任何修饰的函数引用进行调用的, 因此只能使用 默认绑定,无法应用其他规则。

隐式绑定

另一条需要考虑的规则是调用位置是否有上下文对象, 或者说是否被某个对象拥有或者包含, 不过这种说法可能会造成一些误导。

思考下面的代码:

1
2
3
4
5
6
7
8
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 是一样的。

显式绑定

就像我们刚才看到的那样, 在分析隐式绑定时, 我们必须在一个对象内部包含一个指向函数的属性, 并通过这个属性间接引用函数, 从而把 this 间接(隐式) 绑定到这个对象上。
那么如果我们不想在对象内部包含函数引用, 而想在某个对象上强制调用函数, 该怎么做呢?

JavaScript 中的“所有” 函数都有一些有用的特性(这和它们的 [[ 原型 ]] 有关——之后我们会详细介绍原型), 可以用来解决这个问题。 具体点说, 可以使用函数的 call(..) apply(..) 方法。 严格来说, JavaScript 的宿主环境有时会提供一些非常特殊的函数, 它们并没有这两个方法。 但是这样的函数非常罕见, JavaScript 提供的绝大多数函数以及你自己创建的所有函数都可以使用 call(..) 和 apply(..) 方法。

这两个方法是如何工作的呢? 它们的第一个参数是一个对象, 它们会把这个对象绑定到this, 接着在调用函数时指定这个 this。 因为你可以直接指定 this 的绑定对象, 因此我们称之为显式绑定。

思考下面的代码:

1
2
3
4
5
6
7
function foo() {
console.log( this.a );
}
var obj = {
a:2
};
foo.call( obj ); // 2

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

new绑定

这是第四条也是最后一条 this 的绑定规则, 在讲解它之前首先需要澄清一个非常常见的关于 JavaScript 中函数和对象的误解。

在传统的面向类的语言中,“构造函数” 是类中的一些特殊方法, 使用 new 初始化类时会调用类中的构造函数。 通常的形式是这样的:

1
something = new MyClass(..);

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

首先我们重新定义一下 JavaScript 中的“构造函数”。 在 JavaScript 中, 构造函数只是一些使用 new 操作符时被调用的函数。 它们并不会属于某个类, 也不会实例化一个类。 实际上,它们甚至都不能说是一种特殊的函数类型, 它们只是被 new 操作符调用的普通函数而已。

思考下面的代码:

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

使用 new 来调用 foo(..) 时, 我们会构造一个新对象并把它绑定到 foo(..) 调用中的 this 上。 new 是最后一种可以影响函数调用时 this 绑定行为的方法, 我们称之为 new 绑定。

Sep 02, 2018