摘要：寫在最前構(gòu)造函數(shù)和原型模式的使用場景很廣泛，但因?yàn)閷Ω拍畹幕煜磺鍖?dǎo)致無法熟練掌握。換句話說，不必在構(gòu)造函數(shù)中定義對象實(shí)例的信息，而是可以將這些信息直接添加到原型對象中，比如下面的方法。

寫在最前：構(gòu)造函數(shù)和原型模式的使用場景很廣泛，但因?yàn)閷Ω拍畹幕煜磺鍖?dǎo)致無法熟練掌握。切圖帶你從代碼和流程圖一步步攻克，純干貨，建議收藏詳看，原型模式理解圖非常重要，務(wù)必多看幾遍！

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

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

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

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

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

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

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

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

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

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

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

查看instanceof具體使用>>

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

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

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

返回this

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

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

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

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

Person.prototype.constructor = Person 

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

p的__proto__.constructor = Person

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

p的__proto__ =Person.prototype 

Fn.prototype是對象，它的__proto__是object的prototype

Person.prototype的__proto__  = Object.prototype

Object的prototype的__proto__為null

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

熟記該圖，萬變不離其宗

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

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

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

// 字面量
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. 所有的引用類型（數(shù)組、對象、函數(shù)），都有一個(gè)__proto__屬性（隱式原型），屬性是一個(gè)普通的對象

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

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

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

4. 所有的引用類型（數(shù)組、對象、函數(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è)對象的某個(gè)屬性時(shí)，如果這個(gè)對象本身沒有這個(gè)屬性，那么會(huì)去它的__proto__（即它的構(gòu)造函數(shù)的prototype）中尋找

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

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

什么是原型對象

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

Person.prototype = p.__proto__

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

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

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

如何查找對象自身的屬性

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

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

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

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

原型鏈圖

每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對象，原型對象都包含一個(gè)指向構(gòu)造函數(shù)的指針，而實(shí)例都包含一個(gè)指向原型。對象的內(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)載請注明出處！