带有硬绑定的Javascript新特性

Question

我有以下代码片段

​

function foo(a) {
    this.a = a;
}

var obj = {a: 77};

var bar = function() {
    return foo.apply( obj, arguments );
};

var o = new bar( 2 );

console.log( o.a ); // I think it's 2(why is it undefined?)
console.log(obj.a); // obj.a changed to 2, got it.

​

为什么o.a未定义？另外，如果我删除了bar中的return关键字，它仍然是一样的。

​

function foo(a) {
    this.a = a;
}

var obj = {a: 77};

var bar = function() {
    foo.apply( obj, arguments );
};

var o = new bar( 2 );

console.log( o.a ); // I think it's 2(why is it undefined?)
console.log(obj.a); // obj.a changed to 2, got it.

​

问题是当硬绑定和新绑定同时发生时，实际上会发生什么情况

Answer 1

使用new将创建一个新对象，并将该对象作为this分配给调用它的函数。在本例中，您没有使用新对象，而是调用了一个将obj设置为this的函数。

至于为什么添加和删除return不会有任何改变，是因为在这两种情况下，您都会返回undefined。当使用new调用函数并返回undefined (也称为默认返回值)时，它将返回由new生成的新对象。

引用MDN

构造函数返回的对象成为整个新表达式的结果。如果构造函数没有显式返回对象，则使用在步骤1中创建的对象。(通常构造函数不返回值，但如果它们想覆盖正常的对象创建过程，则可以选择返回值。)

因此，您创建了一个新对象，但操作了一个旧对象。您的代码实际上是这样工作的。

​

function foo(a) {
    this.a = a;
}

var obj = {a: 77};

var bar = function() {
    return foo.apply( obj, arguments );
};

var o = {}; // Originally you used `new` to create a new object
bar(2); // Since `bar` doesn't use `this`, it's the same as if it were called by itself

console.log(o.a); // Empty object
console.log(obj.a); // Modified by `bar`

​

Answer 2

您必须从foo(a)返回this，如下所示：

​

function foo(a) {
    this.a = a;
    // "this" NEEDS TO BE RETURNED, OTHERWISE (bar)'s 
    // VALUE WILL BE UNDEFINED, THUS o.a WILL BE UNDEFINED
    return this; 
}

var obj = {a: 77};

var bar = function() {
    // MAKE SURE THIS IS RETURNED AS WELL
    return foo.apply( obj, arguments );
};

var o = new bar( 2 );

console.log( o.a ); // I think it's 2(why is it undefined?)
console.log(obj.a); // obj.a changed to 2, got it.

​

问题是当硬绑定和新绑定同时发生时，实际上会发生什么

在本例中什么都没有，因为当new bar( 2 )的新实例返回值依赖于foo(a)，而foo(a)依赖于单例(obj)时，它是无用的。

我希望这对你有帮助！