“这个”让您陷入困境?

我们都去过那里。 您创建了一个宏伟的函数,然后尝试运行它,并发现“ this.X”未定义。 太好了。出什么事了? 我们失去了种约束力。 更糟糕的是,在ES6中,您语法上漂亮的箭头功能可能会导致您的绑定松散,而无需担心。 让我们分解一下,好吗?

  var foo = {};  //创建方法的方法foo.method = function(name,cb){this [name] = cb;}; 

上面只是一个用于创建方法的方法。 现在,让我们创建一个

  foo.method(“ bar”,function(){console.log(“ test”);} foo.bar(); 
// =>“测试”

该函数在foo上创建方法栏,该方法仅在控制台上记录一个“测试”字符串。在尝试将其与箭头函数一起使用(如以下示例)之前,没有什么太令人沮丧的

  this.test =“附加到模块上”; var foo = { 
测试:“附加到对象”
};
//创建方法的方法
foo.method = function(name,cb){
this [name] = cb;
};
//使用箭头函数并获取
//“ this”的词法分析
foo.method(“ bar”,()=> {
//不是您所期望的,也许?
console.log(this.test);
});
foo.bar();
// =>“附加到模块”

我希望下面的代码产生“附加到对象”,但是,它将查看全局“ this.test”值并获取该值。 嗯,为什么会这样呢?

ES6箭头函数使用词法作用域来查找“ this”的值。 这基本上意味着它使用周围代码中的“ this”。包含所涉及代码的代码。

上面的代码中没有围绕foo.method(“ bar”,()=> {…})的代码

因此,它寻找全局模块。

如果将第16行的arrow函数更改为老式的语法函数,例如

  foo.method(“ bar”,function(){ 

console.log(this.test);
});
// =>“附加到对象”

可能更多的是您在一开始对箭头功能的期望。

现在,对我来说,这是最令人沮丧的部分。.您不能通过绑定更改箭头功能“ this”。

  this.test =“附加到模块”; 
var foo = {
测试:“附加到对象”
};
foo.method = function(name,cb){

//在方法上绑定“ this”的值
//尝试将其强制为您想要的
this [name] = cb.bind(this);

};
foo.method(“ bar”,()=> {
console.log(this.test);
});
foo.bar();
// =>“附加到模块”

再次!

无论您做什么,都将相同的规则应用于箭头功能“ this”。 请注意这种情况,因为它可能导致许多麻烦。

总而言之,请小心使用此功能的箭头功能,以免陷入困境。 编码愉快!