我相信很多是看到這個(gè)標(biāo)題進(jìn)來看這篇文章的黍判，那么會不會罵我標(biāo)題黨，哈哈篙梢，隨意啦顷帖，文章內(nèi)容重要，標(biāo)題也是靈魂所在，所以擁有好的一個(gè)營銷標(biāo)題也是非常重要的窟她。
先來了解一下原型的基礎(chǔ)知識點(diǎn)
五條原則需要牢記
- 所有引用類型（函數(shù)、對象蔼水、數(shù)組）震糖，都存在對象特性，即可以自由拓展屬性趴腋。（除了null意外）
- 所有的引用類型（函數(shù)吊说、對象、數(shù)組）优炬，都有一個(gè)_proto_(我們這里稱他為隱形原型)屬性颁井，屬性值是一個(gè)普通的對象。
- 所有函數(shù)都有一個(gè)prototype屬性蠢护，屬性值也是一個(gè)普通的函數(shù)
- 所有的引用類型（函數(shù)雅宾、對象、數(shù)組）葵硕，_proto_屬性值指向它的構(gòu)造函數(shù)的 prototype(顯性屬性)屬性值眉抬。
- 當(dāng)試圖得到一個(gè)對象的某個(gè)屬性時(shí)，如果這個(gè)對象本身沒有這個(gè)屬性懈凹，那么會去它的_proto_（即他的構(gòu)造函數(shù)的prototype）中尋找蜀变。如果沒有，則會接著往上找介评，一直上溯到Object.prototype库北，也就是說所有對象都繼承Object.prototype的屬性，Object.prototype的原型是null们陆，null沒有任何屬性和方法寒瓦。
總結(jié)了以上幾條規(guī)則后，我感悟最深的就是原來JS萬物皆為NULL,真的是太深奧了棒掠。
首先我們需要了解下prototype屬性的作用
我們通過構(gòu)造函數(shù)實(shí)例一個(gè)函數(shù)后孵构，它內(nèi)部的屬性和方法只能夠它自己用，其他實(shí)例無法共享到烟很。為甚呢颈墅？
例子
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
那么該怎么共享這個(gè)tell呢。這時(shí)候原型對象就發(fā)揮它的作用了雾袱，如果我們在原型定義屬性和方法恤筛，那么這個(gè)函數(shù)所有的實(shí)例就能夠共享到在原型上定義的方法或?qū)傩浴?br> 例子說明
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對象有一個(gè)constructor屬性，默認(rèn)指向prototype對象所在的構(gòu)造函數(shù)
來一個(gè)例子
function Example(name){
this.name = name
}
Example.prototype.constructor === Example //true
有什么作用呢
常用的作用就是constructor可以得知某個(gè)實(shí)例的對象芹橡，是由哪一個(gè)構(gòu)造函數(shù)產(chǎn)生的毒坛。例如：
function Example(name){
this.name = name
}
var e = new Example('ha')
e.constructor === Example// true
e.constructor === Date// false
上面實(shí)例中我們就可以看出，e的構(gòu)造函數(shù)是Example，而不是Date.
來一個(gè)貼近工作的例子
平時(shí)我們工作中用到原型的地方煎殷，主要是全局注冊一些第三方插件的時(shí)候屯伞，比如我們平時(shí)用vue寫了一個(gè)插件，實(shí)例化后然后通過Vue.prototype定義到原型鏈上后豪直，再用Vue.use方法劣摇。那么我們就可以全局調(diào)用這個(gè)方法了。那么面向面試官的時(shí)候弓乙，怎么在幾分鐘內(nèi)寫一個(gè)比較好的例子呢末融。
//一段HTML走起
<div id='example'></div>
//JS
function ElemDom(id) {
this.elemDom = document.getElementById(id)
};
//定義一個(gè)寫入內(nèi)容的方法
ElemDom.prototype.html = function(val){
var tempElemDom = this.elemDom;
if(val){
tempElemDom.innerHTML = val;
return this;//這里為什么要return this
}else {
return tempElemDom.innerHTML
}
}
//定義一個(gè)事件
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 是為了使用方法時(shí)能夠鏈?zhǔn)秸{(diào)用,是不是看到了JQ寫法的感覺。上面的例子看似簡單暇韧，但是面試過程中能夠手動寫出來勾习，然后在逐步講解對原型鏈的了解，那么對于面試官來說還是能夠有較好的印象的懈玻。希望這篇簡短的文章能夠幫助到你巧婶。
如果大神您想繼續(xù)探討或者學(xué)習(xí)更多知識，歡迎加入QQ一起探討：854280588
參考文章
