blocks|key|1740349|text|当您将一个方法放在原型上时，每个实例对象都共享对该方法的相同引用。如果您有10个实例，则该方法有1个副本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1740350|当您执行示例1中所做的操作时，每个实例对象都有自己的同一方法版本，因此，如果您创建了10个对象，则会有10个运行的代码副本。|1740351|使用原型是可行的，因为javascript具有将函数执行与实例相关联的机制，即它为函数的执行设置this属性。|offset|length|style|CODE|1740352|因此，使用原型是非常可取的，因为它使用的空间更少(当然，除非这是您想要的)。|1740353|在方法2中，您通过将原型设置为等于对象文字来设置原型。请注意，这里您正在设置一个属性，我认为您不打算这样做，因为所有实例都将获得相同的属性。|1740354|在方法3中，您是一次一个任务地构建原型。|1740355|对于任何事情，我都更喜欢方法3。也就是说，我在构造函数中设置了属性值|1740356|myObj+=+function(p1){
+++this.p1;+//+every+instance+will+probably+have+its+own+value+anyway.
}

myObj.prototype.method1+=+function(){..}+//+all+instances+share+the+same+method,+but+when+invoked++**this**+has+the+right+scope.|code-block|syntax|javascript|1740357|entityMap^0|0|0|1C|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@$F|11|G|12|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|16|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|17|8|@]|9|@]|A|$U|V]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

When you put a method on the prototype, every instance object shares the same reference to the method. If you have 10 instances, there is 1 copy of the method.

When you do what you did in example 1, every instance object has its own version of the same method, so if you create 10 of your objects, there are 10 copies of the code running around.

Using the prototype works because javascript has machinery for associated a function execution with a instance, i.e. it sets the <code>this</code> property for the execution of the function.

So using the prototype is highly preferred since it uses less space (unless of course, that is what you want).

In method 2, you are setting the prototype by setting it equal to an object literal. Note that here you are setting a property, which I think you don't intend to do, since all instances will get the same property.

In Method 3, you are building the prototype one assignment at a time. 

I prefer method 3 for all things. i.e. In my constructor I set my property values

<pre><code>myObj = function(p1){
 this.p1; // every instance will probably have its own value anyway.
}

myObj.prototype.method1 = function(){..} // all instances share the same method, but when invoked **this** has the right scope.
</code></pre>

blocks|key|1953769|text|做一些性能测试(声明大约一百万个兔变量)。第一种方法将是最耗费时间和内存的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1953770|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Do some performance testing (declare around 1 milion rabbit variables) . First method will be the most time and memory consuming.

blocks|key|1953863|text|这是一个经常被误解的重要问题。这取决于你想要做什么。一般来说，hvgotcode的答案是正确的。任何经常被实例化的对象都应该将方法和属性附加到原型上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1953864|但在非常特定的情况下，其他方法也有优势。阅读这篇文章，包括评论：http://net.tutsplus.com/tutorials/javascript-ajax/stop-nesting-functions-but-not-all-of-them/|offset|length|1953865|在某些情况下，上述方法1会有所帮助，使您能够拥有“私有”的可读写属性和方法。虽然这通常不值得在大量实例化的对象中做出牺牲，但对于只实例化一次或几次的对象，或者没有许多内部赋值，或者如果您在具有许多不同技能水平和敏感度的开发团队环境中，这可能会有所帮助。|1953866|一些开发人员采用了另一种很好的策略，试图弥补其他开发人员的一些缺点。这就是：|1953867|var+Obj+=+function()+{
++++var+private_read_only+=+'value';

++++return+{
++++++++method1:+function()+{},
++++++++method2:+function()+{}
++++};
};|code-block|syntax|javascript|1953868|entityMap|0|LINK|mutability|MUTABLE|url|http://net.tutsplus.com/tutorials/javascript-ajax/stop-nesting-functions-but-not-all-of-them/^0|0|W|2L|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

This is an important issue that is often misunderstood. It depends what you're trying to do. Generally speaking, hvgotcode's answer is right on. Any object that will be instantiated frequently should attach methods and properties to the prototype.

But there are advantages to the others in very specific situations. Read this, including the comments: <a href="http://net.tutsplus.com/tutorials/javascript-ajax/stop-nesting-functions-but-not-all-of-them/" rel="nofollow">http://net.tutsplus.com/tutorials/javascript-ajax/stop-nesting-functions-but-not-all-of-them/</a>

There are occasions when method 1 above helps, enabling you to have "private" readable/writable properties and methods. While this often isn't worth the sacrifice in heavily instantiated objects, for objects instantiated only once or a few times, or without many internal assignments, or if you're in a dev team environment with lots of different skill levels and sensibilities, it can be helpful.

Some devs incorporate another good strategy that attempts to bridge some of the shortcomings of the others. That is:

<pre><code>var Obj = function() {
 var private_read_only = 'value';

 return {
 method1: function() {},
 method2: function() {}
 };
};
</code></pre>

blocks|key|1740497|text|让我们逐一查看您的示例。首先：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1740498|function+Rabbit()+{
++++this.name+=+"Hoppy";

++++this.hop+=+function()+{+//Every+instance+gets+a+copy+of+this+method...
++++++++console.log("I+am+hopping!");
++++}
}
var+rabbit+=+new+Rabbit();|code-block|syntax|javascript|1740499|正如您在问题中所说的，上面的代码将会工作。它将创建Rabbit类的一个新实例。每次创建实例时，hop方法的副本都会存储在该实例的内存中。|offset|length|style|CODE|1740500|第二个示例如下所示：|1740501|function+Rabbit()+{}

Rabbit.prototype+=+{
++++name:+"Hoppy",

++++hop:+function()+{+//Now+every+instance+shares+this+method+:)
++++++++console.log("I+am+hopping!");
++++}
}
var+rabbit+=+new+Rabbit();|1740502|这一次，Rabbit的每个实例都将共享hop方法的一个副本。这要好得多，因为它使用的内存更少。但是，每个Rabbit都将具有相同的名称(假设您不在构造函数中隐藏name属性)。这是因为该方法是从prototype继承的。在JavaScript中，当您尝试访问对象的属性时，将首先在对象本身上搜索该属性。如果在那里找不到它，我们就检查prototype+(依此类推，沿着原型链向上，直到我们到达一个prototype属性为null的对象)。|1740503|您的第三个示例与我使用的方法大致相同。在实例之间共享的方法应该在prototype上声明。像name这样的属性，您很可能希望在构造函数中进行设置，可以在每个实例的基础上进行声明：|1740504|function+Rabbit(rabbitName)+{
++++this.name+=+rabbitName;
}
Rabbit.prototype.hop+=+function()+{
++++console.log("Hopping!");
}|1740505|entityMap^0|0|0|P|6|1B|3|0|0|0|4|6|J|3|1G|6|28|4|2P|9|4M|9|5I|9|5U|4|0|W|9|1A|4|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@$I|11|J|12|K|L]|$I|13|J|14|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|17|8|@$I|18|J|19|K|L]|$I|1A|J|1B|K|L]|$I|1C|J|1D|K|L]|$I|1E|J|1F|K|L]|$I|1G|J|1H|K|L]|$I|1I|J|1J|K|L]|$I|1K|J|1L|K|L]|$I|1M|J|1N|K|L]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1O|8|@$I|1P|J|1Q|K|L]|$I|1R|J|1S|K|L]]|9|@]|A|$]]|$1|U|3|V|5|D|7|1T|8|@]|9|@]|A|$E|F]]|$1|W|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|X|$]]

Let's look at your examples one at a time. First:

<pre><code>function Rabbit() {
 this.name = "Hoppy";

 this.hop = function() { //Every instance gets a copy of this method...
 console.log("I am hopping!");
 }
}
var rabbit = new Rabbit();
</code></pre>

The above code will work, as you have said in your question. It will create a new instance of the <code>Rabbit</code> class. Every time you create an instance, a copy of the <code>hop</code> method will be stored in memory for that instance.

The second example looked like this:

<pre><code>function Rabbit() {}

Rabbit.prototype = {
 name: "Hoppy",

 hop: function() { //Now every instance shares this method :)
 console.log("I am hopping!");
 }
}
var rabbit = new Rabbit();
</code></pre>

This time, every instance of <code>Rabbit</code> will share a copy of the <code>hop</code> method. That's much better as it uses less memory. However, every <code>Rabbit</code> will have the same name (assuming you don't shadow the <code>name</code> property in the constructor). This is because the method is inherited from the <code>prototype</code>. In JavaScript, when you try to access a property of an object, that property will first be searched for on the object itself. If it's not found there, we look at the <code>prototype</code> (and so on, up the prototype chain until we reach an object whose <code>prototype</code> property is <code>null</code>).

Your third example is pretty much the way I would do it. Methods shared between instances should be declared on the <code>prototype</code>. Properties like <code>name</code>, which you may well want to set in the constructor, can be declared on a per-instance basis:

<pre><code>function Rabbit(rabbitName) {
 this.name = rabbitName;
}
Rabbit.prototype.hop = function() {
 console.log("Hopping!");
}
</code></pre>

blocks|key|1953903|text|//+option+4
var+Rabbit+{
++++constructor:+function+()+{
++++++++this.name+=+"Hoppy";
++++++++return+this;
++++},

++++hop:+function()+{
++++++++console.log("I+am+hopping!");
++++}
};

var+rabbit+=+Object.create(Rabbit).constructor();
console.log("rabbit.name+=+"+%2B+rabbit.name);++++++++
rabbit.hop();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1953904|在进行原型OO时，使用new和构造函数是完全可选的。|unstyled|offset|length|style|CODE|1953905|正如已经提到的，如果你可以通过原型分享一些东西，那么就这样做。原型在内存方面效率更高，并且在实例化时间方面更便宜。|1953906|然而，一个完全有效的替代方案将是|1953907|function+Rabbit()+{
++++//+for+some+value+of+extend+https://gist.github.com/1441105
++++var+r+=+extend({},+Rabbit);
++++r.name+=+"Hoppy";
++++return+r;
}|1953908|这里你用“原型”的属性来扩展“实例”。真正的原型OO的唯一优势是它是一个实时链接，这意味着对原型的更改会反映到所有实例中。|1953909|entityMap^0|0|B|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@$G|W|H|X|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$B|C]]|$1|Q|3|R|5|F|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|F|7|12|8|@]|9|@]|A|$]]]|T|$]]

<pre><code>// option 4
var Rabbit {
 constructor: function () {
 this.name = "Hoppy";
 return this;
 },

 hop: function() {
 console.log("I am hopping!");
 }
};

var rabbit = Object.create(Rabbit).constructor();
console.log("rabbit.name = " + rabbit.name); 
rabbit.hop();
</code></pre>

When doing prototypical OO using <code>new</code> and constructor functions is completely optional.

As has already been noted, if you can share something through the prototype do so. Prototypes are more efficient memory wise and they are cheaper in terms of instantiation time.

However a perfectly valid alternative would be

<pre><code>function Rabbit() {
 // for some value of extend https://gist.github.com/1441105
 var r = extend({}, Rabbit);
 r.name = "Hoppy";
 return r;
}
</code></pre>

Here your extending "instances" with the properties of the "prototype". The only advantage real prototypical OO has is that it's a live link, meaning that changes to the prototype reflect to all instances.

I'm just getting into JavaScript and I'm trying to wrap my head around prototypal inheritance. It appears that there's multiple ways to achieve the same effect, so I wanted to see if there is any best practices or reasons to do things one way over the other. Here's what I'm talking about:

<pre><code>// Method 1
function Rabbit() {
 this.name = "Hoppy";

 this.hop = function() {
 console.log("I am hopping!");
 }
}

// Method 2
function Rabbit() {}

Rabbit.prototype = {
 name: "Hoppy",

 hop: function() {
 console.log("I am hopping!");
 }
}

// Method 3
function Rabbit() {
 this.name = "Hoppy";
}

Rabbit.prototype.hop = function() {
 console.log("I am hopping!");
}

// Testing code (each method tested with others commented out)
var rabbit = new Rabbit();
console.log("rabbit.name = " + rabbit.name); 
rabbit.hop();
</code></pre>

All of these appear to have the same effect individually (unless I'm missing something). So is one method preferred over the other? How do you do it?

Prototypal Inheritance best practices?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我刚开始接触JavaScript，我正试图把我的头脑围绕在原型继承上。似乎有多种方法可以达到相同的效果，所以我想看看是否有任何最佳实践或理由来以一种方式做事情。这就是我要说的：// Method 1function Rabbit() {    this.name = "Hoppy";    this.hop = fun...

问原型继承最佳实践？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问原型继承最佳实践？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问原型继承最佳实践？
EN