面向对象的JavaScript编程

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

我希望能够数据绑定,但我似乎无法让它工作.

我刚刚制作了一个预算网站的简单原型,你可以把它放在一个预算中并输入你花了多少钱,它会显示你是否已经过去了.

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())
    });
})

到目前为止,这是我的代码.我不确定我做得对.我应该扩展一些东西吗？此外,有人可以解释如何动态数据绑定没有库吗？

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

现在是棘手的部分.每个函数都有一个指向“隐藏”Prototype对象的链接.这是一个由JavaScript运行时创建的匿名(不可通过名称访问)对象,并通过prototype属性作为对用户对象的引用传递.此Prototype对象还通过其构造函数属性引用该函数.要测试我自己说的话,请尝试以下方法：

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时您无法传递花费的预算值.我要做的是忘记原型并去：

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

这与Scott Sauyet上面提出的建议非常接近但更强大.现在,您可以传递两个参数(以及更多)并具有更复杂的继承树.

最后,你可以做的是通过为一个自动变量提供一个getter来创建私有(或伪私有,更准确)属性(一个作为参数传递或在函数内初始化).这是该语言的一个特殊功能,它的工作原理如下：

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

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

希望有帮助……