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: '宗介' }

2. 所有的引用类型都有一个__proto__属性，属性值是一个普通对象
   
3. 所有的函数都有一个prototype属性,属性值是一个普通对象
4. 所有的引用类型的__proto__指向它构造函数的prototype属性值
5. 当试图获取一个对象的某个属性时，如果这个对象本身没有这个属性，那么他会去它的__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())

如有错误，请斧正

以上