快速寫一個讓本身及面試官滿意的原型鏈

這是我參與8月更文挑戰的第7天，活動詳情查看：8月更文挑戰

原型的五條原則

對於這個鐵定的規則，須要牢記，須要牢記，切記，必定要牢記，重要的事情不是說三遍，而是要熟爛於心

• 全部引用類型（函數、對象、數組），都存在對象特性，便可以自由拓展屬性。 （除了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寫法的感受。上面的例子看似簡單，可是面試過程當中可以手動寫出來，而後在逐步講解對原型鏈的瞭解，那麼對於面試官來講仍是可以有較好的印象的。但願這篇簡短的文章可以幫助到你。

---

若是這篇文章幫到了你，記得點贊👍收藏加關注哦😊，但願點贊多多多多...

文中若有錯誤，歡迎在評論區指正