javascript - 如何传递原型(prototype)函数？

Question

我是 javascript 的新手，我需要一些帮助。我试图通过函数求和半径，但出现未定义的错误:(

function sumWithFunction(func, number) {
    return func() + number;
}

function Circle(X, Y, R) {
    this.x = X;
    this.y = Y;
    this.r = R;
}
Circle.prototype.getRadius = function () {
    return this.r;
}
Circle.prototype.increaseRadiusBy = function(number) {
    this.r = sumWithFunction(this.getRadius, number);
}

function addFivetoIt(func) {
    func(5);
}

var MyCircle = new Circle(0, 0, 10);
addFivetoIt(MyCircle.increaseRadiusBy);

Answer 1

问题是您将一个函数传递给另一个函数的引用，因此传递的函数失去了作用域!这是有问题的行:

Circle.prototype.increaseRadiusBy = function(number) {
    this.r = sumWithFunction(this.getRadius, number);
}

JavaScript 对象在某些方面比它们看起来更简单。当您添加 getRadius Circle 的方法原型(prototype)，您没有像在经典 OO 中那样定义类方法。您只是简单地定义原型(prototype)的命名属性，然后将函数分配给该属性的值。当你通过 this.getRadius作为静态函数的参数，例如 sumWithFunction , this 的上下文丢失了。它与 this 一起执行关键字绑定(bind)到 window , 自 window没有 r属性，浏览器会抛出一个未定义的错误。

换句话说，语句this.getRadius()实际上是在说“执行分配给 getRadius 的 this 属性的函数，并在 this 的上下文中执行它。没有通过该语句显式调用函数，上下文未分配。

一个常见的解决方案是为任何接收另一个函数的函数添加一个预期的参数，用于上下文。

function sumWithFunction(func, context, number) {
    return func.apply(context) + number;
}

function Circle(X, Y, R) {
    this.x = X;
    this.y = Y;
    this.r = R;
}
Circle.prototype.getRadius = function () {
    return this.r;
}
Circle.prototype.increaseRadiusBy = function(number) {
    this.r = sumWithFunction(this.getRadius, this, number);
}

function addFivetoIt(func, context) {
    func.apply(context,[5]);
}

var MyCircle = new Circle(0, 0, 10);
addFivetoIt(MyCircle.increaseRadiusBy, myCircle);

一个更简单但不太健壮的解决方案是声明一个内联函数，该函数可以访问本地闭包中的上下文引用。

function sumWithFunction(func, number) {
    return func() + number;
}

function Circle(X, Y, R) {
    this.x = X;
    this.y = Y;
    this.r = R;
}
Circle.prototype.getRadius = function () {
    return this.r;
}
Circle.prototype.increaseRadiusBy = function(number) {
    var me = this;
    this.r = sumWithFunction(function() {
        return me.getRadius()
    }, number);
}

function addFivetoIt(func) {
    func(5);
}

var MyCircle = new Circle(0, 0, 10);
addFivetoIt(function(number) {
    return MyCircle.increaseRadiusBy(number);
});

但到目前为止，最简单的解决方案是使用 ECMAScript 的一个新功能，一个名为 bind 的函数方法. It is explained well here ，包括并非所有浏览器都支持它的事实。这就是为什么很多库，如 jQuery、Prototype 等，都有跨浏览器功能绑定(bind)实用方法，如 $.proxy 。 .

function sumWithFunction(func, number) {
    return func() + number;
}

function Circle(X, Y, R) {
    this.x = X;
    this.y = Y;
    this.r = R;
}
Circle.prototype.getRadius = function () {
    return this.r;
}
Circle.prototype.increaseRadiusBy = function(number) {
    this.r = sumWithFunction(this.getRadius.bind(this), number); // or $.proxy(this.getRadius,this)
}

function addFivetoIt(func) {
    func(5);
}

var MyCircle = new Circle(0, 0, 10);
addFivetoIt(MyCircle.increaseRadiusBy.bind(MyCircle)); // or $.proxy(MyCircle.increaseRadiusBy,MyCircle)