JavaScript code Reuse Mode in detail _ basics

Code reuse and its principles

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

优先使用对象组合，而不是类继承

In JS, because there is no class concept, so the concept of the instance is not much meaning, JS object is a simple key-value pair, you can dynamically create and modify them.

But in js , we can new instantiate an object using constructors and operators, which are syntactically similar to other programming languages that use classes.

For example:

var trigkit4 = new Person();

jsIt Person seems like a class when calling a constructor, but it's actually still a function, which gives us some idea of development and inheritance patterns that are supposed to be based on the class, which we can call "class inheritance mode."

Traditional inheritance patterns require class keywords, and we assume that the above class inheritance pattern 现代继承模式 is a pattern that does not need to be considered in a class manner.

Class-style inheritance mode

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

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

When new Child() a statement is used to create an object, it obtains its functionality from the instance through a prototype Parent() , such as:

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

Prototype chain

To discuss how the prototype chain works in class inheritance mode, we see the object as a block somewhere in memory that contains data and references to other blocks. When you new Parent() create an object with a statement, you create a block to the left of the following figure, which holds the name attribute, and if you want to access the say() method, we Parent() can prototype access the right block by an implicit link to the constructor's (prototype) property. __proto__ Parent.prototype.

So what happens when you use to var kid = new Child() create a new object? The following figure:

new Child()an object created with a statement __proto__ is almost empty except for an implicit link. In this case, __proto__ you point to the inherit() new Parent() object created by using the statement in the function

When executed kid.say() , because the block object in the lower left corner has no say() method, he will query the middle block object through the prototype chain, however, there is no method in the middle block object, say() so he queries to the rightmost block object along the prototype chain, and the object has the right say() method. Is it over?

This is not the end of the execution here, as referenced in the say() method this.name , this points to the object created by the constructor, where it points new Child() to the block, however, new Child() there is no name property, and for this reason, the middle block is queried, and the middle block happens to have name property, the query for the prototype chain is complete.

For more detailed discussion please check out my article: JavaScript learning Notes (v) prototype and prototype chain detailed

Shared prototypes

The rule of this pattern is that reusable members should be transferred to the prototype instead of being placed in this. Therefore, in the purpose of inheritance, anything worthy of inheritance should be implemented in the prototype. Therefore, you can set the prototype of the child object to the same as the prototype of the parent object, as shown in the following example:

function inherit(C,P){
    C.prototype = P.prototype;
}

Child objects share the same prototype as the parent object and can be accessed equally say() . However, child objects do not inherit name properties

Prototype inheritance

Prototype inheritance is a "modern" class-free inheritance pattern. See the following examples:

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

In prototype mode, you do not need to use object literals to create a parent object. As the following code shows, you can use a constructor to create a parent object, in which case the properties of its own properties and the stereotype of the constructor are inherited.

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

In this mode, you can select a prototype object that inherits only the existing constructors. Object inherits from the object, regardless of how the parent object was created, the following instance:

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