怎樣快速寫一個讓面試官滿意的原型鏈

怎樣快速寫一個讓面試官滿意的原型鏈

我相信不少是看到這個標題進來看這篇文章的，那麼會不會罵我標題黨，哈哈，隨意啦，文章內容重要，標題也是靈魂所在，因此擁有好的一個營銷標題也是很是重要的。

先來了解一下原型的基礎知識點

五條原則須要牢記

• 全部引用類型（函數、對象、數組），都存在對象特性，便可以自由拓展屬性。（除了null意外）
• 全部的引用類型（函數、對象、數組），都有一個_proto_(咱們這裏稱他爲隱形原型)屬性，屬性值是一個普通的對象。
• 全部函數都有一個prototype屬性，屬性值也是一個普通的函數
• 全部的引用類型（函數、對象、數組），__proto__屬性值指向它的構造函數的 prototype(顯性屬性)屬性值。
• 當試圖獲得一個對象的某個屬性時，若是這個對象自己沒有這個屬性，那麼會去它的_proto_（即他的構造函數的prototype）中尋找。若是沒有，則會接着往上找，一直上溯到Object.prototype，也就是說全部對象都繼承Object.prototype的屬性，Object.prototype的原型是null，null沒有任何屬性和方法。

總結了以上幾條規則後，我感悟最深的就是原來JS萬物皆爲NULL,真的是太深奧了。

首先咱們須要瞭解下prototype屬性的做用

咱們經過構造函數實例一個函數後，它內部的屬性和方法只可以它本身用，其餘實例沒法共享到。爲甚呢？

例子

function Animal(type,name) {
	this.name = name;
	this.type = type;
	this.tell = function() {
		console.log('hello')
	}
}
var dog = new Animal('dog','lunky');
var cat = new Animal('cat','miao');
dog.tell === cat.tell//false
複製代碼

那麼該怎麼共享這個tell呢。這時候原型對象就發揮它的做用了，若是咱們在原型定義屬性和方法，那麼這個函數全部的實例就可以共享到在原型上定義的方法或屬性。 例子說明

function Animal(type,name) {
	this.name = name;
	this.type = type;
}
var dog = new Animal('dog','lunky');
var cat = new Animal('cat','miao');
Animal.prototype.color = 'red';
dog.color === cat.color //true
複製代碼

其次須要瞭解下constructor屬性

prototype對象有一個constructor屬性，默認指向prototype對象所在的構造函數

來一個例子

function Example(name){
	this.name = name
}
Example.prototype.constructor === Example //true

複製代碼

有什麼做用呢

經常使用的做用就是constructor能夠得知某個實例的對象，是由哪個構造函數產生的。例如：

function Example(name){
	this.name = name
}
var e = new Example('ha')
e.constructor === Example// true
e.constructor === Date// false
複製代碼

上面實例中咱們就能夠看出，e的構造函數是Example，而不是Date.

來一個貼近工做的例子

平時咱們工做中用到原型的地方，主要是全局註冊一些第三方插件的時候，好比咱們平時用vue寫了一個插件，實例化後而後經過Vue.prototype定義到原型鏈上後，再用Vue.use方法。那麼咱們就能夠全局調用這個方法了。那麼面向面試官的時候，怎麼在幾分鐘內寫一個比較好的例子呢。

//一段HTML走起 
 <div id='example'></div>

//JS
function ElemDom(id) {
	this.elemDom = document.getElementById(id)
};
//定義一個寫入內容的方法
ElemDom.prototype.html = function(val){
	var tempElemDom = this.elemDom;
	if(val){
		tempElemDom.innerHTML = val;
		return this;//這裏爲何要return this
	}else {
		return tempElemDom.innerHTML
	}
}
//定義一個事件
ElemDom.prototype.on = function(type,fn){
	var tempElemDom = this.elemDom;
	tempElemDom.addEventListener(type,fn);
	return this;
}

var divDom = new ElemDom('example');
divDom.html('<p>hello world</p>').on('click',function(){
  console.log('i am coming')
}).html('<h1>footer</h1>')
複製代碼

代碼中return this 是爲了使用方法時可以鏈式調用,是否是看到了JQ寫法的感受。上面的例子看似簡單，可是面試過程當中可以手動寫出來，而後在逐步講解對原型鏈的瞭解，那麼對於面試官來講仍是可以有較好的印象的。但願這篇簡短的文章可以幫助到你。

若是大神您想繼續探討或者學習更多知識，歡迎加入QQ一塊兒探討：854280588

參考文章

• 繼承與原型鏈
• 對象的繼承