Detailed explanation of JavaScript code reuse pattern

Detailed explanation of JavaScript code reuse pattern_Basic knowledge

WBOY

Release： 2016-05-16 16:32:00

Original

1388 people have browsed it

Code reuse and its principles

代码复用, as the name suggests, is to reuse part or even all of the code that has been written before to build a new program. When talking about code reuse, the first thing we can think of is 继承性. The principle of code reuse is:

<code>优先使用对象组合，而不是类继承</code>

Copy after login

In js, since there is no concept of class, the concept of instance does not make much sense. Objects in js are simple key-value pairs, and they can be created and modified dynamically.

But in js, we can use constructors and new operators to instantiate an object, which has syntax similarities with other programming languages that use classes.

For example:

<code>var trigkit4 = new Person();</code>

Copy after login

js seems to be a class when calling the constructor Person, but it is actually still a function. This gives us some development ideas and inheritance patterns that are assumed to be based on classes. We It can be called the "class inheritance pattern".

The traditional inheritance mode requires the class keyword. We assume that the above class inheritance mode is 现代继承模式, which is a mode that does not need to be considered in terms of classes.

Class inheritance pattern

Look at the following examples of two constructors Parent() and Child():

<code><script type="text/javascript"><br>    function Parent(name){<br>        this.name = name || 'Allen';<br>    }<br>    Parent.prototype.say = function(){<br>        return this.name;<br>    }<br>    function Child(name){}<br>    //用Parent构造函数创建一个对象，并将该对象赋值给Child原型以实现继承<br>    function inherit(C,P){<br>        C.prototype = new P();//原型属性应该指向一个对象，而不是函数<br>    }<br>    //调用声明的继承函数<br>    inherit(Child,Parent);<br></script></code>

Copy after login

When you create an object using the new Child() statement, it gets its functionality from the Parent() instance through the prototype, such as:

<code>var kid = new Child();
kid.say();
//Allen</code>

Copy after login

Prototype Chain

Discuss how the prototype chain works in the class inheritance model. We think of an object as a block somewhere in memory. This memory block contains data and references to other blocks. When using the new Parent() statement to create an object, a block like the one on the left side of the figure below will be created. This block saves the name attributes. If we want to access the say() method, we can pass the Parent() The implicit link prototype of the 🎜> (prototype) attribute can access the block on the right __proto__. Parent.prototype

So, what happens when you use

to create a new object? As shown below: var kid = new Child()

The object created using the

statement is almost empty except for the implicit link new Child(). In this case, __proto__ points to the object __proto__ created using the inherit() statement in the new Parent() function.

When executing

, since the block object in the lower left corner does not have a kid.say() method, it will query the middle block object through the prototype chain. However, the middle block object does not have a say() method either. method, so he followed the prototype chain to query the rightmost block object, and this object happened to have the say() method. Is it over? say()

is not finished when it is executed here.

is referenced in the say() method. This points to the object created by the constructor. Here, it points to the this.name block. However, new Child() does not have the new Child() attribute. For this reason, the middle block will be queried, and the middle block happens to have the name attribute. At this point, the query of the prototype chain is completed. name

For a more detailed discussion, please check out my article:

Javascript Study Notes (5) Detailed Explanation of Prototype and Prototype Chain

Share prototypes

The rule of this pattern is: reusable members should be transferred to the prototype instead of placed in this. Therefore, for inheritance purposes, anything worth inheriting should be implemented in a prototype. Therefore, you can set the prototype of the child object to be the same as the prototype of the parent object, as shown in the following example:

<code>function inherit(C,P){<br>    C.prototype = P.prototype;<br>}</code>

Copy after login

子对象和父对象共享同一个原型，并且可以同等的访问say()方法。然而，子对象并没有继承name属性

原型继承

原型继承是一种“现代”无类继承模式。看如下实例：

<code><script type="text/javascript"><br>    //要继承的对象<br>    var parent = {<br>        name : "Jack"  //这里不能有分号哦<br>    };</code>
<code>    //新对象<br>    var child = Object(parent);</code>
<code>    alert(child.name);//Jack<br></script></code>

Copy after login

在原型模式中，并不需要使用对象字面量来创建父对象。如下代码所示，可以使用构造函数来创建父对象，这样做的话，自身的属性和构造函数的原型的属性都将被继承。

<code><script type="text/javascript"><br>    //父构造函数<br>    function Person(){<br>        this.name = "trigkit4";<br>    }<br>    //添加到原型的属性<br>    Person.prototype.getName = function(){<br>        return this.name;<br>    };<br>    //创建一个新的Person类对象<br>    var obj = new Person();<br>    //继承<br>    var kid = Object(obj);<br>    alert(kid.getName());//trigkit4<br></script></code>

Copy after login

本模式中，可以选择仅继承现有构造函数的原型对象。对象继承自对象，而不论父对象是如何创建的，如下实例：

<code><script type="text/javascript"><br>    //父构造函数<br>    function Person(){<br>        this.name = "trigkit4";<br>    }<br>    //添加到原型的属性<br>    Person.prototype.getName = function(){<br>        return this.name;<br>    };<br>    //创建一个新的Person类对象<br>    var obj = new Person();<br>    //继承<br>    var kid = Object(Person.prototype);<br>    console.log(typeof kid.getName);//function，因为它在原型中<br>    console.log(typeof kid.name);//undefined，因为只有该原型是继承的<br></script></code>

Copy after login