在构造函数与原型中声明javascript对象方法[重复]

Posted 2023-02-23

【中文标题】在构造函数与原型中声明javascript对象方法[重复]

【英文标题】：Declaring javascript object method in constructor function vs. in prototype [duplicate]

【发布时间】：2012-04-04 01:32:54

【问题描述】：

在创建 javascript 对象时，我可以在构造函数或原型中放置方法声明。例如，假设我想要一个具有 Name 属性和 Bark 方法的 Dog 类。我可以把 Bark 方法的声明放到构造函数中：

var Dog = function(name) 
    this.Name = name;
    this.Bark = function() 
        alert(this.Name + " bark");
    ;

或者我可以将其作为原型对象的方法放入：

var Dog = function(name) 
    this.Name = name;


Dog.prototype.Bark = function() 
    alert(this.Name + " bark");
;

当我实例化 Dog 类型的对象时，这两种方法似乎都可以正常工作：

var dog = new Dog("Fido");
dog.Bark();  //Both approaches show "Fido bark"

我应该更喜欢其中一种方法而不是另一种吗？使用其中一个有什么优势吗？在幕后，这两种方法最终会做完全相同的事情吗？大多数人倾向于哪种方法？

感谢您的帮助。

【问题讨论】：

… 和 Use of 'prototype' vs. 'this' in Javascript? 等人

【参考方案1】：

对于您给出的示例，您应该使用原型方法。一般来说，这取决于。第一种方法（在构造函数中初始化方法）的主要优点是您可以通过在方法中使用构造函数中定义的局部变量来利用闭包。这些变量不能在构造函数之外直接访问，因此实际上是“私有的”，这意味着您的 API 比将这些变量定义为对象的属性时更干净。一些一般的经验法则：

如果您的方法不使用构造函数中定义的局部变量（您的示例没有），则使用原型方法。 如果您要创建大量Dogs，请使用原型方法。这样，所有“实例”（即Dog构造函数创建的对象）将共享一组函数，而构造函数方式，每次调用Dog构造函数时都会创建一组新函数，使用更多内存. 如果您正在创建少量Dogs 并发现在构造函数中使用本地“私有”变量可以改进您的代码，这可能是更好的方法。如果性能或内存消耗是主要问题，请使用您的判断并进行一些基准测试。

可以使用混合方法，在构造函数中只定义需要访问本地私有构造函数变量的方法，而将其他方法分配给原型。

例如，下面的代码在构造函数中使用了一个局部变量来跟踪这只狗吠叫的次数，同时保持实际数字私有，因此与吠叫相关的方法是在构造函数中定义的。摇尾不需要访问树皮的数量，因此可以在原型上定义该方法。

var Dog = function(name) 
    this.name = name;

    var barkCount = 0;

    this.bark = function() 
        barkCount++;
        alert(this.name + " bark");
    ;

    this.getBarkCount = function() 
        alert(this.name + " has barked " + barkCount + " times");
    ;
;

Dog.prototype.wagTail = function() 
    alert(this.name + " wagging tail");
;

var dog = new Dog("Dave");
dog.bark();
dog.bark();
dog.getBarkCount();
dog.wagTail();

【讨论】：

@Tim Down 只是为了让我对答案很清楚，您是说如果混合使用局部变量，则在构造函数中使用方法是一件好事，因为它加快了对它们的访问时间，对?

@SethenMaleno：我并没有真正考虑访问变量的速度，这通常不应该是主要考虑因素。我赞成在构造函数中创建方法的主要论点是，它使这些变量保持私有，而不是必须在对象上定义最好是不可访问的属性。

JavaScript 中基于构造函数的函数与原型函数是否与成员方法相同，成员方法可以访问“this”，而静态方法在经典 OOP 中无法访问“this”？像 C# 还是 Java 这样的语言？

不，两种类型的函数都可以访问对象的变量。 WagTail() 确实访问 this.name。然而，原型函数不能访问“私有”变量。

【参考方案2】：

两者不同：第一个将仅方法的引用存储在原型对象上，而第二个解决方案将方法存储在对象的每个上.这意味着每个对象都将包含一个额外的指针，因此每个对象都会占用更多的内存。

per-object 方法允许该方法引用构造函数（闭包）中的变量，因此它允许您访问一些您无法从原型方法访问的数据。

最后，可以稍后更改原型方法，即您可以在运行时在原型对象上重新定义Bark，并且此更改将适用于具有此原型的所有对象（因为该方法总是通过原型查找）。

【参考方案3】：

我见过的绝大多数 javascript 代码都使用原型方法。我认为这有三个原因，我可以从我的脑海中想到。

首先是你避免让每个类都成为一个巨大的构造函数：构造函数逻辑进入构造函数，其他方法的逻辑在其他地方声明——这主要是一个清晰的事情/关注点分离的事情，但在 javascript 中你需要您可以掌握的所有清晰度。

第二个是效率。当您在构造函数中声明方法时，您正在为对象的每个实例创建函数对象的新实例，并将构造函数的范围绑定到每个函数（也就是说，它们可以引用，例如构造函数的参数，只要对象存在，就永远不会被 gc'd）。当您在原型上声明方法时，所有实例都使用函数对象的一个​​副本——原型属性不会复制到实例上。

第三个原因是，当您使用原型方法时，您可以通过各种方式“扩展”类，例如 Backbone.js 使用的原型链和 CoffeeScript 的类构造。