原文地址
## 前言

西瓜君之前學習了JS的基礎知識與三座大山，但之後工作中沒怎麼用，印象不太深刻，這次打算再重學一下，打牢基礎。衝鴨~~

原型模式

JS實現繼承的方式是通過原型和原型鏈實現的，JS中沒有類（此處指ES5，ES6中加上了class語法糖）

每個函式都有prototype(原型)屬性，這個屬性是一個指標，指向一個物件，這個物件的用途是包含特定型別的所有例項共享的屬性和方法，即這個原型物件是用來給例項共享屬性和方法的。
而每個例項內部都有一個指向原型物件的指標(proto)。

5個原型規則

1. 所有引用型別(陣列、物件、函式)，都具有物件特性，及可自由擴充套件屬性

舉個栗子
var obj = {
    name:'波妞'
}
console.log(obj)     // { name: '波妞' }
obj.like = '宗介'
console.log(obj)      // { name: '波妞', like: '宗介' }
 

1. **所有的引用型別都有一個__proto__屬性，屬性值是一個普通物件**
   
2. 所有的函式都有一個prototype屬性,屬性值是一個普通物件
3. **所有的引用型別的__proto__指向它建構函式的prototype屬性值**
4. **當試圖獲取一個物件的某個屬性時，如果這個物件本身沒有這個屬性，那麼他會去它的__proto__（即它建構函式的prototype）去找**

原型鏈

理解：每一個引用型別都有__proto__,每一個函式都有prototype,引用型別的__proto__與它建構函式的prototype指向同一個物件；呼叫引用型別時，如果其本身並沒有呼叫的方法或屬性，就會去__proto__（也就是它建構函式的prototype）去找，沒有的話會繼續找prototype的__proto__，到頂級Object的原型指向null為止

function Foo (name, age) {
    this.name = name
}

Foo.prototype.print = function () {
    console.log(this.name)
}

var f = new Foo('波妞')
f.print()   //    波妞

原型鏈繼承的小栗子

function Elem(id) {
    this.elem = document.getElementById(id)
}

Elem.prototype.html = function (val) {
    var elem = this.elem 
    if (val) {
        elem.innerHTML = val
        return this  // 鏈式程式設計
    }else{
        return elem.innerHTML
    }
}

Elem.prototype.on = function (type, fn) {
    var elem = this.elem
    elem.addEventListener(type, fn)
}

var div1 = new Elem('div1')
console.log(div1. html())
 

如有錯誤，請斧正

以