“this”在ES6的箭头函数中提到了什么？

我已经在几个地方读到了，关键的区别是“ this是箭头函数的词汇绑定”。 这一切都很好，但我实际上并不知道这意味着什么。

我知道这意味着它在定义函数体的大括号的范围内是唯一的，但我实际上不能告诉你下面的代码的输出，因为我不知道this是指什么，除非它指的是胖箭头function本身….这似乎并不有用。

 var testFunction = () => { console.log(this) }; testFunction(); 

Answer 1

Arrow函数捕获封闭上下文的this值

 function Person(){ this.age = 0; setInterval(() => { this.age++; // |this| properly refers to the person object }, 1000); } var p = new Person(); 

所以，为了直接回答你的问题，在你的箭头函数里面this值和在箭头函数被赋值之前的值是一样的。

Answer 2

为了提供大局，我将解释dynamic和词汇绑定。

dynamic名称绑定

this是指调用该方法的对象。 这是一个经常在SO上读的句子。 但它仍然只是一个短语，非常抽象。 这句话有没有相应的代码模式？

就在这里：

 const o = { m() { console.log(this) } } // the important patterns: applying methods om(); // logs o o["m"](); // logs o 

m是一种方法，因为它依赖this 。 om()或o["m"]()表示m应用于o 。 这些模式是我们着名的短语的Javascript翻译。

还有一个重要的代码模式，你应该注意：

 "use strict"; const o = { m() { console.log(this) } } // m is passed to f as a callback function f(m) { m() } // another important pattern: passing methods f(om); // logs undefined f(o["m"]); // logs undefined 

与以前的模式非常相似，只有括号丢失。 但是后果是相当可观的：当你将m传递给函数f ，你可以把m的对象/上下文o拉出来。 现在它被连根拔起， this是无关紧要的（假定有严格的模式）。

词法（或静态）名称绑定

箭头函数没有自己的this / super / arguments绑定。 他们从父母的词汇范围inheritance他们：

 const toString = Object.prototype.toString; const o = { foo: () => console.log("window", toString.call(this)), bar() { const baz = () => console.log("o", toString.call(this)); baz(); } } o.foo() // logs window [object Window] o.bar() // logs o [object Object] 

Answer 3

箭头函数指向Es6中的父项，意味着它不像ES5中的匿名函数那样

这是非常有用的方法，以避免分配variables自我这是在ES5中广泛使用…

看看下面的例子，在一个对象中分配一个函数：

 var checkThis = { normalFunction: function () { console.log(this); }, arrowFunction: () => console.log(this) }; checkThis.normalFunction(); //Object {} checkThis.arrowFunction(); //Window {external: Object, chrome: Object, document: document, tmpDebug: "", j: 0…} 

Answer 4

希望这个代码展示可以给你更清晰的想法。 基本上，箭头函数中的“this”是“this”的当前上下文版本。 看代码：

 // 'this' in normal function & arrow function var this1 = { number: 123, logFunction: function () { console.log(this); }, logArrow: () => console.log(this) }; this1.logFunction(); // Object { number: 123} this1.logArrow(); // Window 

Answer 5

你可以尝试按照下面的方式了解它

 // whatever here it is, function or fat arrow or literally object declare // in short, a pair of curly braces should be appeared here, eg: function f() { // the 'this' here is the 'this' in fat arrow function below, they are // bind together right here // if 'this' is meaningful here, eg. this === awesomeObject is true console.log(this) // [object awesomeObject] let a = (...param) => { // 'this is meaningful here too. console.log(this) // [object awesomeObject] } 

所以这个在胖箭头函数中没有绑定，这意味着你不能在这里绑定到'this'，.apply不会，.call不会，.bind不会。 当您在文本编辑器中写下代码文本时，“胖”箭头函数中的“this”被绑定 。 胖箭头function中的“这个”在这里是有意义的。 你的代码在文本编辑器中写的是你的应用程序在repl中运行的内容。 除非你在文本编辑器中改变这个东西，否则这个在“胖子”中绑定的东西永远不会改变 。 对不起我的泳池英语…