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

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

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

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

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

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

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

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

dynamic名称绑定

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

就在这里:

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

m是一种方法,因为它依赖thisom()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] 

箭头函数指向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…} 

希望这个代码展示可以给你更清晰的想法。 基本上,箭头函数中的“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 

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

 // 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中运行的内容。 除非你在文本编辑器中改变这个东西,否则这个在“胖子”中绑定的东西永远不会改变 。 对不起我的泳池英语…