Object-oriented creation object mode and inheritance mode

Table of contents

Factory function pattern

advantage:

prototype object pattern

Inheritance is divided into three categories, namely: prototype chain inheritance, borrowed constructor inheritance, and combined inheritance (prototype chain inheritance + borrowed constructor inheritance)

compositional inheritance

From the previous study, we can know that there are two ways to create a single object, one is to directly use the literal var obj = {}, and the other is to use the constructor var obj = new Object() to create a single object.

So, how to create multiple objects? Next, four methods of creating multiple objects will be introduced.

Factory function pattern

// 工厂函数模式
function sayName(){
    console.log(this.name);
}
function person(name,age,gender){
    return{
        name:name,
        age:age,
        gender:gender,
        // 写在内部会造成方法冗余，每个子对象都会在堆区占据一块方法的区域
        // sayName:function(){
        //     console.log(this.ame);
        // }
        // 方法写在外部
        sayName:sayName
    }
}

var p1 = person('jemmy',21,'male');
var p2 = person('cammy',18,'female');
console.log(p1);
console.log(p2);
p1.sayName();
p2.sayName();

function dog(name,age){
    return{
        name:name,
        age:age
    }
}
var d1 = dog('闹闹',4);
console.log(d1);

The advantages and disadvantages of this method can be seen from the output results:

advantage:

Objects can be created in batches to reduce code redundancy

shortcoming:

It is impossible to distinguish the type of object (all are object instances) and redundant methods (it is impossible to distinguish whose method sayName is).

constructor pattern

// 构造函数
function sayName(){
    console.log(this.name);
}
function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sayName = sayName;
}

var p1 = new Person('jemmy',21,'male');
var p2 = new Person('cammy',18,'female');
/**
 *  new关键字做了什么?
        1.创建一个实例对象 var p1 = new Person(){}
        2.将this指向实例对象    this -->p1
        3.执行函数体    p1.name = zhangsan;
        4.返回实例对象  return p1{}
 */
console.log(p1);
console.log(p2);
p1.sayName();
p2.sayName();

function Dog(name,age){
    this.name = name;
    this.age = age;
}
var d1 = new Dog('闹闹',4);
console.log(d1);

advantage:

Objects can be created in batches and types can be distinguished

shortcoming:

method redundancy

prototype object pattern

// 原型对象
function Person(){};
Person.prototype = {
    constructor:Person,
    name:'cammy',
    age:18,
    gender:'female',
    sayName:function(){
        console.log(this.name);
    }
}
var p1 = new Person();
var p2 = new Person();
console.log(p1,p2);
console.log(p1.name,p2.name);
Person.prototype.friends = [];
p1.friends.push('tom');
console.log(p1.friends);
console.log(p2.friends);

advantage:

Solved method redundancy and created objects in batches

shortcoming:

All instance properties and methods are the same (as shown in the figure, an element is added to the p1 object array, and p2 is also added)

Combination mode

// 组合模式 构造函数 + 原型对象
//将实例私有属性和方法全部放在构造函数中
//将实例公共属性和方法都放在原型对象中
function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.friends = [];
}
Person.prototype = {
    constructor:Person,
    sayName:function(){
        console.log(this.name);
    }
}

var p1 = new Person('jemmy',21,'male');
var p2 = new Person('cammy',18,'female');
console.log(p1,p2);
p1.friends.push('tom');
console.log(p1,p2);
p1.sayName();
p2.sayName();

instanceof

Determine whether the current instance object is on the prototype chain

Determine whether it is an instance object of a certain constructor

/**
 * instanceof 判断当前实例对象是否处在原型链上
 * 判断是否是某一个构造函数的实例对象
 */
console.log(p1 instanceof Person);
console.log(p2 instanceof Person);
console.log(p1 instanceof Object);
console.log(p2 instanceof Object);
console.log(Person instanceof Object);

inherit

Inheritance is divided into three categories, namely: prototype chain inheritance, borrowed constructor inheritance, and combined inheritance (prototype chain inheritance + borrowed constructor inheritance)

Here we introduce combined inheritance

compositional inheritance

// 构造创建函数 父函数
function Animal(type,age,weight){
    this.type = type;
    this.age = age;
    this.weight = weight;
}

// 公共方法
Animal.prototype = {
    constructor:Animal,
    sayType:function(){
        console.log(this.type);
    }
}

// 借用构造函数继承 
function Dog(type,age,weight,name){
    // Animal.call(this,type,age,weight);
    // Animal.apply(this,[type,age,weight]);
    Animal.bind(this)(type,age,weight);
    this.name = name;
}

// var d1 = new Dog('狗',3,'20kg','闹闹');
// console.log(d1);

// 原型链继承
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
Dog.prototype.sayName = function(){
    console.log(this.name);
}
// Dog.prototype.sayType = function(){
//     console.log('我是子构造函数的原型对象');
// }
var d1 = new Dog('狗',3,'20kg','闹闹');
console.log(d1);
d1.sayType();

The point of borrowing constructor inheritance is that

// Animal.call(this,type,age,weight);
// Animal.apply(this,[type,age,weight]);
Animal.bind(this)(type,age,weight);

You need to call the parent constructor and change this pointer to the child constructor instance. You can use call, apply or bind to change the pointer. For details, see the basic knowledge of functions_Learning front-end dog-headed Sudan's blog-CSDN blog

The point of prototype chain inheritance is that

Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;

Through the first sentence, point the prototype object of the child constructor to the instance object of the parent constructor to call the method in the parent constructor.

Redirect the child constructor to the child constructor through the second sentence.