自定义类 - 这与原型?

时间:2012-05-17 13:22:59

标签: javascript oop prototype

  

可能重复:
  Advantages of using prototype, vs defining methods straight in the constructor?

在JavaScript中创建自定义类和公共方法时的最佳做法是什么,更重要的是......为什么?

使用'this'创建公共方法?

var myClass = function() {

    this.myVar = "this is my value";

    this.myFunc = function() {
        alert( this.myVar );
    };

    this.myFunc();
};

-OR- 使用'prototype'创建公共方法?

var myClass = function() {

    this.myFunc();
};

myClass.prototype = {

    myVar: "this is my value",

    myFunc: function() {
        alert( this.myVar );
    }

};

非常感谢!!!

1 个答案:

答案 0 :(得分:0)

使用prototype声明一个方法意味着该方法可以随时用于该原型的实例,只要该方法在声明方法之后创建即可。

使用this.foo = function(){ ... }在构造函数中声明它意味着该方法仅在声明它的构造函数中的点之后可用。

作为一个简单的例子,我们来看看命名和匿名函数。

在下面,我们声明一个命名函数并调用它两次。请注意,即使第一次调用在函数声明之前,函数也会在第一次调用时正常执行:

foo();

function foo()
{
    alert("foo");
}

foo();

现在,我们将使用存储在变量中的匿名函数来代替命名函数:现在请注意,第一次调用会导致错误,因为此时foo未定义。

foo();

var foo = function()
{
    alert("foo");
}

foo();

原型以(概念上)类似的方式工作,当我们更改函数的原型时,我们在创建该函数的实例之前影响它。所以以下工作正常:

function f ()
{
    this.bar();
}

f.prototype.bar = function()
{
    alert("bar");
};

var f1 = new f();

请注意f.prototype.bar是在我们调用它的行之后进行物理声明的。现在将其与this. ...方法进行比较。以下按预期工作

function g()
{
    this.h = function(){
        alert("h");
    };

    this.h();
}

var g1 = new g();

虽然这不是因为我们在为其分配值之前尝试拨打this.h

function g()
{
    this.h();

    this.h = function(){
        alert("h");
    };
}

var g2 = new g();

请注意,虽然影响函数原型仍然使用将匿名函数分配给原型属性的机制。这意味着即使使用原型方法,如果我们在向原型添加函数之前实例化原型实例,我们也会遇到错误。例如,以下工作正常:

function f ()
{
    this.bar();
}

f.prototype.bar = function()
{
    alert("bar");
};

var f1 = new f();

但如果我们将var f1 = new f();移到作业f.prototype.bar以上,我们会收到错误:

function f ()
{
    this.bar();
}

var f1 = new f();

f.prototype.bar = function()
{
    alert("bar");
};