JS三座大山再學習 ---- 原型和原型鏈

本文已發佈在西瓜君的我的博客,原文傳送門
## 前言

西瓜君以前學習了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())

若有錯誤，請斧正

以上

 

出處：https://www.cnblogs.com/bloglixin/p/11912011.html