Một bài viết JavaScript đơn giản nhưng sẽ cung cấp cho bạn một cái nhìn tổng quan và cơ bản về prototype trong JavaScript cùng với vài ví dụ mẫu JavaScript.

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

JavaScript's prototype object generates confusion wherever it goes. Seasoned JavaScript professionals, even authors frequently exhibit a limited understanding of the concept. I believe a lot of the trouble stems from our earliest encounters with prototypes, which are almost always related to new, constructor and the very misleading prototype property attached to functions. In fact prototype is a remarkably simple concept. To understand it better, we just need to forget what we 'learned' about constructor prototypes and start again from first principles.

What is a prototype?

A prototype is an object from which other objects inherit properties

Can any object be a prototype?

Yes.

Which objects have prototypes?

Every object has a prototype by default. Since prototypes are themselves objects, every prototype has a prototype too. (There is only one exception, the default object prototype at the top of every prototype chain. More on prototype chains later)

OK back up, what is an object again?

An object in JavaScript is any unordered collection of key-value pairs. If its not a primitive (undefined, null, boolean, number or string) its an object.

You said every object has a prototype. But when I write ({}).prototype I get null. Are you crazy?

Forget everything you learned about the prototype property - it's probably the biggest source of confusion about prototypes. The true prototype of an object is held by the internal [[Prototype]] property. ECMA 5 introduces the standard accessor Object.getPrototypeOf(object) which to-date is only implemented in Firefox and Chrome. In addition all browsers except IE and Opera support the non-standard accessor __proto__. Failing that we need to ask the object's constructor for its prototype property.

Ok fine, but false is a primitive, so why does false.__proto__ return a value?

When a primitive is asked for it's prototype it will be coerced to an object.

I want to use prototypes for inheritance. What do I do now?

It rarely makes sense to set a prototype for one instance and only one instance, since it would be equally efficient just to add properties directly to the instance itself. I suppose if we have created a one off object which we would like to share the functionality of an established object, such as Array, we might do something like this (in __proto__ supporting browsers).

But the real power of prototype is seen when multiple instances share a common prototype. Properties of the prototype object are defined once but inherited by all instances which reference it. The implications for performance and maintenance are obvious and significant.

So is this where constructors come in?

Yes. Constructors provide a convenient cross-browser mechanism for assigning a common prototype on instance creation.

Just before you give an example I need to know what this constructor.prototype property is all about?

OK. Firstly JavaScript makes no distinction between constructors and other functions, so every function gets a prototype property. Conversely, anything that is not a function does not have such a property.

So now the definition: A function's prototype property refers to the object that will be assigned as the prototype to all instances created when this function is used as a constructor.

It's important to understand that a function's prototype property has nothing to do with it's actual prototype.

Example please?

You've probably seen and used this a hundred times but here it is once again, maybe now with added perspective.

That's great. And if I change the constructor's prototype, even existing instances will have access to the latest version right?

Well....not exactly. If I modify the existing prototype's property then this is true, because a.__proto__ is a reference to the object defined by A.prototype at the time it was created.

But if I replace the prototype property with a new object, a.__proto__ still references the original object.

What does a default prototype look like?

An object with one property, the constructor.

What does instanceof have to do with prototype?

The expression a instanceof A will answer true if a's prototype falls within the same prototype chain as A's prototype property. This means we can trick instanceof into failing

So what else can I do with prototypes?

Remember I said that every constructor has a prototype property which it uses to assign prototypes to all instances it generates? Well that applies to native constructors too such as Function and String. By extending (not replacing!) this property we get to update the prototype of every instance of the given type.

I've used this technique in numerous previous posts to demonstrate function augmentation. For example the tracer utility I introduced in my last post needed all string instances to implement times, which returns a given string duplicated a specified number of times

Tell me more about how inheritance works with prototypes. What's a prototype chain?

Since every object and every prototype (bar one) has a prototype, we can think of a succession of objects linked together to form a prototype chain. The end of the chain is always the default object's prototype.

The prototypical inheritance mechanism is internal and non-explicit. When object a is asked to evaluate property foo, JavaScript walks the prototype chain (starting with object a itself), checking each link in the chain for the presence of property foo. If and when foo is found it is returned, otherwise undefined is returned.

What about assigning values?

Prototypical inheritance is not a player when property values are set. a.foo = 'bar' will always be assigned directly to the foo property of a. To assign a property to a prototype you need to address the prototype directly.

And that about covers it. I feel I have the upper hand on the prototype concept but my opinion is by no means the final word. Please feel free to tell me about errors or disagreements.

Where can I get more information on protoypes?

I recommend this excellent article by Dmitry A. Soshnikov

• Mã nguồn
• In

• Lời bình (0)
• Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới