JavaScript Secret Garden] object second: Prototype

JavaScript does not contain the traditional class inheritance model, but rather uses the Prototypal prototype model.

Although this is often referred to as a disadvantage of JavaScript, the prototype-based inheritance model is more powerful than traditional class inheritance. Implementing the traditional class inheritance model is simple, but it is much more difficult to implement the prototype inheritance in JavaScript. (It's for example fairly trivial-to-build a classic model on top of It, and the other-the-around is a far more difficul T task.)

Since JavaScript is the only widely used prototype-based language, it takes some time to understand the differences between the two inheritance modes. K7 Casino

The first difference is that JavaScript uses the way the prototype chain inherits.

function Foo () {this.value = 42;} Foo.prototype = {    method:function () {}};function bar () {}//Sets the prototype property of bar as an instance object of Foo Bar.prototype = new Foo (); Bar.prototype.foo = ' Hello nowamagic ';//fix Bar.prototype.constructor for Bar itself Bar.prototype.constructor = bar;var Test = New bar ()//Create an instance of bar

A simple use of Bar.prototype = Foo.prototype will result in two objects sharing the same prototype. Therefore, changing the prototype of any one object will affect the prototype of another object, which in most cases is not a desired result.

The prototype chain is as follows:

Test [instance of Bar]    Bar.prototype [instance of Foo]         {foo: ' Hello World '}        foo.prototype            {method: ...};            Object.prototype                {toString: .../* etc. */};

In the example above, the test object inherits from Bar.prototype and Foo.prototype, so it can access the prototype method of Foo. It also has access to the Foo instance attribute value defined on the prototype. It is important to note that the new bar () does not create an instance of Foo, but instead reuses the instance on its prototype, so all Bar instances share the same Value property.

Bar.prototype = foo, because this does not execute the prototype Foo, but instead points to the function foo. So the prototype chain will go back to Function.prototype instead of foo.prototype, so the method will not be on the Bar's prototype chain.

Property Lookup

When a property is found for an object, JavaScript traverses the prototype chain up until it finds a property of the given name.

The lookup arrives at the top of the prototype chain-that is, Object.prototype-but the specified property is still not found, and the undefined is returned.

Prototype properties

When a prototype property is used to create a prototype chain, you can assign any type of value to it (prototype). However, the operation of assigning an atomic type to prototype will be ignored.

function Foo () {}foo.prototype = 1; Invalid

and assigning the object to prototype, as shown in the example above, will dynamically create the prototype chain.

Performance

If an attribute is at the top of the prototype chain, it will adversely affect the lookup time. In particular, trying to get a non-existent property would traverse the entire prototype chain.

Also, all properties on the prototype chain are accessed when iterating through the properties of the object using a for in loop.

Extending prototypes of built-in types

One error feature is often used, which is to extend Object.prototype or other built-in types of prototype objects.

This technique is called monkey patching and destroys encapsulation. Although it is widely used in some JavaScript libraries such as Prototype, I still don't think it's a good idea to add some nonstandard functions to the built-in type.

The only reason to extend the built-in type is to be consistent with the new JavaScript, such as Array.foreach.

This is a common way of programming, called Backport, which is to add new patches to the old version.

Summarize

Before writing complex JavaScript applications, it is a required lesson for every JavaScript programmer to fully understand how prototype chain inheritance works. Beware of performance problems caused by too long a prototype chain, and know how to improve performance by shortening the prototype chain. Further, never extend the prototype of the built-in type, unless it is compatible with the new JavaScript engine.

JavaScript Secret Garden] object second: Prototype