Modo de creación de objetos orientado a objetos y modo de herencia.

Tabla de contenido

Patrón de función de fábrica

ventaja:

patrón de objeto prototipo

La herencia se divide en tres categorías, a saber: herencia de cadena de prototipo, herencia de constructor prestado y herencia combinada (herencia de cadena de prototipo + herencia de constructor prestado)

herencia compositiva

Del estudio anterior, podemos saber que hay dos formas de crear un solo objeto, una es usar directamente el literal var obj = {} y la otra es usar el constructor var obj = new Object() para crear un objeto único.

Entonces, ¿cómo crear múltiples objetos? A continuación, se presentarán cuatro métodos para crear múltiples objetos.

Patrón de función de fábrica

// 工厂函数模式
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);

Las ventajas y desventajas de este método se pueden ver en los resultados:

ventaja:

Los objetos se pueden crear en lotes para reducir la redundancia de código.

defecto:

Es imposible distinguir el tipo de objeto (todos son instancias de objeto) y métodos redundantes (es imposible distinguir de quién es el método sayName).

patrón constructor

// 构造函数
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);

ventaja:

Los objetos se pueden crear en lotes y se pueden distinguir tipos.

defecto:

redundancia de métodos

patrón de objeto prototipo

// 原型对象
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);

ventaja:

Redundancia de métodos resuelta y objetos creados en lotes.

defecto:

Todas las propiedades y métodos de la instancia son iguales (como se muestra en la figura, se agrega un elemento a la matriz de objetos p1 y también se agrega p2)

Modo combinado

// 组合模式 构造函数 + 原型对象
//将实例私有属性和方法全部放在构造函数中
//将实例公共属性和方法都放在原型对象中
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();

en vez de

Determinar si el objeto de instancia actual está en la cadena de prototipos

Determinar si es un objeto de instancia de un determinado 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);

heredar

La herencia se divide en tres categorías, a saber: herencia de cadena de prototipo, herencia de constructor prestado y herencia combinada (herencia de cadena de prototipo + herencia de constructor prestado)

Aquí presentamos la herencia combinada.

herencia compositiva

// 构造创建函数 父函数
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();

El objetivo de tomar prestada la herencia del constructor es que

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

Debe llamar al constructor principal y cambiar este puntero a la instancia del constructor secundario. Puede usar call, apply o bind para cambiar el puntero. Para obtener más información, consulte Conocimientos básicos de funciones_Aprendizaje del blog-CSDN de front-end dog-headed Sudan.

El punto de la herencia de la cadena de prototipos es que

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

A través de la primera oración, apunte el objeto prototipo del constructor secundario al objeto de instancia del constructor principal para llamar al método en el constructor principal.

Redirige el constructor secundario al constructor secundario a través de la segunda oración.