JavaScript 語言本身的設(shè)計(jì)缺陷，誤打誤撞，成了解釋最為徹底的“世界原本的樣子”的計(jì)算機(jī)編程語言;

——西嶺《凡人凡語》

Everything is object (萬物皆對象)，JS 語言中將一切都視為 對象 。

JavaScript 語言的對象體系，不基于“類” 創(chuàng)建對象，是基于構(gòu)造函數(shù)(constructor)和原型鏈(prototype)。

簡單方式創(chuàng)建對象

我們可以直接通過 new Object() 創(chuàng)建：

var person = new Object() 
person.name = 'Jack' 
person.age = 18 
 
person.sayName = function () { 
    console.log(this.name) 
} 

字面量方式創(chuàng)建對象

每次創(chuàng)建通過 new Object() 比較麻煩，所以可以通過它的簡寫形式對象字面量來創(chuàng)建：

var person = { 
  name: 'Jack', 
  age: 18, 
  sayName: function () { 
    console.log(this.name) 
  } 
} 

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

JavaScript 語言使用構(gòu)造函數(shù)作為對象的模板。

所謂 "構(gòu)造函數(shù)"，就是一個(gè)普通的函數(shù)，只不過我們專門用它來生成對象，這樣使用的函數(shù)，就是構(gòu)造函數(shù)。

它提供模板，描述對象的基本結(jié)構(gòu)。一個(gè)構(gòu)造函數(shù)，可以生成多個(gè)對象，這些對象都有相同的結(jié)構(gòu)。

function Person (name, age) { 
  this.name = name 
  this.age = age 
  this.sayName = function () { 
    console.log(this.name) 
  } 
} 
 
var p1 = new Person('Jack', 18) 
p1.sayName() // => Jack 
 
var p2 = new Person('Mike', 23) 
p2.sayName() // => Mike 

解析構(gòu)造函數(shù)代碼的執(zhí)行

在上面的示例中，使用 new 操作符創(chuàng)建 Person 實(shí)例對象;

以這種方式調(diào)用構(gòu)造函數(shù)會(huì)經(jīng)歷以下 5 個(gè)步驟：

• 創(chuàng)建一個(gè)空對象，作為將要返回的對象實(shí)例。
• 將這個(gè)空對象的原型，指向構(gòu)造函數(shù)的prototype屬性。先記住，后面講
• 將這個(gè)空對象賦值給函數(shù)內(nèi)部的this關(guān)鍵字。
• 執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼。
• 返回新對象 (this)

function Person (name, age) { 
  // 當(dāng)使用 new 操作符調(diào)用 Person() 的時(shí)候，實(shí)際上這里會(huì)先創(chuàng)建一個(gè)對象 
  // 然后讓內(nèi)部的 this 指向新創(chuàng)建的對象 
  // 接下來所有針對 this 的操作實(shí)際上操作的就是剛創(chuàng)建的這個(gè)對象 
 
  this.name = name 
  this.age = age 
  this.sayName = function () { 
    console.log(this.name) 
  } 
 
  // 在函數(shù)的結(jié)尾處會(huì)將 this 返回，也就是這個(gè)新對象 
} 

構(gòu)造函數(shù)和實(shí)例對象的關(guān)系

構(gòu)造函數(shù)是根據(jù)具體的事物抽象出來的抽象模板，實(shí)例對象是根據(jù)抽象的構(gòu)造函數(shù)模板得到的具體實(shí)例對象。

實(shí)例對象由構(gòu)造函數(shù)而來，一個(gè)構(gòu)造函數(shù)可以生成很多具體的實(shí)例對象，而每個(gè)實(shí)例對象都是獨(dú)一無二的。

每個(gè)對象都有一個(gè) constructor 屬性，該屬性指向創(chuàng)建該實(shí)例的構(gòu)造函數(shù)。

反推出來，每一個(gè)對象都有其構(gòu)造函數(shù)

console.log(p1.constructor === Person) // => true 
console.log(p2.constructor === Person) // => true 
console.log(p1.constructor === p2.constructor) // => true 

因此，我們可以通過實(shí)例對象的 constructor 屬性判斷實(shí)例和構(gòu)造函數(shù)之間的關(guān)系。

構(gòu)造函數(shù)存在的問題

以構(gòu)造函數(shù)為模板，創(chuàng)建對象，對象的屬性和方法都可以在構(gòu)造函數(shù)內(nèi)部定義。

function Cat(name, color) { 
  this.name = name; 
  this.color = color; 
  this.say = function () { 
    console.log('hello'+this.name,this.color); 
  }; 
} 
var cat1 = new Cat('貓', '白色');  
var cat2 = new Cat('貓', '黑色');  
cat1.say(); 
cat2.say(); 

在該示例中，從表面上看好像沒什么問題，但是實(shí)際上這樣做，有一個(gè)很大的弊端。那就是對于每一個(gè)實(shí)例對象， name 和 say 都是一模一樣的內(nèi)容，每一次生成一個(gè)實(shí)例，都必須為重復(fù)的內(nèi)容，多占用一些內(nèi)存，如果實(shí)例對象很多，會(huì)造成極大的內(nèi)存浪費(fèi)。

那么，能不能將相同的內(nèi)容，放到公共部分，節(jié)約計(jì)算機(jī)資源呢?

原型

JavaScript 的每個(gè)對象都會(huì)繼承一個(gè)父級(jí)對象，父級(jí)對象稱為 原型 (prototype) 對象。

原型也是一個(gè)對象，原型對象上的所有屬性和方法，都能被子對象 (派生對象) 共享，通過構(gòu)造函數(shù)生成實(shí)例對象時(shí)，會(huì)自動(dòng)為實(shí)例對象分配原型對象。而每一個(gè)構(gòu)造函數(shù)都有一個(gè)prototype屬性，這個(gè)屬性就是實(shí)例對象的原型對象。

null 沒有自己的原型對象。

這也就意味著，我們可以把所有對象實(shí)例需要共享的屬性和方法直接定義在構(gòu)造函數(shù)的 prototype 屬性上，也就是實(shí)例對象的原型對象上。

function Cat(color) { 
  this.color = color; 
} 
 
Cat.prototype.name = "貓"; 
Cat.prototype.sayhello = function(){ 
    console.log('hello'+this.name,this.color); 
} 
Cat.prototype.saycolor = function (){ 
    console.log('hello'+this.color); 
} 
 
var cat1 = new Cat('白色');  
var cat2 = new Cat('黑色');  
cat1.sayhello(); 
cat2.saycolor(); 

這時(shí)所有實(shí)例對象的 name 屬性和 sayhello() 、saycolor 方法，其實(shí)都是在同一個(gè)內(nèi)存地址的對象中，也就是構(gòu)造函數(shù)的 prototype 屬性上，因此就提高了運(yùn)行效率節(jié)省了內(nèi)存空間。

原型及原型鏈