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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 05:59:53  来源:igfitidea点击:

What’s the purpose of prototype?

javascriptprototype-programming

提问by Quinton Pike

Possible Duplicate:
Use of 'prototype' vs. 'this' in JavaScript?

可能的重复:
在 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_namefunction 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 thiscontext will be set to someAnimaland (the one and only) set_namefunction 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 nameand set_nameproperties. However, all objects created by the second function will share the set_nameproperty.

由第一函数创建的所有对象都会有不同的nameset_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.

使用第二种方法,您还可以以同样影响已创建实例的方式修改或向类添加方法。