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

Question

我读过几处主要的区别是“this在箭头函数中是词法绑定的。”这一切都很好，但我实际上并不知道这意味着什么。

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

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

Answer 1

Arrow functions capture the this value of the enclosing context

function Person(){ 
    this.age = 0; 

    setInterval(() => { 
    this.age++; // |this| properly refers to the person object 
    }, 1000); 
} 

var p = new Person(); 

因此，要直接回答你的问题，你this箭头函数中也有同样的价值，因为它没有正确的分配箭头功能之前。

Answer 2

希望此代码显示可以给你更清晰的想法。基本上，箭头函数中的'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 3

为了提供大局，我将解释动态和词法绑定。

动态名称绑定

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

是的，有：

const o = { 
    m() { console.log(this) } 
} 

// the important patterns: applying methods 

o.m(); // logs o 
o["m"](); // logs o 

m是一种方法，因为它依赖于this。 o.m()或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(o.m); // logs undefined 
f(o["m"]); // logs undefined 

它非常类似于以前的模式，只有括号丢失。但后果是相当可观的：当您将m传递给功能f时，您将其对象/上下文o拉出m。现在连根拔起，this指什么都没有（假定是严格模式）。

词汇（或静态）名称绑定

箭函数没有自己的this/super/arguments结合。他们继承了他们从父词汇范围：

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]

除了全球范围内（Window在浏览器）函数只有能够形成在Javascript（和ES2015 {}块）一个范围。当o.foo箭头函数被调用时，没有周边函数可以从中继承其this。因此它捕获绑定到Window对象的全局作用域的this绑定。

当baz由o.bar调用，箭头功能由o.bar包围（o.bar形成它的父词法范围），并且可以继承o.bar的this结合。 o.bar被调用o，因此其this绑定到o。

Answer 4

您可以尝试按以下

// 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] 
} 

这样的方式去了解它“这”脂肪箭头功能没有绑定，意味着你不能做任何事情结合“这”在这里，赢得。适用't，.call不会，.bind不会。 当您在文本编辑器中记下代码文本时，“胖”箭头函数中的“this”被绑定。胖箭头功能中的'this'在这里是有意义的。你的代码在文本编辑器中写的是你的应用程序在repl中运行的内容。 除非你在文本编辑器中改变它，否则这个在fat arror中绑定的东西永远不会改变。 对不起，我的英语池...

Answer 5

Arrow功能this指向在ES6周围的家长，意味着它不支持的范围，想在ES5匿名函数...

这是为了避免分配非常有用的方式变种自该被广泛应用在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…}