闭包中的箭头功能

Question

为什么这样起作用：

var a = () => { 

    var print = function(i) { console.log(i); return this; }    
    var print2 = function(i) { console.log(i); return this; }

    return { print:print , print2:print2 }
}

a().print(5).print2(5);

这也有效：

var b = () => { 

    var print = (i) => { console.log(i); return this; }    
    return { print:print}
}
b().print('Arrow function works');

这不起作用：

var b = () => { 

    var print = (i) => { console.log(i); return this; }    
    var print2 = function(i) { console.log(i); return this; }

    return { print:print , print2:print2 }
}
b().print(5).print2(5);

https://jsfiddle.net/Imabot/1gt2kxfh/14/

Answer 1

在非箭头函数中，this的值取决于函数的调用方式。如果该函数被称为对象的成员，则this引用此对象：

someObj.myFunction() // inside myFunction this will point to someObj

相反，箭头功能不影响this。因此，在箭头函数中，this的值与封闭范围中的值相同。

Answer 2

全部归因于箭头功能的行为（docs）

逐步说明：

var b = () => { 
    // 1
    var print = (i) => { console.log(i); return this; }    
    var print2 = function(i) { console.log(i); return this; }

    return { print:print , print2:print2 }
}
const res = b()
// 2
const secondRes = res.print(5)
// 3
secondRes.print2(5);

1. 此处print函数从外部范围保存了this引用，因此无法再对其进行分配
2. 现在print函数未使用来自this变量的res引用，因为this已附加到上述print函数上]
3. 结果secondRes不会引用b函数返回的对象。但是它将使用打印功能附带的this参考。最后，因为secondRes没有print2属性-它抛出

希望对您有帮助<3

Answer 3

Lex82的答案给出了原因。我想返回函数，因此可以使用函数链接：

var b = () => { 

    var print = (i) => { console.log(i); return { print:print , print2:print2 }; }    
    var print2 = function(i) { console.log(i); return this; }

    return { print:print , print2:print2 }
}
b().print(5).print2(5);

Answer 4

因为不能同时使用箭头功能和常规功能

将您的代码更改为此代码：

var b = () => { 

  var print = (i) => { console.log(i); return this; }    
  var print2 = (i) => { console.log(i); return this; }

  return { print:print , print2:print2 }
}

b().print(5).print2(5);