Question

我正在学习有关javascript绑定的知识。我需要一些帮助。无法使用bind将原型函数与另一个函数连接。如果函数在类中，则可以使用。

示例：

let test = {};

test.gen = function () {
    console.log(this.gender);
}
test.age = function () {
    console.log(this.age);
}

class Human {
constructor(gender, age) {
    this.gender = gender;
    this.age = age;
}

printInfo() {
    console.log(this.gender);
}
printGender = test.gen.bind(this);
// printAge = test.age.bind(this); // this works
}

Human.prototype.printAge = test.age.bind(this); // gives me undefined


let human = new Human('male', 30);
human.printInfo();
human.printGender();
human.printAge();

Answer 1

@ noa-dev是正确的，因为this调用中的bind并不是您想要的。

您只需为原型提供功能即可正常工作：

Human.prototype.printAge = test.age

在test.age的函数定义中，它要求this.age。在这种情况下，this由函数调用的调用上下文定义。通过将test.age放置在Human的原型上，Human实例调用human.printAge()使其具有human作为调用上下文，因此this引用到函数中正确的内容。

如果直接将test.age放在实例上，则可以更明显地实现相同的行为：

let human = new Human('male', 30)
human.printAge = test.age
human.printAge() // 30

函数age当前位于test上的事实可能会引起麻烦，使您认为其中的this只能引用{{1 }}。事实并非如此。此代码段也有效，它反映了根据调用的上下文来查询test的行为：

this

Answer 2

想通了，我也可以在这里正确地编写它。

Human.prototype.printAge = test.age.bind(this); // gives me undefined

给您未定义的是，因为在javascript中，“ this”关键字始终引用下一个更大的包装函数范围。在您的情况下，很可能是窗口范围，而窗口却不知道类的内容。

为了实现所需的功能，可以将函数调用绑定到人类实例，如以下示例所示：

https://jsfiddle.net/v6ye2b0f/1/

class Human {
    constructor(age) {
    this.age = age || 0;
  }
}

const human = new Human(30);

console.log(human.age); // 30;

const ageLogger = function() {
    console.log(this.age);
}


Human.prototype.logAge = ageLogger.bind(human);
ageLogger.call(human); // 30
human.logAge(); // 30

原型函数并绑定到javascript中

2 个答案: