作為前端，你需要了解的js建構式和原型

1.1 概述

在典型的OOP的語言中，都存在類的概念，類就是物件的模板，物件就是類的實體，但在ES6之前，JS中并沒有引入類的概念，物件不是基于類創建的，而是用一種建構式的特殊函式來定義物件和它們的特征，

創建物件可以通過以下三種方式：

1. 物件字面量

var obj1 = {}

2. new Object

var obj2 = new Object()

3. 自定義建構式

function Star (name, age) {
	this.name = name
  this.age = age
  this.sing = function() {
  	console.log('我會唱歌')
  }
}
var person = new Star('王源', 20)
person.sing()

1.2 建構式

建構式是一種特殊的函式，主要用來初始化物件，即為物件成員變數賦初始值，它總與new一起使用，我們可以把物件中一些公共屬性和方法抽取出來，然后封裝到這個函式里面

在JS中，使用建構式時，要注意以下幾點：

1. 建構式用于創建某一類物件,其首字母要大寫
2. 實體化物件的時候，建構式要和new一起使用才有意義

new在執行時會做的四件事情：

1. 在記憶體中創建一個新的空物件
2. 讓this指向這個新的物件
3. 執行建構式里面的代碼，給這個新物件添加屬性和方法
4. 回傳這個新物件（所以建構式里面不需要return）

javascript的建構式中可以添加一些成員，可以在建構式本身上添加，也可以在建構式內部的this上添加，
通過這兩種方式添加的成員，就分別稱為靜態成員和實體成員，

• 靜態成員：在建構式本身上添加成員稱為靜態成員，只能由建構式本身來訪問
• 實體成員：在建構式內部通過this創建的物件成員實體稱為實體成員，只能由實體化的物件來訪問
  

1.3建構式的問題

建構式方法好用，但是存在消費記憶體的問題

function Star (name, age) {
	this.name = name
  this.age = age
  this.sing = function() {
  	console.log('我會唱歌')
  }
}
var person1 = new Star('王源', 20)
var person2 = new Star('王俊凱', 21)
console.log(person1.sing === person2.sing) // false,
// 說明兩個記憶體中存在兩個不同的函式，這樣很浪費記憶體，我可以用建構式原型來解決這個問題

1.4 建構式的原型 prototype

建構式通過原型分配的函式是所有物件所共享的，

每一個建構式都有一個prototype屬性，指向另外一個物件，注意這個prototype就是一個物件，這個物件的所有屬性和方法，都會被建構式所擁有，每個通過建構式實體化的物件，都可以呼叫，
我們可以把不變的方法，直接定義在prototype物件上，這樣所有物件的實體就可以共享這些方法

function Star (name, age) {
	this.name = name
  this.age = age
}
Star.prototype.sing = function() {
	console.log('我會唱歌')
} 
var ldh = new Star('劉德華', 20)
var wjk = new Star('王俊凱', 21)
console.log(person1.sing === person2.sing) //true

注意： 一般情況下，我們的公共屬性定義到建構式里面，公共方法放到原型物件身上，

1.5 物件原型__proto__

物件都會有一個屬性 __proto__指向建構式的prototype原型物件，之所以物件可以使用建構式prototype原型物件的屬性和方法，就是因為物件有__proto__原型的存在，

• __proto__物件原型和原型物件prototype是等價的
• __proto__物件原型的意義在于為物件的查找機制提供一個方向，或者說一條路線，但它是一個非標準屬性，因此實際開發中，不可以使用這個屬性，它只是內部指向原型物件prototype

1.6 constructor 建構式

物件原型（proto）和建構式（prototype）原型物件里面都有一個constructor屬性，constructor我們稱為建構式，因為它指回建構式本身，

function Star (name, age) {
	this.name = name
  this.age = age
}

//很多情況下，需要手動的利用constructor這個屬性指回原來的建構式
Star.prototype={
	constructor: Star, //如果不添加這項，則指向了Object建構式
  sing:function() {
	console.log('我會唱歌')
	},
  movie: function() {
  }
}
var ldh = new Star('劉德華', 20)
var wjk = new Star('王俊凱', 21)
console.log(Star.prototype.constructor) //回傳建構式Star
console.log(__proto__.constructor)//回傳建構式Star

注意：如果我們修改了原來的原型物件，給原型物件賦值的是一個物件，則必須手動的利用contructor指回原來的建構式

1.7 建構式、實體、原型物件三者之間的關系

1.8 原型鏈

function Star (name, age) {
	this.name = name
  this.age = age
}
Star.prototype.sing = function() {
	console.log('我會唱歌')
} 
var ldh = new Star('劉德華', 20)
//只要是物件就有__proto__原型，指向原型物件
console.log(star.prototype)
// Star原型物件里面的__proto__原型指向的是 Object.prototype
console.log(star.prototype.__proto__ === Object.prototype) //true
// Object.prototype原型物件里面的__proto__原型，指向為null
console.log(Object.prototype.__proto__) //null

1.9 Javascript的成員查找機制（規則）

1. 當訪問一個物件的屬性（包括方法）時，首先查找這個物件自身有沒有該屬性
2. 如果沒有查找它的原型（也就是__proto__指向的prototype原型物件）
3. 如果還沒有就查找原型物件的原型（Object的原型物件）
4. 依次類推一直找到Object為止（null）

1.10 原型物件this指向

function Star (name, age) {
	this.name = name
  this.age = age
}
var that
Star.prototype.sing = function() {
	console.log('我會唱歌')
  that = this
} 
var ldh = new Star('劉德華', 20)
ldh.sing()
console.log(that === ldh)

1. 在建構式中，里面的this指向的是物件實體
2. 原型物件函式里面的this指向的是實體物件

1.11 擴展內置物件

可以通過原型物件，對原來的內置物件進行擴展自定義的方法，比如給陣列添加自定義求偶數和的功能，

總結：

這篇文章主要分享了建構式、原型物件、實體物件等方面的知識，本篇文章圖來自視頻截圖，這僅代表個人觀點，如有沖突，請多指出，

標籤：JavaScript

上一篇：ES6學習筆記（三）：教你用js面向物件思維來實作 tab欄增刪改查功能

下一篇：前端的一些性能提升