秒懂JS對象、構造器函數和原型對象之間的關係

學習JS的過程當中，想要掌握面向對象的程序設計風格，對象模型（原型和繼承）是其中的重點和難點，拜讀了各種經典書籍和各位前輩的技術文章，感受都太太高深，花費了很多時間才搞明白（我的智商是硬傷/(ㄒoㄒ)/~~），這裏略做總結儘可能通俗易懂。

1、基本概念

　　一、對象：屬性和方法的集合，即變量和函數的封裝。每一個對象都有一個__proto__屬性，指向這個對象的構造函數的原型對象。

　　二、構造器函數：用於建立對象的函數，經過new關鍵字生成對象。函數名通常首字母大寫的。

　　三、原型對象：每一個函數都有一個prototype屬性，它是一個指向原型對象的指針（原型對象在定義函數時同時被建立）

 

2、建立對象的方法

　　一、使用構造函數和原型對象共同建立

如上圖，構造器函數Person()，經過new關鍵字建立了兩個實例化對象p一、p2，這兩個新對象都繼承了，構造器Person()函數prototype屬性所指向的原型對象。經過構造函數建立實例對象p1和p2的時候，其中name、age、job這些是經過構造函數生成的（本地部分），sayName方法是經過繼承原型對象來實現共享的（遠程部分），這樣多個實例對象都是由本地（私有）和遠程（共享）兩部分組成。仍是不清楚，不要緊咱們上代碼。

function Person(name, age, job){//構造器函數
    this.name = name;
    this.age = age;
    this.job = job;
}
Person.prototype = {//設置構造器函數prototype指定的對象，即重置原型對象
    constructor : Person,
    sayName : function(){alert(this.name);}
}
var p1 = new Person("Tom", 29, "Teacher");//實例化對象p1
//{name:"Tom",age:29,job:"Teacher",__proto__:object}，object即原型對象：Person.prototype指向的對象
var p2 = new Person("Jack", 27, "Doctor");//實例化對象p2
//{name:"Jack",age:27,job:"Doctor",__proto__:object}

 

　　二、僅使用原型對象建立

如上圖，使用Object.create方法從原型對象直接生成新的實例對象，新對象p1繼承原型對象的屬性和方法，可是這裏沒有用到構造函數


var person={ classname:'human'}//將這個對象當作原型
var p1=Object.create(person)//生成實例對象
console.log(p1.classname)//human，至關於p1.__proto__.classname

這樣表述仍是感受有些生硬，來點更形象的比喻吧~

構造函數是媽，原型對象是爸，實例對象是孩子。媽讓每一個孩子擁有私有能力，爸讓它們擁有共有能力（這個共有能力其實都是爸代勞的/(ㄒoㄒ)/~~）；沒有構造函數的狀況下，能夠直接理解爲克隆哦~怎麼樣，這樣應該能理解三者之間的關係了吧。

 

固然建立對象的方法遠不止這兩種，這裏有九種建立對象方法，oh no？我只想要個對象，爲何這麼複雜？爲了優化代碼，這個理由足夠吧。