摘要: 神奇的 this!
译者: 前端小智
Fundebug 经授权转载, 版权归原作者所有.
1. this 的奥秘
很多时候, JS 中的 this 对于咱们的初学者很容易产生困惑不解. this 的功能很强大, 但需要一定付出才能慢慢理解它.
对 Java,PHP 或其他标准语言来看, this 表示类方法中当前对象的实例. 大多数情况下, this 不能在方法之外使用, 这样就比较不会造成混淆.
在 J 要中情况就有所不同: this 表示函数的当前执行上下文, JS 中函数调用主要有以下几种方式:
函数调用:
alert('Hello World!')
方法调用:
console.log('Hello World!')
构造函数: new RegExp('\\d')
隐式调用:
alert.call(undefined, 'Hello World!')
每种调用类型以自己的方式定义上下文, 所以就很容易产生混淆.
此外, 严格模式也会影响执行上下文.
理解 this 关键是要清楚的知道函数调用及其如何影响上下文.
本文主要说明函数的调用方式及如何影响 this, 并且说明执行上下文的常见陷阱.
在开始之前, 先知道几个术语:
调用函数正在执行创建函数体的代码, 或者只是调用函数. 例如, parseInt 函数调用是 parseInt('15').
函数调用: 执行构成函数主体的代码: 例如, parseInt 函数调用是 parseInt('15').
调用的上下文: 指 this 在函数体内的值. 例如,
map.set('key', 'value')
的调用上下文是 map.
函数的作用域: 是在函数体中可访问的变量, 对象和函数的集合.
2. 函数调用
当一个表达式为函数接着一个 (, 一些用逗号分隔的参数以及一个) 时, 函数调用被执行, 例如 parseInt('18').
函数调用表达式不能是属性方式的调用, 如 obj.myFunc(), 这种是创建一个方法调用. 再如 [1,5].join(',')不是函数调用, 而是方法调用, 这种区别需要记住哈, 很重要滴.
函数调用的一个简单示例:
- function hello(name) {
- return 'Hello' + name + '!';
- }
- // 函数调用
- const message = hello('World');
- console.log(message); // => 'Hello World!'
hello('World')是函数调用: hello 表达式等价于一个函数, 跟在它后面的是一对括号以及'World'参数.
一个更高级的例子是 IIFE(立即调用的函数表达式)
- const message = (function(name) {
- return 'Hello' + name + '!';
- })('World');
- console.log(message) // => 'Hello World!'
IIFE 也是一个函数调用: 第一对圆括号 (function(name) {...}) 是一个表达式, 它的计算结果是一个函数对象, 后面跟着一对圆括号, 圆括号的参数是 "World".
2.1. 在函数调用中的 this
this 在函数调用中是一个全局对象
局对象由执行环境决定. 在浏览器中, this 是 Windows 对象.
image
在函数调用中, 执行上下文是全局对象.
再来看看下面函数中的上下文又是什么鬼:
- function sum(a, b) {
- console.log(this === Windows); // => true
- this.myNumber = 20; // 将'myNumber'属性添加到全局对象
- return a + b;
- }
- // sum() is invoked as a function
- // sum() 中的 `this` 是一个全局对象(Windows)
- sum(15, 16); // => 31
- Windows.myNumber; // => 20
在调用 sum(15,16)时, JS 自动将 this 设置为全局对象, 在浏览器中该对象是 Windows.
当 this 在任何函数作用域 (最顶层作用域: 全局执行上下文) 之外使用, this 表示 Windows 对象
- console.log(this === Windows); // => true
- this.myString = 'Hello World!';
- console.log(Windows.myString); // => 'Hello World!'
- <!-- In an html file -->
- <script type="text/javascript">
- console.log(this === Windows); // => true
- </script>
2.2 严格模式下的函数调用 this 又是什么样的
this 在严格模式下的函数调用中为 undefined
严格模式是在 ECMAScript 5.1 中引入的, 它提供了更好的安全性和更强的错误检查.
要启用严格模式, 函数头部写入 use strict 即可.
启用后, 严格模式会影响执行上下文, this 在常规函数调用中值为 undefined. 与上述情况 2.1 相反, 执行上下文不再是全局对象.
image
严格模式函数调用示例:
- function multiply(a, b) {
- 'use strict'; // 启用严格模式
- console.log(this === undefined); // => true
- return a * b;
- }
- multiply(2, 5); // => 10
当 multiply(2,5)作为函数调用时, this 是 undefined.
严格模式不仅在当前作用域中有效, 在内部作用域中也是有效的(对于在内部声明的所有函数):
- function execute() {
- 'use strict'; // 开启严格模式
- function concat(str1, str2) {
- // 严格模式仍然有效
- console.log(this === undefined); // => true
- return str1 + str2;
- }
- // concat() 在严格模式下作为函数调用
- // this in concat() is undefined
- concat('Hello', 'World!'); // => "Hello World!"
- }
- execute();
'use strict'被插入到执行体的顶部, 在其作用域内启用严格模式. 因为函数 concat 是在执行的作用域中声明的, 所以它继承了严格模式.
单个 JS 文件可能包含严格和非严格模式. 因此, 对于相同的调用类型, 可以在单个脚本中具有不同的上下文行为:
- function nonStrictSum(a, b) {
- // 非严格模式
- console.log(this === Windows); // => true
- return a + b;
- }
- function strictSum(a, b) {
- 'use strict';
- // 启用严格模式
- console.log(this === undefined); // => true
- return a + b;
- }
- nonStrictSum(5, 6); // => 11
- strictSum(8, 12); // => 20
2.3 陷阱: this 在内部函数中的时候
函数调用的一个常见陷阱是, 认为 this 在内部函数中的情况与外部函数中的情况相同.
正确地说, 内部函数的上下文只依赖于它的调用类型, 而不依赖于外部函数的上下文.
要将 this 设置为所需的值, 可以通过 .call()或. apply()修改内部函数的上下文或使用. bind()创建绑定函数.
下面的例子是计算两个数的和:
- const numbers = {
- numberA: 5,
- numberB: 10,
- sum: function() {
- console.log(this === numbers); // => true
- function calculate() {
- console.log(this === numbers); // => false
- return this.numberA + this.numberB;
- }
- return calculate();
- }
- };
- numbers.sum(); // => NaN
sum()是对象上的方法调用, 所以 sum 中的上下文是 numbers 对象. calculate 函数是在 sum 中定义的, 你可能希望在 calculate()中 this 也表示 number 对象.
calculate()是一个函数调用(不是方法调用), 它将 this 作为全局对象 Windows(非严格模下). 即使外部函数 sum 将上下文作为 number 对象, 它在 calculate 里面没有影响.
sum()的调用结果是 NaN, 不是预期的结果 5 + 10 = 15, 这都是因为没有正确调用 calculate.
为了解决这个问题, calculate 函数中上下文应该与 sum 中的一样, 以便可以访问 numberA 和 numberB 属性.
一种解决方案是通过调用 calculator.call(this)手动将 calculate 上下文更改为所需的上下文.
- const numbers = {
- numberA: 5,
- numberB: 10,
- sum: function() {
- console.log(this === numbers); // => true
- function calculate() {
- console.log(this === numbers); // => true
- return this.numberA + this.numberB;
- }
- // 使用 .call() 方法修改上下文
- return calculate.call(this);
- }
- };
- numbers.sum(); // => 15
call(this)像往常一样执行 calculate 函数, 但 call 会把上下文修改为指定为第一个参数的值.
现在 this.numberA + this.numberB 相当于 numbers.numberA + numbers.numberB. 该函数返回预期结果 5 + 10 = 15.
另一种就是使用箭头函数
- const numbers = {
- numberA: 5,
- numberB: 10,
- sum: function() {
- console.log(this === numbers); // => true
- const calculate = () => {
- console.log(this === numbers); // => true
- return this.numberA + this.numberB;
- }
- return calculate();
- }
- };
- numbers.sum(); // => 15
3. 方法调用
方法是存储在对象属性中的函数. 例如
- const myObject = {
- // helloFunction 是一个方法
- helloFunction: function() {
- return 'Hello World!';
- }
- };
- const message = myObject.helloFunction();
helloFunction 是 myObject 的一个方法, 要调用该方法, 可以这样子调用 :myObject.helloFunction.
当一个表达式以属性访问的形式执行时, 执行的是方法调用, 它相当于以个函数接着(, 一组用逗号分隔的参数以及).
利用前面的例子, myObject.helloFunction()是对象 myObject 上的一个 helloFunction 的方法调用.[1, 2].join(',') 或 /\s/.test('beautiful world')也被认为是方法调用.
区分函数调用和方法调用非常重要, 因为它们是不同的类型. 主要区别在于方法调用需要一个属性访问器形式来调用函数 (obj.myFunc() 或 obj['myFunc']()), 而函数调用不需要(myFunc()).
- ['Hello', 'World'].join(','); // 方法调用
- ({ ten: function() { return 10; } }).ten(); // 方法调用
- const obj = {};
- obj.myFunction = function() {
- return new Date().toString();
- };
- obj.myFunction(); // 方法调用
- const otherFunction = obj.myFunction;
- otherFunction(); // 函数调用
- parseFloat('16.60'); // 函数调用
- isNaN(0); // 函数调用
理解函数调用和方法调用之间的区别有助于正确识别上下文.
3.1 方法调用中 this 是肿么样
在方法调用中, this 是拥有这个方法的对象
当调用对象上的方法时, this 就变成了对象本身.
image
创建一个对象, 该对象有一个递增数字的方法
- const calc = {
- num: 0,
- increment: function() {
- console.log(this === calc); // => true
- this.num += 1;
- return this.num;
- }
- };
- // method invocation. this is calc
- calc.increment(); // => 1
- calc.increment(); // => 2
调用 calc.increment()使 increment 函数的上下文成为 calc 对象. 所以使用 this.num 来增加 num 属性是有效的.
再来看看另一个例子. JS 对象从原型继承一个方法, 当在对象上调用继承的方法时, 调用的上下文仍然是对象本身
- const myDog = Object.create({
- sayName: function() {
- console.log(this === myDog); // => true
- return this.name;
- }
- });
- myDog.name = 'Milo';
- // 方法调用 this 指向 myDog
- myDog.sayName(); // => 'Milo'
Object.create()创建一个新对象 myDog, 并根据第一个参数设置其原型. myDog 对象继承 sayName 方法.
执行 myDog. sayname()时, myDog 是调用的上下文.
在 EC6 class 语法中, 方法调用上下文也是实例本身
- class Planet {
- constructor(name) {
- this.name = name;
- }
- getName() {
- console.log(this === earth); // => true
- return this.name;
- }
- }
- var earth = new Planet('Earth');
- // method invocation. the context is earth
- earth.getName(); // => 'Earth'
3.2 陷阱: 将方法与其对象分离
方法可以从对象中提取到一个单独的变量 const alone = myObj.myMethod. 当方法单独调用时, 与原始对象 alone()分离, 你可能认为当前的 this 就是定义方法的对象 myObject.
如果方法在没有对象的情况下调用, 那么函数调用就会发生, 此时的 this 指向全局对象 Windows 严格模式下是 undefined.
下面的示例定义了 Animal 构造函数并创建了它的一个实例: myCat. 然后 setTimout()在 1 秒后打印 myCat 对象信息
- function Animal(type, legs) {
- this.type = type;
- this.legs = legs;
- this.logInfo = function() {
- console.log(this === myCat); // => false
- console.log('The' + this.type + 'has' + this.legs + 'legs');
- }
- }
- const myCat = new Animal('Cat', 4);
- // The undefined has undefined legs
- setTimeout(myCat.logInfo, 1000);
你可能认为 setTimout 调用 myCat.loginfo()时, 它应该打印关于 myCat 对象的信息.
不幸的是, 方法在作为参数传递时与对象是分离, setTimout(myCat.logInfo)以下情况是等效的:
- setTimout(myCat.logInfo);
- // 等价于
- const extractedLogInfo = myCat.logInfo;
- setTimout(extractedLogInfo);
将分离的 logInfo 作为函数调用时, this 是全局 Windows, 所以对象信息没有正确地打印.
函数可以使用. bind()方法与对象绑定, 就可以解决 this 指向的问题.
- function Animal(type, legs) {
- this.type = type;
- this.legs = legs;
- this.logInfo = function() {
- console.log(this === myCat); // => true
- console.log('The' + this.type + 'has' + this.legs + 'legs');
- };
- }
- const myCat = new Animal('Cat', 4);
- // logs "The Cat has 4 legs"
- setTimeout(myCat.logInfo.bind(myCat), 1000);
myCat.logInfo.bind(myCat)返回一个新函数, 它的执行方式与 logInfo 完全相同, 但是此时的 this 指向 myCat, 即使在函数调用中也是如此.
另一种解决方案是将 logInfo()方法定义为一个箭头函数:
- function Animal(type, legs) {
- this.type = type;
- this.legs = legs;
- this.logInfo = () => {
- console.log(this === myCat); // => true
- console.log('The' + this.type + 'has' + this.legs + 'legs');
- };
- }
- const myCat = new Animal('Cat', 4);
- // logs "The Cat has 4 legs"
- setTimeout(myCat.logInfo, 1000);
4. 构造函数调用
当 new 关键词紧接着函数对象,(, 一组逗号分隔的参数以及)时被调用, 执行的是构造函数调用如 new RegExp('\\d').
声明了一个 Country 函数, 并且将它作为一个构造函数调用:
- function Country(name, traveled) {
- this.name = name ? name : 'United Kingdom';
- this.traveled = Boolean(traveled);
- }
- Country.prototype.travel = function() {
- this.traveled = true;
- };
- // 构造函数调用
- const france = new Country('France', false);
- // 构造函数调用
- const unitedKingdom = new Country;
- france.travel(); // Travel to France
new Country('France', false)是 Country 函数的构造函数调用. 它的执行结果是一个 name 属性为'France'的新的对象. 如果这个构造函数调用时不需要参数, 那么括号可以省略: new Country.
从 ES6 开始, JS 允许用 class 关键词来定义构造函数
- class City {
- constructor(name, traveled) {
- this.name = name;
- this.traveled = false;
- }
- travel() {
- this.traveled = true;
- }
- }
- // Constructor invocation
- const paris = new City('Paris', false);
- paris.travel();
new City('Paris')是构造函数调用. 这个对象的初始化由这个类中一个特殊的方法 constructor 来处理. 其中, this 指向新创建的对象.
构造函数创建了一个新的空的对象, 它从构造函数的原型继承了属性. 构造函数的作用就是去初始化这个对象. 可能你已经知道了, 在这种类型的调用中, 上下文指向新创建的实例.
当属性访问 myObject.myFunction 前面有一个 new 关键词时, JS 会执行构造函数调用而不是原来的方法调用.
例如 new myObject.myFunction(): 它相当于先用属性访问把方法提取出来 extractedFunction = myObject.myFunction, 然后利用把它作为构造函数创建一个新的对象: new extractedFunction().
4.1. 构造函数中的 this
在构造函数调用中 this 指向新创建的对象
构造函数调用的上下文是新创建的对象. 它利用构造函数的参数初始化新的对象, 设定属性的初始值, 添加事件处理函数等等.
image
来看看下面示例中的上下文
- function Foo () {
- console.log(this instanceof Foo); // => true
- this.property = 'Default Value';
- }
- // Constructor invocation
- const fooInstance = new Foo();
- fooInstance.property; // => 'Default Value'
new Foo() 正在进行构造函数调用, 其中上下文是 fooInstance. 在 Foo 内部初始化对象: this.property 被赋值为默认值.
同样的情况在用 class 语法 (从 ES6 起) 时也会发生, 唯一的区别是初始化在 constructor 方法中进行:
- class Bar {
- constructor() {
- console.log(this instanceof Bar); // => true
- this.property = 'Default Value';
- }
- }
- // Constructor invocation
- const barInstance = new Bar();
- barInstance.property; // => 'Default Value'
4.2. 陷阱: 忘了使用 new
有些 JS 函数不是只在作为构造函数调用的时候才创建新的对象, 作为函数调用时也会, 例如 RegExp:
- var reg1 = new RegExp('\\w+');
- var reg2 = RegExp('\\w+');
- reg1 instanceof RegExp; // => true
- reg2 instanceof RegExp; // => true
- reg1.source === reg2.source; // => true
当执行的 new RegExp('\\w+')和 RegExp('\\w+')时, JS 会创建等价的正则表达式对象.
使用函数调用来创建对象存在一个潜在的问题(不包括工厂模式), 因为一些构造函数可能会忽略在缺少 new 关键字时初始化对象的逻辑.
下面的例子说明了这个问题:
- function Vehicle(type, wheelsCount) {
- this.type = type;
- this.wheelsCount = wheelsCount;
- return this;
- }
- // 忘记使用 new
- const car = Vehicle('Car', 4);
- car.type; // => 'Car'
- car.wheelsCount // => 4
- car === Windows // => true
Vehicle 是一个在上下文对象上设置 type 和 wheelsCount 属性的函数.
当执行 Vehicle('Car', 4)时, 返回一个对象 Car, 它具有正确的属性: Car.type 为 Car 和 Car.wheelsCount 为 4, 你可能认为它很适合创建和初始化新对象.
然而, 在函数调用中, this 是 Windows 对象 , 因此 Vehicle('Car',4)在 Windows 对象上设置属性. 显然这是错误, 它并没有创建新对象.
当你希望调用构造函数时, 确保你使用了 new 操作符:
- function Vehicle(type, wheelsCount) {
- if (!(this instanceof Vehicle)) {
- throw Error('Error: Incorrect invocation');
- }
- this.type = type;
- this.wheelsCount = wheelsCount;
- return this;
- }
- // Constructor invocation
- const car = new Vehicle('Car', 4);
- car.type // => 'Car'
- car.wheelsCount // => 4
- car instanceof Vehicle // => true
- // Function invocation. Throws an error.
- const brokenCar = Vehicle('Broken Car', 3);
new Vehicle('Car',4) 运行正常: 创建并初始化一个新对象, 因为构造函数调用中时使用了 new 关键字.
在构造函数里添加了一个验证 this instanceof Vehicle 来确保执行的上下文是正确的对象类型. 如果 this 不是 Vehicle, 那么就会报错. 这样, 如果执行 Vehicle('Broken Car', 3)(没有 new), 我们会得到一个异常: Error: Incorrect invocation.
给大家推荐一个好用的 BUG 监控工具 Fundebug.
5. 隐式调用
使用 myFun.call()或 myFun.apply()方法调用函数时, 执行的是隐式调用.
JS 中的函数是第一类对象, 这意味着函数就是对象, 对象的类型为 Function. 从函数对象的方法列表中,.call()和. apply()用于调用具有可配置上下文的函数.
方法
.call(thisArg[, arg1[, arg2[, ...]]])
将接受的第一个参数 thisArg 作为调用时的上下文, arg1, arg2, ... 这些则作为参数传入被调用的函数.
方法
.apply(thisArg, [args])
将接受的第一个参数 thisArg 作为调用时的上下文, 并且接受另一个类似数组的对象 [arg1, arg2, ...] 作为被调用函数的参数传入.
下面是隐式调用的例子
- function increment(number) {
- return ++number;
- }
- increment.call(undefined, 10); // => 11
- increment.apply(undefined, [10]); // => 11
increment.call()和 increment.apply()都用参数 10 调用了这个自增函数.
两者的区别是. call()接受一组参数, 例如 myFunction.call(thisValue, 'value1', 'value2'). 而. apply()接受的一组参数必须是一个类似数组的对象, 例如 myFunction.apply(thisValue, ['value1', 'value2']).
5.1. 隐式调用中的 this
在隐式调用. call()或. apply()中, this 是第一个参数
很明显, 在隐式调用中, this 作为第一个参数传递给. call()或. apply().
- var rabbit = { name: 'White Rabbit' };
- function concatName(string) {
- console.log(this === rabbit); // => true
- return string + this.name;
- }
- concatName.call(rabbit, 'Hello'); // => 'Hello White Rabbit'
- concatName.apply(rabbit, ['Bye']); // => 'Bye White Rabbit'
当应该使用特定上下文执行函数时, 隐式调用非常有用. 例如为了解决方法调用时, this 总是 Windows 或严格模式下的 undefined 的上下文问题. 隐式调用可以用于模拟在一个对象上调用某个方法.
- function Runner(name) {
- console.log(this instanceof Rabbit); // => true
- this.name = name;
- }
- function Rabbit(name, countLegs) {
- console.log(this instanceof Rabbit); // => true
- Runner.call(this, name);
- this.countLegs = countLegs;
- }
- const myRabbit = new Rabbit('White Rabbit', 4);
- myRabbit; // { name: 'White Rabbit', countLegs: 4 }
Rabbit 中的 Runner.call(this, name)隐式调用了父类的函数来初始化这个对象.
6. 绑定函数
绑定函数是与对象连接的函数. 通常使用. bind()方法从原始函数创建. 原始函数和绑定函数共享相同的代码和作用域, 但执行时上下文不同.
方法 myFunc.bind(thisArg[, arg1[, arg2[, ...]]])接受第一个参数 thisArg 作为绑定函数执行时的上下文, 并且它接受一组可选的参数 arg1, arg2, ... 作为被调用函数的参数. 它返回一个绑定了 thisArg 的新函数.
- function multiply(number) {
- 'use strict';
- return this * number;
- }
- const double = multiply.bind(2);
- double(3); // => 6
- double(10); // => 20
bind(2)返回一个新的函数对象 double,double 绑定了数字 2.multiply 和 double 具有相同的代码和作用域.
与. apply()和. call() 方法相反, 它不会立即调用该函数,.bind()方法只返回一个新函数, 在之后被调用, 只是 this 已经被提前设置好了.
6.1. 绑定函数中的 this
在调用绑定函数时, this 是. bind()的第一个参数.
.bind()的作用是创建一个新函数, 调用该函数时, 将上下文作为传递给. bind()的第一个参数. 它是一种强大的技术, 使咱们可以创建一个定义了 this 值的函数.
image
来看看, 如何在如何在绑定函数设置 this
- const numbers = {
- array: [3, 5, 10],
- getNumbers: function() {
- return this.array;
- }
- };
- const boundGetNumbers = numbers.getNumbers.bind(numbers);
- boundGetNumbers(); // => [3, 5, 10]
- // Extract method from object
- const simpleGetNumbers = numbers.getNumbers;
- simpleGetNumbers(); // => undefined (严格模式下报错)
numbers.getNumbers.bind(numbers)返回绑定 numbers 对象 boundGetNumbers 函数. boundGetNumbers()调用时的 this 是 number 对象, 并能够返回正确的数组对象.
可以将函数 numbers.getNumbers 提取到变量 simpleGetNumbers 中而不进行绑定. 在之后的函数调用中 simpleGetNumbers()的 this 是 Windows(严格模式下为 undefined), 不是 number 对象. 在这个情况下, simpleGetNumbers()不会正确返回数组.
6.2 紧密的上下文绑定
.bind()创建一个永久的上下文链接, 并始终保持它. 一个绑定函数不能通过. call()或者. apply()来改变它的上下文, 甚至是再次绑定也不会有什么作用.
只有绑定函数的构造函数调用才能更改已经绑定的上下文, 但是很不推荐的做法(构造函数调用必须使用常规的非绑定函数).
下面示例创建一个绑定函数, 然后尝试更改其已预先定义好的上下文
- function getThis() {
- 'use strict';
- return this;
- }
- const one = getThis.bind(1);
- // 绑定函数调用
- one(); // => 1
- // 使用带有. apply()和. call()的绑定函数
- one.call(2); // => 1
- one.apply(2); // => 1
- // 再次绑定
- one.bind(2)(); // => 1
- // 以构造函数的形式调用绑定函数
- new one(); // => Object
只有 new one()改变了绑定函数的上下文, 其他方式的调用中 this 总是等于 1.
7. 箭头函数
箭头函数用于以更短的形式声明函数, 并在词法上绑定上下文. 它可以这样使用
- const hello = (name) => {
- return 'Hello' + name;
- };
- hello('World'); // => 'Hello World'
- // Keep only even numbers
- [1, 2, 5, 6].filter(item => item % 2 === 0); // => [2, 6]
箭头函数语法简单, 没有冗长的 function 关键字. 当箭头函数只有一条语句时, 甚至可以省略 return 关键字.
箭头函数是匿名的, 这意味着 name 属性是一个空字符串''. 这样它就没有词法上函数名(函数名对于递归, 分离事件处理程序非常有用)
同时, 跟常规函数相反, 它也不提供 arguments 对象. 但是, 这在 ES6 中通过 REST parameters 修复了:
- const sumArguments = (...args) => {
- console.log(typeof arguments); // => 'undefined'
- return args.reduce((result, item) => result + item);
- };
- sumArguments.name // => ''
- sumArguments(5, 5, 6); // => 16
7.1. 箭头函数中的 this
this 定义箭头函数的封闭上下文
箭头函数不会创建自己的执行上下文, 而是从定义它的外部函数中获取 this. 换句话说, 箭头函数在词汇上绑定 this.
image
下面的例子说明了这个上下文透明的特性:
- class Point {
- constructor(x, y) {
- this.x = x;
- this.y = y;
- }
- log() {
- console.log(this === myPoint); // => true
- setTimeout(()=> {
- console.log(this === myPoint); // => true
- console.log(this.x + ':' + this.y); // => '95:165'
- }, 1000);
- }
- }
- const myPoint = new Point(95, 165);
- myPoint.log();
setTimeout 使用与 log()方法相同的上下文 (myPoint 对象) 调用箭头函数. 正如所见, 箭头函数从定义它的函数继承上下文.
如果在这个例子里尝试用常规函数, 它创建自己的上下文(Windows 或严格模式下的 undefined). 因此, 要使相同的代码正确地使用函数表达式, 需要手动绑定上下文: setTimeout(function(){...}.bind(this)). 这很冗长, 使用箭头函数是一种更简洁, 更短的解决方案.
如果箭头函数在最顶层的作用域中定义(在任何函数之外), 则上下文始终是全局对象(浏览器中的 Windows):
- onst getContext = () => {
- console.log(this === Windows); // => true
- return this;
- };
- console.log(getContext() === Windows); // => true
箭头函数一劳永逸地与词汇上下文绑定. 即使修改上下文, this 也不能被改变:
- const numbers = [1, 2];
- (function() {
- const get = () => {
- console.log(this === numbers); // => true
- return this;
- };
- console.log(this === numbers); // => true
- get(); // => [1, 2]
- // Use arrow function with .apply() and .call()
- get.call([0]); // => [1, 2]
- get.apply([0]); // => [1, 2]
- // Bind
- get.bind([0])(); // => [1, 2]
- }).call(numbers);
无论如何调用箭头函数 get, 它总是保留词汇上下文 numbers. 用其他上下文的隐式调用 (通过 get.call([0]) 或 get.apply([0]))或者重新绑定 (通过. bind()) 都不会起作用.
箭头函数不能用作构造函数. 将它作为构造函数调用 (new get()) 会抛出一个错误: TypeError: get is not a constructor.
7.2. 陷阱: 用箭头函数定义方法
你可能希望使用箭头函数来声明一个对象上的方法. 箭头函数的定义相比于函数表达式短得多:(param) => {...} instead of function(param) {..}.
来看看例子, 用箭头函数在 Period 类上定义了 format()方法:
- function Period (hours, minutes) {
- this.hours = hours;
- this.minutes = minutes;
- }
- Period.prototype.format = () => {
- console.log(this === Windows); // => true
- return this.hours + 'hours and' + this.minutes + 'minutes';
- };
- const walkPeriod = new Period(2, 30);
- walkPeriod.format(); // => 'undefined hours and undefined minutes'
由于 format 是一个箭头函数, 并且在全局上下文 (最顶层的作用域) 中定义, 因此 this 指向 Windows 对象.
即使 format 作为方法在一个对象上被调用如 walkPeriod.format(),Windows 仍然是这次调用的上下文. 之所以会这样是因为箭头函数有静态的上下文, 并不会随着调用方式的改变而改变.
该方法返回'undefined hours 和 undefined minutes', 这不是咱们想要的结果.
函数表达式解决了这个问题, 因为常规函数确实能根据实际调用改变它的上下文:
- function Period (hours, minutes) {
- this.hours = hours;
- this.minutes = minutes;
- }
- Period.prototype.format = function() {
- console.log(this === walkPeriod); // => true
- return this.hours + 'hours and' + this.minutes + 'minutes';
- };
- const walkPeriod = new Period(2, 30);
- walkPeriod.format(); // => '2 hours and 30 minutes'
walkPeriod.format()是一个对象上的方法调用, 它的上下文是 walkPeriod 对象. this.hours 等于 2,this.minutes 等于 30, 所以这个方法返回了正确的结果:'2 hours and 30 minutes'.
来源: http://www.jianshu.com/p/32ab3c22adcb