JavaScript Advanced Series—Prototype

• Property lookup

• Prototype properties

• Performance

• Prototypes that extend built-in types

• Summary

JavaScript does not include the traditional class inheritance model, but uses the prototype prototype model.

is often mentioned as a shortcoming of JavaScript. In fact, the prototype-based inheritance model is more powerful than traditional class inheritance. Implementing the traditional class inheritance model is easy, but implementing prototypal inheritance in JavaScript is much more difficult. (It is for example fairly trivial to build a classic model on top of it, while the other way around is a far more difficult task.)

JavaScript is the only widely used language based on prototypal inheritance. So it takes some time to understand the difference between the two inheritance models.

The difference is the way JavaScript uses prototype chain inheritance.

function Foo() {
    this.value = 42;
}
Foo.prototype = {
    method: function() {}
};

function Bar() {}

// 设置Bar的prototype属性为Foo的实例对象
Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

// 修正Bar.prototype.constructor为Bar本身
Bar.prototype.constructor = Bar;

var test = new Bar() // 创建Bar的一个新实例

// 原型链
test [Bar的实例]
    Bar.prototype [Foo的实例] 
        { foo: 'Hello World' }
        Foo.prototype
            {method: ...};
            Object.prototype
                {toString: ... /* etc. */};

In the above example, the test object inherits from Bar.prototype and Foo.prototype; therefore, it can access the prototype method of Foo. At the same time, it can also access the Foo instance property value defined on the prototype. Note that new Bar() does not create a new Foo instance, but reuses the instance on its prototype; therefore, all Bar instances will share the same value property.

Property lookup

When looking for a property on an object, JavaScript traverses up the prototype chain until it finds a property with a given name.

When you reach the top of the prototype chain - that is, Object.prototype - but the specified property is still not found, undefined will be returned.

Note: Do not use Bar.prototype = Foo, as this will not execute Foo's prototype, but will point to function Foo. So the prototype chain will go back to Function.prototype instead of Foo.prototype, so the method will not be on Bar's prototype chain.

Prototype attribute

When the attribute is used to create a prototype chain, any type of value can be assigned to it (prototype). However, assigning the atomic type to the prototype will be ignored.

function Foo() {}
Foo.prototype = 1; // 无效

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

Performance

If a property is at the upper end of the prototype chain, it will have a negative impact on the search time. In particular, attempting to access a property that does not exist will traverse the entire prototype chain.

And, when using a for in loop to traverse the properties of an object, all properties on the prototype chain will be accessed.

Extending prototypes of built-in types

One wrong feature that is often used is to extend Object.prototype or other prototype objects of built-in types.

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

The only reason to extend built-in types is to be consistent with new JavaScript, such as Array.forEach.

Summary

Before writing complex JavaScript applications, fully understanding how prototype chain inheritance works is a must for every JavaScript programmer. Beware of performance issues caused by long prototype chains, and know how to improve performance by shortening the prototype chain. Furthermore, never extend prototypes of built-in types except for compatibility with new JavaScript engines.

Note: This is a commonly used method in the programming field, called Backport, which means adding new patches to the old version.

The above is the content of JavaScript Advanced Series - Prototype. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!