摘要：寫(xiě)在最前構(gòu)造函數(shù)和原型模式的使用場(chǎng)景很廣泛，但因?yàn)閷?duì)概念的混淆不清導(dǎo)致無(wú)法熟練掌握。換句話說(shuō)，不必在構(gòu)造函數(shù)中定義對(duì)象實(shí)例的信息，而是可以將這些信息直接添加到原型對(duì)象中，比如下面的方法。

寫(xiě)在最前：構(gòu)造函數(shù)和原型模式的使用場(chǎng)景很廣泛，但因?yàn)閷?duì)概念的混淆不清導(dǎo)致無(wú)法熟練掌握。切圖帶你從代碼和流程圖一步步攻克，純干貨，建議收藏詳看，原型模式理解圖非常重要，務(wù)必多看幾遍！

前往查看demo源碼
js基礎(chǔ)（一）：判斷類(lèi)型

構(gòu)造函數(shù)的首字母必須大寫(xiě)，用來(lái)區(qū)分于普通函數(shù)(駝峰命名)，此為約定俗成

構(gòu)造函數(shù)內(nèi)部使用的this對(duì)象，來(lái)指向即將要生成的實(shí)例對(duì)象，而普通函數(shù)中的this指向調(diào)用函數(shù)的對(duì)象（沒(méi)有對(duì)象時(shí)默認(rèn)為window）

構(gòu)造函數(shù)默認(rèn)return this，但也可以用return語(yǔ)句，返回值會(huì)根據(jù)return值的類(lèi)型而有所不同。普通函數(shù)可使用return返回值

構(gòu)造函數(shù)使用New來(lái)生成實(shí)例對(duì)象進(jìn)行調(diào)用，普通函數(shù)直接調(diào)用

// 構(gòu)造函數(shù)
function Person(name, age) {
  this.name = name
  this.age = age
  this.introduction = function() {
    console.log(`my name is ${this.name}, I"m ${this.age} years old`)
  }
  //return this //構(gòu)造函數(shù)默認(rèn)有這句
}
var p = new Person("qietuniu", 18) // this=Person
p.introduction()

// 普通函數(shù)
function person(name, age) {
  this.name = name
  this.age = age
  this.introduction = function() {
    console.log(`my name is ${this.name}, I"m ${this.age} years old`)
  }
  return `直接返回：我的名字 ${this.name}, 我 ${this.age} 歲`
}
console.log(person("qietuniu", 18)) //this=window
window.introduction()

構(gòu)造函數(shù)內(nèi)的上下文this指向即將要生成的實(shí)例對(duì)象Person,普通函數(shù)內(nèi)使用this,指向window時(shí)容易造成全局污染。該構(gòu)造函數(shù)將陪著我們讀完這篇文章，之后的示例將在這基礎(chǔ)上演示!

var a={}是var a=new Object()的語(yǔ)法糖

var a=[]是var a=new Array()的語(yǔ)法糖

function Person(){}是var Person=new Function()的語(yǔ)法糖

語(yǔ)法糖：更簡(jiǎn)單表達(dá)一個(gè)操作的語(yǔ)法，能夠增加程序的可讀性，在性能上不會(huì)帶來(lái)?yè)p失的同時(shí)提高開(kāi)發(fā)編碼的效率，從而減少程序代碼出錯(cuò)的機(jī)會(huì)！

可使用instanceof判斷一個(gè)函數(shù)是否是一個(gè)變量的構(gòu)造函數(shù).

解析:instanceof的判斷邏輯是實(shí)例p的__proto__一層一層往上，能否對(duì)應(yīng)到Person.prototype，同樣也能到Object.prototype.

查看instanceof具體使用>>

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

this指向這個(gè)新對(duì)象

執(zhí)行代碼，即對(duì)this賦值

返回this

解析（以Person函數(shù)為例）：
1.創(chuàng)建一個(gè)新對(duì)象p
2.將構(gòu)造函數(shù)Person()中的this指向新創(chuàng)建的對(duì)象p
3.p的_proto_（隱式原型）屬性指向Person函數(shù)的prototype（顯示原型），創(chuàng)建構(gòu)造函數(shù)與原型以及對(duì)象的關(guān)系
4.調(diào)用對(duì)象，執(zhí)行Person內(nèi)屬性或方法

構(gòu)造函數(shù)Fn的prototype(顯式原型)是原型對(duì)象

構(gòu)造函數(shù)可通過(guò)new實(shí)例化一個(gè)實(shí)例

原型對(duì)象的constructor是構(gòu)造函數(shù)Fn

Person.prototype.constructor = Person 

實(shí)例的構(gòu)造函數(shù)屬性（constructor）指向構(gòu)造函數(shù)

p的__proto__.constructor = Person

實(shí)例的__proto__(隱式原型)是原型對(duì)象

p的__proto__ =Person.prototype 

Fn.prototype是對(duì)象，它的__proto__是object的prototype

Person.prototype的__proto__  = Object.prototype

Object的prototype的__proto__為null

Object.prototype的__proto__  = null
Person.prototype的__proto__的__proto__  = null

熟記該圖，萬(wàn)變不離其宗

1. 所有的引用類(lèi)型（數(shù)組、對(duì)象、函數(shù)），都具有對(duì)象特性，即可自由擴(kuò)展屬性（null除外）

 var obj = {} 
 obj.a = 100 //自由擴(kuò)展屬性
 var arr = []
 arr.a = 100
 function fn() {}
 fn.a = 100

創(chuàng)建對(duì)象的三種方法

// 字面量
var o1 = {
  name: "o1"
}
var o2 = new Object({
  name: "o2"
})

// 構(gòu)造函數(shù)
var M = function() {
  this.name = "o3"
}
var o3 = new M()

// Object.create
var O = {
  name: "o4"
}
var o4 = Object.create(O)
console.log(o1)
console.log(o2)
console.log(o3)
console.log(o4)

2. 所有的引用類(lèi)型（數(shù)組、對(duì)象、函數(shù)），都有一個(gè)__proto__屬性（隱式原型），屬性是一個(gè)普通的對(duì)象

 //隱式原型
 console.log(obj.__proto__)
 console.log(arr.__proto__)
 console.log(fn.__proto__)

3. 所有的函數(shù)，都有一個(gè)prototype屬性（顯式原型），屬性也是一個(gè)普通的對(duì)象

//顯式原型
console.log(fn.prototype)

4. 所有的引用類(lèi)型（數(shù)組、對(duì)象、函數(shù)），_proto_屬性值指向它的構(gòu)造函數(shù)的“prototype”的值

//_proto_屬性值指向它的構(gòu)造函數(shù)的“prototype”的值
console.log(`arr.__proto__ === Array.prototype:${arr.__proto__ === Array.prototype}`)
console.log(`obj.__proto__ === Object.prototype:${obj.__proto__ === Object.prototype}`)
console.log(`fn.__proto__ === Function.prototype:${fn.__proto__ === Function.prototype}`)

5. 當(dāng)試圖得到一個(gè)對(duì)象的某個(gè)屬性時(shí)，如果這個(gè)對(duì)象本身沒(méi)有這個(gè)屬性，那么會(huì)去它的__proto__（即它的構(gòu)造函數(shù)的prototype）中尋找

Person.prototype.sayName = function() {
  console.log(`我的名字：${this.name}`)
}
p.introduction()
p.sayName()

執(zhí)行sayName時(shí)的時(shí)候，對(duì)象p本身沒(méi)有該方法，會(huì)去它的__proto__即它的構(gòu)造函數(shù)的prototype中尋找(p.__proto__或者Person.prototype)，于是找到sayName.

什么是原型對(duì)象

Person這個(gè)構(gòu)造函數(shù)的顯式原型是一個(gè)對(duì)象，簡(jiǎn)稱(chēng)原型對(duì)象。Person.prototype就是原型對(duì)象。
每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象，原型對(duì)象都包含一個(gè)指向構(gòu)造函數(shù)的指針，而實(shí)例都包含一個(gè)指向原型對(duì)象的內(nèi)部指針,即原型對(duì)象（Person.prototype）是 構(gòu)造函數(shù)（Person）的一個(gè)實(shí)例。

Person.prototype = p.__proto__

原型對(duì)象的優(yōu)點(diǎn)

可以 讓所有對(duì)象實(shí)例共享它所包含的屬性和方法。換句話說(shuō)，不必在構(gòu)造函數(shù)中定義對(duì)象實(shí)例的信息，而是 可以將這些信息直接添加到原型對(duì)象中，比如下面的sayName方法。

Person.prototype.sayName = function() {
  console.log(`我的名字：${this.name}`)
}

如何查找對(duì)象自身的屬性

  var item
  for (item in p) {
      // 高級(jí)瀏覽器已經(jīng)在for in中屏蔽了來(lái)自原型的屬性
      // 以下的判斷可保證程序的健壯性,hasOwnProperty方法會(huì)返回一個(gè)布爾值，指示對(duì)象自身屬性中是否具有指定的屬性
      if (p.hasOwnProperty(item)) {
          // 輸出name和printName，沒(méi)有alerName
          console.log(item)
      }
  }

ECMAScript 中描述了原型鏈的概念，并將原型鏈作為實(shí)現(xiàn)繼承的主要方法。其基本思想是利用原型讓一個(gè)引用類(lèi)型繼承另一個(gè)引用類(lèi)型的屬性和方法。

p.toString()是如何調(diào)用的

執(zhí)行toString方法時(shí)，p本身沒(méi)有該方法，p.__proto__也沒(méi)有，繼續(xù)往上p.__proto__.__proto__即Person.prototype.__proto__,Person.prototype就是普通對(duì)象，Person.prototype.__proto__ = Object.prototype,Object中存在toString方法。

原型鏈圖

每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象，原型對(duì)象都包含一個(gè)指向構(gòu)造函數(shù)的指針，而實(shí)例都包含一個(gè)指向原型。對(duì)象的內(nèi)部指針這么一層一層的查找就是原型鏈查找，如此層層遞進(jìn)，就構(gòu)成了實(shí) 例與原型的鏈條，這種鏈?zhǔn)浇Y(jié)構(gòu)叫做“原型鏈“。

jQuery.fn.init.prototype = jQuery.fn,將原型方法為什么放在jQuery.fn中，是因?yàn)橐獢U(kuò)展插件如下面的printQT 方法, 只有$會(huì)暴露在window全局變量（太多會(huì)造成污染），將插件擴(kuò)展統(tǒng)一到j(luò)Query.fn.xxx這一個(gè)接口方便使用。

var jQuery = function() {
  return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
   constructor: jQuery,
   init: function() {
     this.jquery = "1.9.1";
     return this;
   }
 }
 jQuery.fn.init.prototype = jQuery.fn;
 jQuery.fn.printQT = function() {
   console.log("切圖")
   return this;
 }
 window.jQuery = window.$ = jQuery;
 console.log(jQuery().printQT())

除了jquery中的運(yùn)用，在vue中使用諸如echarts的插件時(shí)，我們會(huì)使用Vue.prototype.$echarts = echarts，將echarts引入到全局使用，同樣自定義方法變量也可以如此使用。

尊重原創(chuàng)，如需轉(zhuǎn)載請(qǐng)注明出處！