JS創(chuàng)建對(duì)象模式及其對(duì)象原型鏈探究（三）：構(gòu)造函數(shù)模式

Martin91 發(fā)布于2019-08-19 17:56 / 1771人閱讀

摘要：創(chuàng)建對(duì)象與工廠模式的區(qū)別沒有顯示地創(chuàng)建對(duì)象直接將方法和屬性付給了對(duì)象沒有語(yǔ)句構(gòu)造函數(shù)應(yīng)該始終以一個(gè)大寫字母開頭。創(chuàng)建構(gòu)造函數(shù)的實(shí)例，必須使用操作符。

構(gòu)造函數(shù)模式

ECMAScript中的構(gòu)造函數(shù)可用來(lái)創(chuàng)建特定類型的對(duì)象，像Object和Array這樣的原生構(gòu)造函數(shù)。
也可以創(chuàng)建自定義的構(gòu)造函數(shù)，從而定義自定義對(duì)象類型的屬性和方法。

1.創(chuàng)建對(duì)象

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.showName = function(){
        console.log("name = " + this.name);
    };

}

var p1 = new Person("Mike", 20, "student");
var p2 = new Person("Tom", 23, "student");

console.log(p1);
console.log(p2);

與工廠模式的區(qū)別：

沒有顯示地創(chuàng)建對(duì)象

直接將方法和屬性付給了this對(duì)象

沒有return語(yǔ)句

構(gòu)造函數(shù)應(yīng)該始終以一個(gè)大寫字母開頭。

創(chuàng)建構(gòu)造函數(shù)的實(shí)例，必須使用new操作符。以這種方式調(diào)用構(gòu)造函數(shù)，會(huì)經(jīng)歷以下4個(gè)步驟：

創(chuàng)建一個(gè)新對(duì)象；

將構(gòu)造函數(shù)中的作用域賦給新對(duì)象（this就指向了這個(gè)對(duì)象）

執(zhí)行構(gòu)造函數(shù)中的代碼（為這個(gè)新對(duì)象添加屬性）

返回新對(duì)象

對(duì)象有一個(gè)constructor用來(lái)標(biāo)識(shí)對(duì)象類型。p1和p2對(duì)象，都有一個(gè)constructor（構(gòu)造函數(shù)）屬性，該屬性指向Person。

console.log("p1.constructor=");
console.log(p1.constructor);
console.log("p1.constructor === Person:");
console.log(p1.constructor === Person);
console.log("p2.constructor=");
console.log(p2.constructor);
console.log("p2.constructor === Person:");
console.log(p2.constructor === Person);

但是，提到檢測(cè)對(duì)象類型，還是instanceof操作符要更可靠些。Person構(gòu)造函數(shù)創(chuàng)建的所有對(duì)象，既是Object的實(shí)例，也是Person的實(shí)例。

console.log("p1 instanceof Object:");
console.log(p1 instanceof Object);
console.log("p1 instanceof Person:");
console.log(p1 instanceof Person);
console.log("p2 instanceof Object:");
console.log(p2 instanceof Object);
console.log("p2 instanceof Person:");
console.log(p2 instanceof Person);

2.觀察Person構(gòu)造函數(shù)涉及到的原型鏈

console.log("Person.prototype=");
console.log(Person.prototype);
console.log("Person.prototype === Function.prototype;");    
console.log(Person.prototype === Function.prototype);    //false
console.log("-----分割線-----");

console.log("Person.prototype.constructor === Person:");    //true
console.log(Person.prototype.constructor === Person);    //true
console.log("-----分割線-----");

console.log("Person.prototype.__proto__ === Object.prototype:");    //true
console.log(Person.prototype.__proto__ === Object.prototype);    //true
console.log("-----分割線-----");


console.log("Person.__proto__=");
console.log(Person.__proto__);
console.log("Person.__proto__ === Function.prototype:");
console.log(Person.__proto__ === Function.prototype);    //true
console.log("-----分割線-----");

3.觀察p1實(shí)例對(duì)象涉及到的原型鏈

console.log("p1.prototype=");
console.log(p1.prototype);
console.log("-----分割線-----");

console.log("p1.__proto__=");
console.log(p1.__proto__);
console.log("p1.__proto__ === Person:");
console.log(p1.__proto__ === Person);        //false
console.log("p1.__proto__ === Person.prototype:");
console.log(p1.__proto__ === Person.prototype);        //true
console.log("-----分割線-----");

console.log("p1.__proto__.constructor === Person:");
console.log(p1.__proto__.constructor === Person);
console.log("-----分割線-----");

console.log("p1.__proto__.__proto__=");
console.log(p1.__proto__.__proto__);
console.log("p1.__proto__.__proto__ === Object.prototype:");
console.log(p1.__proto__.__proto__ === Object.prototype);    //true
console.log("-----分割線-----");

4.觀察下p1.showName屬性引用的函數(shù)

console.log("p1.showName.prototype=");
console.log(p1.showName.prototype);

console.log("p1.showName.prototype  === Function.prototype:");    
console.log(p1.showName.prototype  === Function.prototype);    //false
console.log("-----分割線-----");

console.log("p1.showName.prototype.constructor=");
console.log(p1.showName.prototype.constructor);
console.log("-----分割線-----");

console.log("p1.showName.prototype.__proto__=");
console.log(p1.showName.prototype.__proto__);

console.log("p1.showName.prototype.__proto__ === Object.prototype:");    
console.log(p1.showName.prototype.__proto__ === Object.prototype);    //true
console.log("-----分割線-----");

console.log("p1.showName.__proto__=");
console.log(p1.showName.__proto__);
console.log("p1.showName.__proto__ === Function.prototype：");    
console.log(p1.showName.__proto__ === Function.prototype);    //true
console.log("-----分割線-----");

原型鏈圖