使用原型与直接在构造函数中定义方法的优点?

IT技术 javascript oop prototype
2021-01-26 23:13:38

我想知道使用这些中的任何一个是否有任何优势,我应该走哪条路?

构造方法:

var Class = function () {

    this.calc = function (a, b) {
        return a + b;
    };

};

原型方法:

var Class = function () {};

Class.prototype.calc = function (a, b) {
    return a + b;
};

我不喜欢那样,使用原型,方法定义与类分开,我不知道是否有任何特定原因我应该在第一种方法上使用它。

此外,使用函数文字来定义“类”是否有任何好处,而不仅仅是函数定义:

var Class = function () {};

对比

function Class () {};

谢谢!

3个回答

通过原型链继承的方法可以对所有实例进行通用更改,例如:

function Class () {}
Class.prototype.calc = function (a, b) {
    return a + b;
}

// Create 2 instances:
var ins1 = new Class(),
    ins2 = new Class();

// Test the calc method:
console.log(ins1.calc(1,1), ins2.calc(1,1));
// -> 2, 2

// Change the prototype method
Class.prototype.calc = function () {
    var args = Array.prototype.slice.apply(arguments),
        res = 0, c;

    while (c = args.shift())
        res += c;

    return res; 
}

// Test the calc method:
console.log(ins1.calc(1,1,1), ins2.calc(1,1,1));
// -> 3, 3

请注意如何更改应用于两个实例的方法?这是因为ins1ins2共享相同的calc()功能。为了使用在构造期间创建的公共方法来执行此操作,您必须将新方法分配给已创建的每个实例,这是一项笨拙的任务。这是因为ins1并且ins2会有自己的、单独创建的calc()函数。

在构造函数中创建方法的另一个副作用是性能较差。每次构造函数运行时都必须创建每个方法。原型链上的方法创建一次,然后由每个实例“继承”。另一方面,公共方法可以访问“私有”变量,这是继承方法无法实现的。

至于你的function Class() {}vsvar Class = function () {}问题,前者在执行前被“提升”到当前范围的顶部。对于后者,会提升变量声明,但不会提升赋值。例如:

// Error, fn is called before the function is assigned!
fn();
var fn = function () { alert("test!"); } 

// Works as expected: the fn2 declaration is hoisted above the call
fn2();
function fn2() { alert("test!"); }
啊,这让事情变得更清晰了 :) 我没有意识到效率差异 - 知道这一点非常有用。提升效果也是如此——确实很棘手。谢谢你这么好的回答,我从中学到了很多!
2021-03-11 23:13:38
这部分代码在做什么: Class.prototype.calc = function () { var args = Array.prototype.slice.apply(arguments), res = 0, c;
2021-03-12 23:13:38
很老的问题,但不知何故跟随一个链接并在这里偶然发现 - 我认为如果您保持参数数量一致(只是为了证明它正在使用a+b. 这确实是一个小点,但它有助于读者确定您关注的差异,并排除他可能正在阅读的其他因素(例如:如果您确实有第三个参数,在第一次调用中会发生什么)。这个例子很简单,希望程序员是好的足以避免被细微的差异所困扰。
2021-03-23 23:13:38
由于一段时间过去了,我们现在有了 ES6+,我想指出箭头函数定义是简写,var Class = function() {...}因此也没有被提升。
2021-03-25 23:13:38
当然,使用 Functional 模式也可以实现同样的效果,从而避免模仿经典语言的继承模式。
2021-04-01 23:13:38

原型方法的优点是效率。calc()所有Class对象之间共享一个函数对象(我的意思是通过调用Class构造函数创建的对象)。另一种方式(在构造函数中分配方法)为每个Class对象创建一个新的函数对象,在调用Class构造函数时使用更多内存并花费更多处理时间但是,这种方法确实有一个优点:该calc()方法可以访问构造函数中的局部变量,您可以利用它:

function Class() {
    var calcCallCount = 0;

    this.calc = function (a, b) {
        ++calcCallCount;
        alert("Calc called " + calcCallCount + " times");
        return a + b;
    };
};

关于var Class = function() {...}vs function Class() {...},我通常更喜欢后者,因为这意味着函数有一个名称,这在调试时很有用。另一个区别是后一个版本(函数声明)是提升的,这意味着它在定义它的范围内的任何地方都可用,而不仅仅是在定义之后。然而,有些人更喜欢在任何地方使用前者(函数表达式)。

进行了 js Perf 测试以可视化性能差异。jsperf.com/class-comparison
2021-03-12 23:13:38
@DaveVoyles:或者确实是这篇文章:stackoverflow.com/questions/9772307/...
2021-03-12 23:13:38
也感谢您的回答,蒂姆,我很感激!
2021-03-16 23:13:38
Re Class = function() {...},即在全局/窗口范围内定义,我在名称方面没有使用这种方法进行任何调试问题,尽管可以理解的是,似乎没有发生提升。不确定这种方法与您的两种方法之间是否存在任何其他差异。
2021-03-28 23:13:38
@NickWiggill:自从我写下这个答案以来,内置的浏览器开发人员工具已经取得了长足的进步,现在它们在从上下文中推断出适当的函数名称方面做得更好,所以我同意调试的难易程度要小得多这些日子。
2021-04-09 23:13:38
var YourClass = function(){
  var privateField = "somevalue";
  this.publicField = "somevalue";
  this.instanceMethod1 = function(){
     //you may access both private and public field from here:
     //in order to access public field, you must use "this":
     alert(privateField + "; " + this.publicField);
  };
}

YourClass.prototype.instanceMethod2 = function(){
  //you may access only public field 2 from this method, but not private fields:
  alert(this.publicField);
  //error: drawaback of prototype methods:
  alert(privateField);  
};

原型方法的优点:

  1. 当您通过原型定义方法时,它们在所有 YourClass 实例之间共享。因此,如果您在构造函数中定义方法,则此类实例的总大小小于;有一些测试表明通过原型定义方法如何减少 html 页面的总大小,从而降低其加载速度。

  2. 通过原型定义的方法的另一个优点是,当您使用继承类时,您可以覆盖这些方法,并且在派生类的覆盖方法中,您可以调用具有相同名称的基类方法,但使用在构造函数中定义的方法,你不能做这个。

你好,你说的继承类是什么意思?我不认为这是正确的术语,因为 javascript 没有类的概念.. 当你说派生类的重写方法时,你的意思是另一个对象,它的原型是你的对象?我迷路了..你能编辑或解释一下吗?
2021-03-14 23:13:38
Alexandr 你能用一个例子来解释 #2 吗?
2021-03-14 23:13:38
感谢您的回答,我很感激,现在更加意识到 StackOverflow 是一个多么棒的资源。
2021-03-27 23:13:38