Javascript 原型的目的是什么?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8433459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What’s the purpose of prototype?
提问by Quinton Pike
Possible Duplicate:
Use of 'prototype' vs. 'this' in JavaScript?
OK, So I am somewhat new to the idea of OOP in JS.
好的,所以我对 JS 中的 OOP 的想法有些陌生。
What is the difference between these two snippets of code written below:
下面编写的这两个代码片段之间有什么区别:
function animal(){
this.name = 'rover';
this.set_name = function(name){
this.name = name;
}
}
function animal(){
this.name = 'rover';
}
animal.prototype.set_name = function(name){
this.name = name;
}
They both do the same thing, so what's the difference?
他们都做同样的事情,那么有什么区别呢?
回答by Adam Rackis
Using the prototype makes for faster object creation, since that function does not have to be re-created each time a new object is created.
使用原型可以更快地创建对象,因为不必在每次创建新对象时重新创建该函数。
When you do this:
当你这样做时:
function animal(){
this.name = 'rover';
this.set_name = function(name){
this.name = name;
}
}
The set_name
function is created de novoeach and every time you create an animal. But when you do this
每次创建动物时都会从头set_name
创建该函数。但是当你这样做时
animal.prototype.set_name = function(name){
this.name = name;
}
The function does not have to be re-created each time; it exists in one place in the prototype. So when you call someAnimal.set_name("Ubu");
the this
context will be set to someAnimal
and (the one and only) set_name
function will be called.
不必每次都重新创建该函数;它存在于原型中的一处。因此,当您调用上下文时someAnimal.set_name("Ubu");
,this
上下文将被设置为someAnimal
和(唯一的)set_name
函数将被调用。
There is one advantage to using the first syntax though: functions created in this manner will have access to private data:
不过,使用第一种语法有一个优点:以这种方式创建的函数将可以访问私有数据:
function animal(){
var privateData = 'foo'
this.name = 'rover';
this.set_name = function(name){
this.name = name;
alert(privateData); //will alert 'foo'
}
}
Douglas Crockford calls functions created like this "privileged" for that reason: they have access to both public, and private data.
出于这个原因,道格拉斯·克罗克福德 (Douglas Crockford) 将像这样创建的函数称为“特权”:它们可以访问公共数据和私有数据。
回答by Quinton Pike
The difference appears when you create new object from these function
从这些函数创建新对象时会出现差异
var animal1 = new animal();
All objects created by the first function will have different name
and set_name
properties. However, all objects created by the second function will share the set_name
property.
由第一函数创建的所有对象都会有不同的name
和set_name
特性。但是,由第二个函数创建的所有对象都将共享该set_name
属性。
回答by hugomg
In the first example, each separate animal has an own property for the set_name function, while in the second example they share the same function via their prototype.
在第一个示例中,每个单独的动物都有自己的 set_name 函数属性,而在第二个示例中,它们通过原型共享相同的函数。
The advantage of the first version is that the methods can access local (private) variables declared inside the constructor.
第一个版本的优点是方法可以访问在构造函数中声明的本地(私有)变量。
The advantage of the second method is that it needs less memory (since you only store the method once instead of a million times) and is more performatic in current JS engines.
第二种方法的优点是它需要更少的内存(因为您只存储该方法一次而不是一百万次)并且在当前的 JS 引擎中更具性能。
Using the second method you can also modify or add methods to a class in a way that also affects instances that were already created.
使用第二种方法,您还可以以同样影响已创建实例的方式修改或向类添加方法。