Javascript原型继承和对象创建 [英] Javascript prototypal inheritance and object creation

问题描述

我无法理解普通对象和继承创建过程与整个prototype概念之间的区别.假设我有以下代码:

I cant understand the differences between the normal object and inheritance creation process and the whole prototype concept. Let's say I have this code:

function Person(name, age,location){
    this.name = name;
    this.age = age;
    this.location = location;
    this.greet = function(){
        return console.log(this.name + " says hi from "+this.location);
    }
}
    Person.prototype = {
        protoGreet: function(){
            console.log(this.name + " says 'that greeting was sent using a prototype'")
        }
    }

var alex = new Person("Alex",29,"earth");
var john = Object.create(Person);
//now I can set john's location john.location = "wherever";

1. greet和protoGreet方法之间的区别是什么?他们的行为完全相同.
2. alex和john有什么区别.一个通过new关键字创建，另一个通过Person"class"的prototype属性创建.
3. 我想没有正确的方法，因为这两种方法都是正确的，但是我何时应该首选一种方法呢?

1. Whats the difference between greet and protoGreet methods. They both act completely the same.
2. What is the difference between alex and john. One was created using the new keyword and the other one thru the prototype property of Person "class".
3. I guess there's no right way because both are correct, but when should I prefer one method over the other?

推荐答案

原型函数与对象自身函数之间的区别:
问候函数:该函数(所有函数都是对象)位于实例对象的内部，因此，每个实例都有其自己的问候函数，如您在图片中所见.

Difference between prototype functions and object itself functions:
greet function: This function (all functions are objects) is inside of the instance object so each instance has its own greet function, as you can see in the picture.

protoGreet函数:位于内存中的一个独立对象(图片中的文字对象)内部，并且不属于任何Person实例.但是Person的每个实例都有一个指向该对象的隐藏链接(引用)(此链接称为__proto__).因此，该对象在Person

protoGreet function: Located inside an independent object in the memory (the literal object in the picture) and is not owned by any instances of Person. But each instance of the Person has a hidden link (reference) to that object (this link is called __proto__). So this object is shared among all instances of the Person

我在乎有多少个问候实例?

What do I care how many instances of greet are there?

内存优化对于所有应用程序都是至关重要的，而Web应用程序实际上也不例外.因此，当单个共享对象足以满足您的目的时，为每个实例使用单独的对象可能会违反此规则.但是从性能角度来看，第一种方法(即greet函数)可以比第二种方法(即protoGreet函数)更快，因为没有发生称为原型链查找的特定过程.请记住，在这种权衡的记忆中是赢家.

Memory optimization is an essence for all applications and actually there is no exceptions for web applications. So when a single shared object is adequate for your purpose, using separate object for each instance could violate this rule. But as performance point of view the first way (i.e greet function) can be faster than the second one (i.e protoGreet function) because a certain process called prototype chain lookup does not take place. Keep in mind that in this trade-off memory is the winner.

对于其他问题，似乎您不知道new关键字到底能完成什么.所以，让我指出您的旁注.

For your other questions, Seems you don't know what exactly is done by new keyword. So let me point you out to a side note.

注意:当您使用new关键字调用函数时，将完成这些步骤.假设我们具有以下功能:

Note: These steps is going to be done when you invoke a function with new keyword. Suppose we have the following function:

function Person (name, age) {
    this.name = name;
    this.age = age;
}

• 创建一个空文字对象，即{}(请注意，此对象的隐藏__proto__链接引用了Person.prototype表示的对象)
• 调用该函数并用此emply文字对象替换所有this关键字(更严格地说，this指的是该空文字对象).
• 指定的属性和方法将添加到该新创建的对象中. (在这种情况下，name和age属性).
• 最后，该对象将隐式地从函数中返回.
• Create an empty literal object i.e {} (Note that the hidden __proto__ link of this object refers to the object represented by Person.prototype)
• Invoke the function and substitute all this keywords with this emply literal object (In more technical words, this refers to that empty literal object).
• The specified properties and methods will be added to that newly created object. (In this case name and age properties).
• Finally that object implicitly will be returned from the function.

现在让我们回到您的问题，Object.create(Person.prototype)和new Person()有什么区别?

Now lets come back to your question, What's differences between Object.create(Person.prototype) and new Person() ?

情况new Person()在前面已经讨论过.但是Object.create(Person.prototype)创建一个空对象，并将其__proto__链接到第一个输入参数对象(在本例中为Person.prototype)，并将该新创建的对象作为输出返回.

Case new Person() was discussed earlier above. But Object.create(Person.prototype) creates an empty object and links its __proto__ to the first input argument object (In this case Person.prototype) and return that newly created object as output.

好的，到目前为止，我希望此注释可以澄清您的问题，但是，如果我的回答仍然没有道理，请告诉我您的问题在哪里.

Okay, so far I hope that this notes clarify your problems, But if my answer still doesn't make sense let me know where's your problem.

这篇关于Javascript原型继承和对象创建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！