标签：
this之谜许多时候，this关键词对我以及许多刚起步的JavaScript程序员来说，都是一个谜。它是一种很强大的特性，但是理解它需要花不少功夫。
对有Java, PHP或者其他常见的编程语言背景的人来说，this仅仅被看成是类方法中当前对象的一个实例：不会多也不会少。多数时候，它不能在方法外被使用。正是这样一种简单的使用方法，避免了混淆。
在JavaScript中，this是当前执行函数的上下文。因为JavaScript有4种不同的函数调用方式：
alert(‘Hello World!‘)console.log(‘Hello World!‘)new RegExp(‘\\d‘)alert.call(undefined, ‘Hello World!‘)并且每种方法都定义了自己的上下文，this会表现得跟程序员预期的不太一样。同时，strict模式也会影响函数执行时的上下文。
理解this的关键点就是要对函数调用以及它如何影响上下文有个清晰的观点。这篇文章将会着重于对函数调用的解释、函数调用如何影响this以及展示确定上下文时常见的陷阱。
在开始之前，让我们来熟悉一些术语：
parseInt(‘15‘)是parseInt函数调用.this在函数体中的值。当一个表达式为函数接着一个(，一些用逗号分隔的参数以及一个）时，函数调用被执行。例如parseInt(‘18‘)。这个表达式不能是属性访问，如myObject.myFunction，因为这会变成一个方法调用。举个例子，[1,5].join(‘,‘)不是一个函数调用，而是一个方法调用。
一个简单的函数调用例子:
1 function hello(name) { 2 return ‘Hello ‘ + name + ‘!‘; 3 } 4 // Function invocation 5 var message = hello(‘World‘); 6 console.log(message); // => ‘Hello World!‘
hello(‘World‘)是函数调用: hello表达式等价于一个函数，跟在它后面的是一对括号以及‘World‘参数。
更加高级的例子是IIFE (立即调用的函数表达式):
1 var message = (function(name) { 2 return ‘Hello ‘ + name + ‘!‘; 3 })(‘World‘); 4 console.log(message) // => ‘Hello World!‘
IIFE也是一个函数调用: 第一对括号(function(name) {...}) 是一个等价于函数的表达式, 紧接着一对括号以及‘World‘参数: (‘World‘)。
this
this在函数调用中是一个全局对象
全局对象是由执行的环境决定的。在浏览器里它是window对象。
在函数调用里，函数执行的上下文是全局对象。让我们一起看看下面函数里的上下文：
1 function sum(a, b) { 2 console.log(this === window); // => true 3 this.myNumber = 20; // add ‘myNumber‘ property to global object 4 return a + b; 5 } 6 // sum() is invoked as a function 7 // this in sum() is a global object (window) 8 sum(15, 16); // => 31 9 window.myNumber; // => 20
在sum(15, 16)被调用的时候，JavaScript自动设置this指向全局对象，也就是浏览器里的window。
当this在所有函数作用域以外(最上层的作用域：全局执行的上下文)调用时，它也指向全局对象：
1 console.log(this === window); // => true 2 this.myString = ‘Hello World!‘; 3 console.log(window.myString); // => ‘Hello World!‘
1 <!-- In an html file --> 2 <script type="text/javascript"> console.log(this === window); // => true </script>
this, strict模式strict模式下，函数调用中的
this是undefined
strict模式在ECMAScript 5.1中被引入，它是一个受限制的JavaScript变种，提供了更好的安全性以及错误检查。为了使用它，把‘use strict‘放在函数体的开始。这个模式会影响执行的上下文，把this变成undefined。函数执行的上下文跟上面的例子2.1相反，不再是全局对象
在strict模式下执行函数的例子:
1 function multiply(a, b) { 2 ‘use strict‘; // enable the strict mode 3 console.log(this === undefined); // => true 4 return a * b; 5 } 6 // multiply() function invocation with strict mode enabled 7 // this in multiply() is undefined 8 multiply(2, 5); // => 10
当multiply(2, 5)作为函数被调用时，this是undefined。
strict模式不仅在当前作用域起作用，也会对内部的作用域起作用(对所有在内部定义的函数有效)：
1 function execute() { 2 ‘use strict‘; // activate the strict mode 3 function concat(str1, str2) { 4 // the strict mode is enabled too 5 console.log(this === undefined); // => true 6 return str1 + str2; 7 } 8 // concat() is invoked as a function in strict mode 9 // this in concat() is undefined 10 concat(‘Hello‘, ‘ World!‘); // => "Hello World!" 11 } 12 execute();
‘use strict‘ 插入在execute函数体的一开始, 使它在execute函数的作用域内起作用。 因为concat定义在execute的作用域内, 它也会继承strict模式， 这导致调用concat(‘Hello‘, ‘ World!‘)时， this是undefined。
单个的JavaScript文件可能既包含strict模式又包含非strict模式。所以，在单个的脚本内，同样的调用方法可能有不同的上下文行为：
1 function nonStrictSum(a, b) { 2 // non-strict mode 3 console.log(this === window); // => true 4 return a + b; 5 } 6 function strictSum(a, b) { 7 ‘use strict‘; 8 // strict mode is enabled 9 console.log(this === undefined); // => true 10 return a + b; 11 } 12 // nonStrictSum() is invoked as a function in non-strict mode 13 // this in nonStrictSum() is the window object 14 nonStrictSum(5, 6); // => 11 15 // strictSum() is invoked as a function in strict mode 16 // this in strictSum() is undefined 17 strictSum(8, 12); // => 20
this一个函数调用中的常见错误就是以为this在内部函数中跟在外部函数中一样。 正确来说，内部函数的上下文依赖于调用方法，而不是外部函数的上下文。 为了能使this跟预期的一样，用隐式调用来修改内部函数的上下文(用.call()或者.apply(), 如5.所示)或者创建一个绑定函数(用.bind(), 如6.所示）。
下面的例子计算了2个数字的和：
1 var numbers = { 2 numberA: 5, 3 numberB: 10, 4 sum: function() { 5 console.log(this === numbers); // => true 6 function calculate() { 7 // this is window or undefined in strict mode 8 console.log(this === numbers); // => false 9 return this.numberA + this.numberB; 10 } 11 return calculate(); 12 } 13 }; 14 numbers.sum(); // => NaN or throws TypeError in strict mode
numbers.sum()是一个对象上的方法调用 (见3.)，所以sum中的上下文是numbers对象。calculate函数定义在sum内部，所以你会指望calculate()中的this也是numbers对象。然而，calculate()是一个函数调用（而不是方法调用），它的this是全局对象window(例子2.1.)或者strict模式下的undefined(例子2.2.)。即使外部函数sum的上下文是numbers对象，它在这里也没有影响。numbers.sum()的调用结果是NaN或者strict模式下的TypeError: Cannot read property ‘numberA‘ of undefined错误。因为calculate没有被正确调用，结果绝不是预期的5 + 10 = 15。
为了解决这个问题，calculate应该跟sum有一样的上下文，以便于使用numberA和numberB。解决方法之一是使用.call()方法(见章节5.):
1 var numbers = { 2 numberA: 5, 3 numberB: 10, 4 sum: function() { 5 console.log(this === numbers); // => true 6 function calculate() { 7 console.log(this === numbers); // => true 8 return this.numberA + this.numberB; 9 } 10 // use .call() method to modify the context 11 return calculate.call(this); 12 } 13 }; 14 numbers.sum(); // => 15
calculate.call(this)像往常一样执行calculate，但是上下文由第一个参数指定。现在this.numberA + this.numberB相当于numbers.numberA + numbers.numberB，函数会返回预期的结果5 + 10 = 15。
一个方法是作为一个对象的属性存储的函数。例如:
1 var myObject = { 2 // helloFunction is a method 3 helloFunction: function() { 4 return ‘Hello World!‘; 5 } 6 }; 7 var message = myObject.helloFunction();
helloFunction是myObject的一个方法。为了使用这个方法, 使用属性访问：myObject.helloFunction。
当一个表达式以属性访问的形式执行时，执行的是方法调用，它相当于以个函数接着(，一组用逗号分隔的参数以及)。 利用前面的例子，myObject.helloFunction()是对象myObject上的一个helloFunction的方法调用。[1, 2].join(‘,‘)或/\s/.test(‘beautiful world‘)也被认为是方法调用。
区分函数调用(见2.)跟方法调用是很重要的，因为他们完全不同。他们最主要的区别在于方法调用要求函数以属性访问的形式调用(如<expression>.functionProperty()或者<expression>[‘functionProperty‘]())，而函数调用并没有这样的要求(如<expression>())。
1 [‘Hello‘, ‘World‘].join(‘, ‘); // method invocation 2 ({ ten: function() { return 10; } }).ten(); // method invocation 3 var obj = {}; 4 obj.myFunction = function() { 5 return new Date().toString(); 6 }; 7 obj.myFunction(); // method invocation 8 9 var otherFunction = obj.myFunction; 10 otherFunction(); // function invocation 11 parseFloat(‘16.60‘); // function invocation 12 isNaN(0); // function invocation
this在方法调用中，
this是拥有这个方法的对象
当调用一个对象上的方法时，this变成这个对象自身。 让我们一起来创建一个对象，它带有一个可以增大数字的方法：
1 var calc = { 2 num: 0, 3 increment: function() { 4 console.log(this === calc); // => true 5 this.num += 1; 6 return this.num; 7 } 8 }; 9 // method invocation. this is calc 10 calc.increment(); // => 1 11 calc.increment(); // => 2
调用calc.increment()会把increment函数的上下文变成calc对象。所以，用this.num来增加num这个属性跟预期一样工作。
javaScript对象会从它的prototype继承方法。当这个继承的方法在新的对象上被调用时，上下文仍然是该对象本身：
1 var myDog = Object.create({ 2 sayName: function() { 3 console.log(this === myDog); // => true 4 return this.name; 5 } 6 }); 7 myDog.name = ‘Milo‘; 8 // method invocation. this is myDog 9 myDog.sayName(); // => ‘Milo‘
Object.create()创建了一个新的对象myDog，并且设置了它的prototype。myDog继承了sayName方法。当执行myDog.sayName()时，myDog是调用的上下文。
在ECMAScript 6的class语法中，方法调用的上下文也是这个实例本身：
1 class Planet { 2 constructor(name) { 3 this.name = name; 4 } 5 getName() { 6 console.log(this === earth); // => true 7 return this.name; 8 } 9 } 10 var earth = new Planet(‘Earth‘); 11 // method invocation. the context is earth 12 earth.getName(); // => ‘Earth‘
一个对象中的方法可以赋值给另一个变量。当用这个变量调用方法时，你可能以为this指向定义这个方法的对象。
正确来说如果这个方法在没有对象的时候被调用，它会变成函数调用：this变成全局对象window或者strict模式下的undefined(见2.1和2.2)。 用绑定函数(用.bind(), 见6.)可以修正上下文，使它变成拥有这个方法的对象。
下面的例子创建了Animal构造函数并创造了它的一个实例 - myCat。setTimout()会在1秒钟之后输出myCat对象的信息：
1 function Animal(type, legs) { 2 this.type = type; 3 this.legs = legs; 4 this.logInfo = function() { 5 console.log(this === myCat); // => false 6 console.log(‘The ‘ + this.type + ‘ has ‘ + this.legs + ‘ legs‘); 7 } 8 } 9 var myCat = new Animal(‘Cat‘, 4); 10 // logs "The undefined has undefined legs" 11 // or throws a TypeError in strict mode 12 setTimeout(myCat.logInfo, 1000);
你可能会以为setTimout会调用myCat.logInfo()，输出关于myCat对象的信息。实际上，这个方法在作为参数传递给setTimout(myCat.logInfo)时已经从原对象上分离了，1秒钟之后发生的是一个函数调用。当logInfo作为函数被调用时，this是全局对象，或者strict模式下的undefined（反正不是myCat对象），所以不会正确地输出信息。
函数可以通过.bind()方法跟一个对象绑定(见6.)。如果这个分离的方法与myCat绑定，那么上下文的问题就解决了：
1 function Animal(type, legs) { 2 this.type = type; 3 this.legs = legs; 4 this.logInfo = function() { 5 console.log(this === myCat); // => true 6 console.log(‘The ‘ + this.type + ‘ has ‘ + this.legs + ‘ legs‘); 7 }; 8 } 9 var myCat = new Animal(‘Cat‘, 4); 10 // logs "The Cat has 4 legs" 11 setTimeout(myCat.logInfo.bind(myCat), 1000);
myCat.logInfo.bind(myCat)返回一个跟logInfo执行效果一样的函数，但是它的this即使在函数调用情况下也是myCat。
当new关键词紧接着函数对象,(,一组逗号分隔的参数以及)时被调用，执行的是构造函数调用如new RegExp(‘\\d‘)。
这个例子声明了一个Country函数，并且将它作为一个构造函数调用：
1 function Country(name, traveled) { 2 this.name = name ? name : ‘United Kingdom‘; 3 this.traveled = Boolean(traveled); // transform to a boolean 4 } 5 Country.prototype.travel = function() { 6 this.traveled = true; 7 }; 8 // Constructor invocation 9 var france = new Country(‘France‘, false); 10 // Constructor invocation 11 var unitedKingdom = new Country; 12 13 france.travel(); // Travel to France
new Country(‘France‘, false)是Country函数的构造函数调用。它的执行结果是一个name属性为‘France‘的新的对象。 如果这个构造函数调用时不需要参数，那么括号可以省略：new Country。
从ECMAScript 6开始，JavaScript允许用class关键词来定义构造函数：
1 class City { 2 constructor(name, traveled) { 3 this.name = name; 4 this.traveled = false; 5 } 6 travel() { 7 this.traveled = true; 8 } 9 } 10 // Constructor invocation 11 var paris = new City(‘Paris‘, false); 12 paris.travel();
new City(‘Paris‘)是构造函数调用。这个对象的初始化由这个类中一个特殊的方法constructor来处理。其中，this指向新创建的对象。
构造函数创建了一个新的空的对象，它从构造函数的原型继承了属性。构造函数的作用就是去初始化这个对象。 可能你已经知道了，在这种类型的调用中，上下文指向新创建的实例。这是我们下一章的主题。
当属性访问myObject.myFunction前面有一个new关键词时，JavaScript会执行构造函数调用而不是原来的方法调用。例如new myObject.myFunction()：它相当于先用属性访问把方法提取出来extractedFunction = myObject.myFunction，然后利用把它作为构造函数创建一个新的对象： new extractedFunction()。
this在构造函数调用中
this指向新创建的对象
构造函数调用的上下文是新创建的对象。它利用构造函数的参数初始化新的对象，设定属性的初始值，添加时间处理函数等等。
让我们来看看下面例子里的上下文：
1 function Foo () { 2 console.log(this instanceof Foo); // => true 3 this.property = ‘Default Value‘; 4 } 5 // Constructor invocation 6 var fooInstance = new Foo(); 7 fooInstance.property; // => ‘Default Value‘
new Foo()正在调用一个构造函数，它的上下文是fooInstance。其中，Foo被初始化了：this.property被赋予了一个默认值。
同样的情况在用class语法（从ES6起）时也会发生，唯一的区别是初始化在constructor方法中进行：
1 class Bar { 2 constructor() { 3 console.log(this instanceof Bar); // => true 4 this.property = ‘Default Value‘; 5 } 6 } 7 // Constructor invocation 8 var barInstance = new Bar(); 9 barInstance.property; // => ‘Default Value‘
当new Bar()执行时，JavaScript创建了一个空的对象，把它作为constructor方法的上下文。现在，你可以用this关键词给它添加属性：this.property = ‘Default Value‘。
new有些JavaScirpt函数不是只在作为构造函数调用的时候才创建新的对象，作为函数调用时也会，例如RegExp：
1 var reg1 = new RegExp(‘\\w+‘); 2 var reg2 = RegExp(‘\\w+‘); 3 4 reg1 instanceof RegExp; // => true 5 reg2 instanceof RegExp; // => true 6 reg1.source === reg2.source; // => true
当执行new RegExp(‘\\w+‘)和RegExp(‘\\w+‘)时，JavaScrit会创建相同的正则表达式对象。
因为有些构造函数在new关键词缺失的情况下，可能跳过对象初始化，用函数调用创建对象会存在问题（不包括工厂模式）。 下面的例子就说明了这个问题：
1 function Vehicle(type, wheelsCount) { 2 this.type = type; 3 this.wheelsCount = wheelsCount; 4 return this; 5 } 6 // Function invocation 7 var car = Vehicle(‘Car‘, 4); 8 car.type; // => ‘Car‘ 9 car.wheelsCount // => 4 10 car === window // => true
Vehicle是一个在上下文上设置了type跟wheelsCount属性的函数。当执行Vehicle(‘Car‘, 4)时，返回了一个car对象，它的属性是正确的：car.type是‘Car‘， car.wheelsCount是4。你可能以为它正确地创建并初始化了对象。 然而，在函数调用中，this是window对象(见2.1.)，Vehicle(‘Car‘, 4)实际上是在给window对象设置属性--这是错的。它并没有创建一个新的对象。
当你希望调用构造函数时，确保你使用了new操作符：
1 function Vehicle(type, wheelsCount) { 2 if (!(this instanceof Vehicle)) { 3 throw Error(‘Error: Incorrect invocation‘); 4 } 5 this.type = type; 6 this.wheelsCount = wheelsCount; 7 return this; 8 } 9 // Constructor invocation 10 var car = new Vehicle(‘Car‘, 4); 11 car.type // => ‘Car‘ 12 car.wheelsCount // => 4 13 car instanceof Vehicle // => true 14 15 // Function invocation. Generates an error. 16 var brokenCat = Vehicle(‘Broken Car‘, 3);
new Vehicle(‘Car‘, 4)工作正常：因为new关键词出现在构造函数调用前，一个新的对象被创建并初始化。 在构造函数里我们添加了一个验证this instanceof Vehicle来确保执行的上下文是正确的对象类型。如果this不是Vehicle，那么就会报错。这样，如果执行Vehicle(‘Broken Car‘, 3)(没有new)，我们会得到一个异常：Error: Incorrect invocation。
当函数被.call()或者.apply()调用时，执行的是隐式调用。
函数在JavaScript中是第一类对象，这意味着函数也是对象。它的类型是Function。根据这个函数对象所拥有的方法列表，.call()和.apply()可以跟一个可变的上下文一起调用函数。
方法.call(thisArg[, arg1[, arg2[, ...]]])将接受的第一个参数thisArg作为调用时的上下文，arg1, arg2, ...这些则作为参数传入被调用的函数。方法.apply(thisArg, [args])将接受的第一个参数thisArg作为调用时的上下文，并且接受另一个类似数组的对象[args]作为被调用函数的参数传入。
下面是一个隐式调用的例子：
1 function increment(number) { 2 return ++number; 3 } 4 increment.call(undefined, 10); // => 11 5 increment.apply(undefined, [10]); // => 11
increment.call()和increment.apply()都用参数10调用了这个自增函数。
这两者的主要区别是.call()接受一组参数，例如myFunction.call(thisValue, ‘value1‘, ‘value2‘)。然而.apply()接受的一组参数必须是一个类似数组的对象，例如myFunction.apply(thisValue, [‘value1‘, ‘value2‘])。
this在隐式调用
.call()或.apply()中，this是第一个参数
很明显，在隐式调用中，this是传入.call()或.apply()中的第一个参数。下面的这个例子就说明了这一点：
1 var rabbit = { name: ‘White Rabbit‘ }; 2 function concatName(string) { 3 console.log(this === rabbit); // => true 4 return string + this.name; 5 } 6 // Indirect invocations 7 concatName.call(rabbit, ‘Hello ‘); // => ‘Hello White Rabbit‘ 8 concatName.apply(rabbit, [‘Bye ‘]); // => ‘Bye White Rabbit‘
当一个函数应该在特定的上下文中执行时，隐式调用就非常有用。例如为了解决方法调用时，this总是window或strict模式下的undefined的上下文问题(见2.3.)。隐式调用可以用于模拟在一个对象上调用某个方法（见之前的代码样例）。
另一个实际的例子是在ES5中，在创建的类的结构层次中中，调用父类的构造函数：
1 function Runner(name) { 2 console.log(this instanceof Rabbit); // => true 3 this.name = name; 4 } 5 function Rabbit(name, countLegs) { 6 console.log(this instanceof Rabbit); // => true 7 // Indirect invocation. Call parent constructor. 8 Runner.call(this, name); 9 this.countLegs = countLegs; 10 } 11 var myRabbit = new Rabbit(‘White Rabbit‘, 4); 12 myRabbit; // { name: ‘White Rabbit‘, countLegs: 4 }
Rabbit中的Runner.call(this, name)隐式调用了父类的函数来初始化这个对象。
绑定函数是一个与对象绑定的函数。通常它是通过在原函数上使用 .bind()来创建的。原函数和绑定的函数共享代码跟作用域，但是在执行时有不同的上下文。
方法.bind(thisArg[, arg1[, arg2[, ...]]])接受第一个参数thisArg作为绑定函数执行时的上下文，并且它接受一组可选的参数arg1, arg2, ...作为被调用函数的参数。它返回一个绑定了thisArg的新函数。
下面的代码创建了一个绑定函数并在之后调用它：
1 function multiply(number) { 2 ‘use strict‘; 3 return this * number; 4 } 5 // create a bound function with context 6 var double = multiply.bind(2); 7 // invoke the bound function 8 double(3); // => 6 9 double(10); // => 20
multiply.bind(2)返回了一个新的函数对象double，double绑定了数字2。multiply跟double有相同的代码跟作用域。
跟.apply()以及.call()方法(见5.)马上调用函数不同，.bind()函数返回一个新的方法，它应该在之后被调用，只是this已经被提前设置好了。
this在调用绑定函数时，
this是.bind()的第一个参数。
.bind()的作用是创建一个新的函数，它在被调用时的上下文是传入.bind()的第一个参数。它是一种非常强大的技巧，使你可以创建一个定义了this值的函数。
让我们来看看如何在一个绑定函数中设置this：
1 var numbers = { 2 array: [3, 5, 10], 3 getNumbers: function() { 4 return this.array; 5 } 6 }; 7 // Create a bound function 8 var boundGetNumbers = numbers.getNumbers.bind(numbers); 9 boundGetNumbers(); // => [3, 5, 10] 10 // Extract method from object 11 var simpleGetNumbers = numbers.getNumbers; 12 simpleGetNumbers(); // => undefined or throws an error in strict mode
numbers.getNumbers.bind(numbers)返回了一个绑定了number对象的boundGetNumbers函数。boundGetNumbers()调用时的this是number对象，并能够返回正确的数组对象。numbers.getNumbers函数能在不绑定的情况下赋值给变量simpleGetNumbers。在之后的函数调用中，simpleGetNumbers()的this是window或者strict模式下的undefined，不是number对象(见3.2. 陷阱)。在这个情况下，simpleGetNumbers()不会正确返回数组。
.bind()永久性地建立了一个上下文的链接，并且会一直保持它。一个绑定函数不能通过.call()或者.apply()来改变它的上下文，甚至是再次绑定也不会有什么作用。 只有用绑定函数的构造函数调用方法能够改变上下文，但并不推荐这个方法（因为构造函数调用用的是常规函数而不是绑定函数）。 下面的例子声明了一个绑定函数，接着试图改变它预先定义好的上下文：
1 function getThis() { 2 ‘use strict‘; 3 return this; 4 } 5 var one = getThis.bind(1); 6 // Bound function invocation 7 one(); // => 1 8 // Use bound function with .apply() and .call() 9 one.call(2); // => 1 10 one.apply(2); // => 1 11 // Bind again 12 one.bind(2)(); // => 1 13 // Call the bound function as a constructor 14 new one(); // => Object
只有new one()改变了绑定函数的上下文，其他方式的调用中this总是等于1。
箭头函数被设计来以更简短的形式定义函数。并且能从词法上绑定上下文。它能以下面的方式被使用：
1 var hello = (name) => { 2 return ‘Hello ‘ + name; 3 }; 4 hello(‘World‘); // => ‘Hello World‘ 5 // Keep only even numbers 6 [1, 2, 5, 6].filter(item => item % 2 === 0); // => [2, 6]
箭头函数带来了更轻量的语法，避免了冗长的function关键词。你甚至可以在函数只有一个语句的时候省略return。
因为箭头函数是匿名的，这意味着它的name属性是个空字符串‘‘。这样一来，它就没有一个词法上的函数名（函数名在递归跟事件解绑时会比较有用）。同时，跟常规函数相反，它也不提供arguments对象。但是，这在ES6中通过rest parameters修复了：
1 var sumArguments = (...args) => { 2 console.log(typeof arguments); // => ‘undefined‘ 3 return args.reduce((result, item) => result + item); 4 }; 5 sumArguments.name // => ‘‘ 6 sumArguments(5, 5, 6); // => 16
this
this是箭头函数定义时封装好的上下文
箭头函数并不会创建它自己的上下文，它从它定义处的外部函数获得this上下文。下面的例子说明了这个上下文透明的特性：
1 class Point { 2 constructor(x, y) { 3 this.x = x; 4 this.y = y; 5 } 6 log() { 7 console.log(this === myPoint); // => true 8 setTimeout(()=> { 9 console.log(this === myPoint); // => true 10 console.log(this.x + ‘:‘ + this.y); // => ‘95:165‘ 11 }, 1000); 12 } 13 } 14 var myPoint = new Point(95, 165); 15 myPoint.log();
setTimeout在调用箭头函数时跟log()使用了相同的上下文(myPoint对象)。正如所见，箭头函数从它定义处“继承”了函数的上下文。 如果在这个例子里尝试用常规函数，它会建立自己的上下文(window或strict模式下的undefined)。所以，为了让同样的代码能在函数表达式中正确运行，需要手动绑定上下文：setTimeout(function() {...}.bind(this))。这样一来就显得很啰嗦，不如用箭头函数来得简短。
如果箭头函数定义在最上层的作用域（在所有函数之外），那么上下文就总是全局对象（浏览器中的window对象）：
1 var getContext = () => { 2 console.log(this === window); // => true 3 return this; 4 }; 5 console.log(getContext() === window); // => true
箭头函数会一劳永逸地绑定词法作用域。即使使用修改上下文的方法，this也不能被改变：
1 var numbers = [1, 2]; 2 (function() { 3 var get = () => { 4 console.log(this === numbers); // => true 5 return this; 6 }; 7 console.log(this === numbers); // => true 8 get(); // => [1, 2] 9 // Use arrow function with .apply() and .call() 10 get.call([0]); // => [1, 2] 11 get.apply([0]); // => [1, 2] 12 // Bind 13 get.bind([0])(); // => [1, 2] 14 }).call(numbers);
一个函数表达式通过.call(numbers)被隐式调用了，这使得这个调用的this变成了numbers。这样一来，箭头函数get的this也变成了numbers，因为它是从词法上获得的上下文。
无论get是怎么被调用的，它一直保持了一开始的上下文numbers。用其他上下文的隐式调用(通过.call()或.apply())或者重新绑定(通过.bind())都不会起作用
箭头函数不能用作构造函数。如果像构造函数一样调用new get()， JavaScript会抛出异常：TypeError: get is not a constructor。
你可能想用箭头函数在一个对象上定义方法。这很合情合理：箭头函数的定义相比于函数表达式短得多：例如(param) => {...}而不是function(param) {..}。
这个例子用箭头函数在Period类上定义了format()方法：
1 function Period (hours, minutes) { 2 this.hours = hours; 3 this.minutes = minutes; 4 } 5 Period.prototype.format = () => { 6 console.log(this === window); // => true 7 return this.hours + ‘ hours and ‘ + this.minutes + ‘ minutes‘; 8 }; 9 var walkPeriod = new Period(2, 30); 10 walkPeriod.format(); // => ‘undefined hours and undefined minutes‘
由于format是一个箭头函数，并且它定义在全局上下文（最顶层的作用域）中，它的this指向window对象。即使format作为方法在一个对象上被调用如walkPeriod.format()，window仍然是这次调用的上下文。之所以会这样是因为箭头函数有静态的上下文，并不会随着调用方式的改变而改变。
函数表达式可以解决这个问题，因为一个常规的函数会随着调用方法而改变其上下文:
1 function Period (hours, minutes) { 2 this.hours = hours; 3 this.minutes = minutes; 4 } 5 Period.prototype.format = function() { 6 console.log(this === walkPeriod); // => true 7 return this.hours + ‘ hours and ‘ + this.minutes + ‘ minutes‘; 8 }; 9 var walkPeriod = new Period(2, 30); 10 walkPeriod.format(); // => ‘2 hours and 30 minutes‘
walkPeriod.format()是一个对象上的方法调用(见3.1.)，它的上下文是walkPeriod对象。this.hours等于2，this.minutes等于30，所以这个方法返回了正确的结果：‘2 hours and 30 minutes‘。
因为函数调用对this有最大的影响，从现在起，不要再问你自己：
this是从哪里来的？
而要问自己：
函数是怎么
被调用的？
对于箭头函数，问问你自己：
在这个箭头函数被
定义的地方，this是什么？
这是处理this时的正确想法，它们可以让你免于头痛。
标签：
原文地址：http://www.cnblogs.com/tangyuchen/p/5801336.html
