javascript - 面向对象的 JavaScript 编程

Question

在开始尝试学习 backbone.js 之前，我一直在尝试用 JavaScript 学习 OOP。

我希望能够进行数据绑定(bind)，但我似乎无法让它工作。

我刚刚制作了一个预算网站的简单原型(prototype)，您可以在其中输入预算并输入您花费了多少，它会显示您是否已经完成。

function BudgetItem(spent, budget){

    this.setSpent = function(spent){
        this.spent = spent;
    }
    this.setBudget = function(budget){
        this.budget = budget;
    }
    this.getSpent = function(){
        return this.spent;
    }
    this.getBudget = function(){
        return this.budget;
    }

}

function BudgetType(type){
    this.getType = function(){
        return type;
    }
}

BudgetType.prototype = new BudgetItem();

$(document).ready(function(){

    var food = new BudgetType('food');

    $('.budget').html(food.getBudget());
    $('.editbudget').change(function(){
        food.setBudget($('.editbudget').data())
    });
})

到目前为止，这是我的代码。我不确定我是否做对了。我应该扩展东西吗？另外，有人可以解释如何在没有库的情况下动态绑定(bind)数据吗？

Answer 1

首先我会给你一些理论。 Javascript 函数是一个动态对象，就像 Object 一样，并且可以使用 new 关键字创建一个新实例，就像您在监听器中所做的那样。发生这种情况时，函数本身将作为构造函数运行，而 this 关键字将绑定(bind)到新创建的对象。你在上面所做的实际上是在你第一次传递它们的值时动态添加新属性......这很好，但对其他读者来说不是很清楚。

现在是棘手的部分。每个函数都有一个指向“隐藏”原型(prototype)对象的链接。这是一个由 JavaScript 运行时创建的匿名(无法通过名称访问)对象，并通过 prototype 属性作为对用户对象的引用传递。此 Prototype 对象还通过其 constructor 属性引用了该函数。要亲自测试我所说的内容，请尝试以下操作:

BudgetItem.prototype.constructor === BudgetItem // true

综上所述，您现在可以将函数视为(隐藏)类的构造函数，这些类是在幕后为您创建的，可通过函数的原型(prototype)属性访问。因此，您可以直接将字段添加到 Prototype 对象:

function BudgetItem(spent) { 
    this.spent = spent 
}           
BudgetItem.prototype.setSpent = function(spent) { this.spent = spent };
BudgetItem.prototype.getSpent = function() { return this.spent };

另一个问题是继承和传递参数给构造函数。同样，您的版本是有效的，但您在初始化 BudgetType 时失去了传递花费和预算值的能力。我会做的是忘记原型(prototype)然后去:

function BudgetType(type, spent) {
    var instance = new BudgetItem(spent);
    instance.type = type;
    return instance;
}

这与 Scott Sauyet 上面的建议很接近，但更强大。现在您可以传递两个参数(以及更多)并拥有更复杂的继承树。

最后，您可以做的是通过为其他自动变量(作为参数传递或在函数内部初始化的变量)提供 getter 来创建私有(private)(或伪私有(private)，更准确地说)属性。这是该语言的一个特殊功能，它的工作方式如下:

function BudgetType(type, spent) {
     var instance = new BudgetItem(spent);
     instance.getType = function() {
         return type;
     }
     return instance;
}

现在您可以访问通过 obj.getType() 在构造函数中传递的“类型”，但不能覆盖初始值。即使您定义了 obj.type = 'New Value' getType() 也会返回传递的初始参数，因为它引用了另一个上下文，该上下文是在初始化对象时创建的，并且由于关闭而从未被释放。

希望对您有所帮助...