オブジェクト指向作成オブジェクトモードと継承モード

工場出荷時の機能パターン

アドバンテージ：

欠点:

継承は、プロトタイプチェーン継承、借用コンストラクター継承、結合継承（プロトタイプチェーン継承 + 借用コンストラクター継承）の 3 つに分類されます。

構成継承

前の研究から、単一のオブジェクトを作成するには 2 つの方法があることがわかります。1 つはリテラル var obj = {} を直接使用する方法、もう 1 つはコンストラクター var obj = new Object() を使用してオブジェクトを作成する方法です。単一のオブジェクト。

では、複数のオブジェクトを作成するにはどうすればよいでしょうか? 次に、複数のオブジェクトを作成する 4 つの方法を紹介します。

工場出荷時の機能パターン

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

この方法の長所と短所は、出力結果からわかります。

アドバンテージ：

オブジェクトをバッチで作成してコードの冗長性を減らすことができます

欠点:

オブジェクトのタイプ (すべてオブジェクトインスタンス) と冗長なメソッド (sayName が誰のメソッドであるか) を区別することは不可能です。

コンストラクターパターン

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

アドバンテージ：

オブジェクトはバッチで作成でき、タイプを区別できます

欠点:

メソッドの冗長性

プロトタイプオブジェクトパターン

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

アドバンテージ：

メソッドの冗長性を解決し、オブジェクトをバッチで作成しました

欠点:

すべてのインスタンスのプロパティとメソッドは同じです (図に示すように、要素が p1 オブジェクト配列に追加され、p2 も追加されます)。

コンビネーションモード

// 组合模式 构造函数 + 原型对象
//将实例私有属性和方法全部放在构造函数中
//将实例公共属性和方法都放在原型对象中
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 判断当前实例对象是否处在原型链上
 * 判断是否是某一个构造函数的实例对象
 */
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);

継承する

継承は、プロトタイプチェーン継承、借用コンストラクター継承、結合継承（プロトタイプチェーン継承 + 借用コンストラクター継承）の 3 つに分類されます。

ここで結合継承を導入します

構成継承

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

コンストラクター継承の借用のポイントは、

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

親コンストラクターを呼び出して、このポインターを子コンストラクターのインスタンスに変更する必要があります。ポインターの変更には、call、apply、bind を使用できます。詳しくは、関数の基礎知識_フロントエンドを学ぶ犬頭スーダンのブログ - CSDN ブログを参照してください

プロトタイプチェーン継承のポイントは、

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

最初の文では、子コンストラクターのプロトタイプオブジェクトが親コンストラクターのインスタンスオブジェクトを指すようにして、親コンストラクターのメソッドを呼び出します。

2 番目の文を通じて、子コンストラクターを子コンストラクターにリダイレクトします。