理解JavaScript（2）：JavaScript原型和原型链

JavaScript原型和原型链

  虽然看了许多有关原型和原型链的博客，但单独拎出这个两个词出来，能想起来的却是“我懵懵懂懂过了一年，这一年似乎没有改变…空空如也”，于是整理思绪，记下自己的理解。

原型和原型链由来

  请参考阮一峰大佬的文章JavaScript继承机制的设计思绪

JavaScript中的对象

  我们认为JavaScript中所有的变量和值都是对象，JavaScript的内置对象有Object、Function、String、Array、Date、Number、Boolean、RegExp、Math之类的。这些对象的prototype属性（Math除外）都是一个匿名函数，我们可以通过new 关键字关键各个对象的实例。所以对象又可以分为普通对象和函数对象，普通对象由通过实例化函数对象得到。

Function Foo(name, age) {
    this.name = name;
    this.age = age;
    this.class = 'class-1';
    //return this; //默认有这一行
}
var f = new Foo(‘zhangsan’, 20);
// var f1 = new Foo(‘list’, 22); // 创建多个对象
// var a = {}; // 其实是var a = new Object()的语法糖
// var a = []; // 其实是var a = new Array()的语法糖
// function Foo(){…}其实是var Foo = new Function(…)

显示原型(prototype)和隐式原型(proto)

  所有的函数，都有一个prototype属性，属性值是一个对象，如果把函数看作一个类，该对象属性就是该类的共有属性，该对象的方法就是该类的公有方法，称为显示原型。
  所有的引用类型(数组、对象、函数…)都有一个proto属性，属性值是一个对象，称为隐式原型

原型规则

• 所有的引用都具有对象特性，即可自由的扩展属性(null除外)
• 所有的引用类型，_proto_属性值指向它的构造函数的属性值
• 构造函数的prototype属性值的constructor属性指向构造函数本身，构造函数本身也是一个对象
• 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的_proto_(即他的构造函数的prototype中去找)，直到找到或构造函数的prototype为空

原型链形成

  有了以上基础知识，结合下图以及下面的代码就不难理解原型链如何形成了。

function Foo () {
    this.name = 'test function';
}
var f1 = new Foo();
var f2 = new Foo();
console.log(f1.prototype); // undefined (函数的实例化对象没有prototype)
console.log(f1.__proto__ === Foo.prototype); // true (对象的隐式原型指向构造函数的显示原型)
console.log(f1.__proto__) // Object {}(对象的隐式原型即构造函数的显示原型是一个普通对象)
console.log(Foo.prototype.constructor) //function Foo () {...} 构造函数的显示原型对象的consturctor属性指向构造函数本身（构造函数也是一个对象）
console.log(Foo.prototype.__proto__ === Object.prototype) // true 该普通对象的构造函数是Object
console.log(Foo.__proto__ === Function.prototype) // true 构造函数的隐式原型指向Function的显示原型
// 根据规则按照图中一步步推即可

图片来源

其他

• 屏蔽来自原型中的属性

var f = new Dog() //本文没有定义dog对象只是用来举例说明
for (var item in f) {
    if (f.hasOwnProperty(item)) {
        // do something...
    }
} 

• 通过原型封装一个dom操作

function Elem (id) {
    this.elem = doucment.getELementById(id);
}
Elem.prototype.html = function (val) {
    var elem = this.elem;
    if (val) {
        // val == null 相当于 val === null || val === undefined
        // 除了属性存不存在可以用==，其他全用===
        elem.innerHTML = val;
        return this; // 链式操作
    } else {
        return elem.innerHTML;
    }
};
Elem.prototype.on = function (type, fn) {
    // 对type和fn进行判断
    var elem = this.elem;
    elem.addEventListener(type, fn);
    return this;
}
// ...