Question

我正在关注来自此link的ES6上的说明，并创建了一个小代码片段。

class Bar{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
}
let bar = new Bar(12,10);
Bar.prototype.foo =function(){
    return this.x + this.y;
}
bar.foo() // 22 correct

我很高兴，直到我这样做。

let baz = bar.foo
baz(); // NaN

为什么baz（）正在打印 NaN ？

Answer 1

您从对象中获取了单独的函数，但您错过了this。为了实现这一目标，您需要bind该功能的对象。

＆＃13;

3.7.7

＆＃13;

Answer 2

当你影响bar.foo到baz时，函数会丢失它的上下文（this）。所以不再是this.x和this.y.检查断点，您将看到两者都未定义。

因此，将两个undefined加在一起会产生NaN。

请尝试使用此功能检查浏览器：

class Bar{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
}
let bar = new Bar(12,10);
Bar.prototype.foo =function(){
    debugger;
    return this.x + this.y;
}

尝试通过定义其上下文来调用它。 3种方法：

let baz = bar.foo.bind(bar);
baz();

bar.foo.call(bar);

bar.foo.apply(bar);

返回NAN的Javascript原型函数

2 个答案: