Web前端------JS原型、原型链详解
转载至: JS原型链详解
JS是基于对象的语言，原型对象是其模拟面向对象的一种方式，关于原型有两种表现形式：一种是proto （隐式原型） 一种是prototype（显式原型），这两个名词形成了原型链的爱恨情仇。
下面我们看下这两个原型出自哪里，比较重要
20180117175625876.png
20180117175938042.png
20180117192849064.png
下面的图片是从知乎上面弄下来的祖传老图，被我挖过来了
20180117174025900.png
下面总（chao）结（xi）了几条原型的概念，然后就不难理解上面的这幅图了
1 . 任何对象都拥有 proto(隐式原型) 属性, 一般指向他们的构造函数的原型 (prototype) .
var a = new Array ()
// a 是一个数组对象 默认拥有__proto__ 属性
console.log(a.__proto__ === Array.prototype); // true
2 . 原型链的顶端是Object.prototype，其 proto为 null
console.log(Object.prototype.__proto__ === null); // true
3 . 所有函数都拥有prototype （显式原型）属性
同最上面的图，实例(对象/构造函数new 出来的东西)存在proto,函数/方法存在prototype（万物皆对象，也存在proto,指向下面的Function）
4 . 所有函数都是Function 的 实例
function fn () {
}
// fn 是 Function 构造函数创建出来的
console.log(fn.__proto__ === Function.prototype); // true
console.log(obj.__proto__ === Object.prototype); // true
console.log(arr.__proto__ === Array.prototype); // true
5 . Object Function Array 本身也都是一个函数，由于是最常用的，所以JavaScript帮我们实现了
// 当我们通过构造函数的方式来创建一个对象 ，其本质也是new一个普通的函数
// 因此可以得出
console.log(Function.__proto__ === Function.prototype); // true
console.log(Object.__proto__ === Function.prototype ); // true
console.log(Array.__proto__ === Function.prototype); // true
6 . 原型对象中又拥有constructor属性,该属性指向函数本身,这个好理解（constructor为构造器，不修改的情况下prototype.constructor等于自己）
console.log(Function.prototype.constructor === Function); // true
console.log(Object.prototype.constructor === Object); // true
console.log(Array.prototype.constructor === Array); // true
7 . 原型链 概念
如果想要找到一个对象的属性,首先会先在自身查找,如果没有,就会通过proto属性一层层的向上查找,直到原型链的顶端 Object.prototype(proto: null），这种通过某种纽带(proto)将对象之间形成一种继承关系 这种关系呈现出一种链条的形状 将这种链条称之为原型链
function foo(name) {
this.name = name;
}
foo.prototype = {
showName: function() {console.log(this.name)}
}
var zyc = new foo('zyc');
zyc.showName = function(){ console.log('superMan') };
zyc.showName(); // superMan
// 删除了本身属性，查构造函数的prototype，不行再去查Object和Function的prototype
delete zyc.showName;
zyc.showName(); // zyc
8 . 根据第 6 条可以推论得:
console.log(fn.constructor===Function); // true
// fn自身并没有constructor属性,所以他会顺着原型链向上找
// fn.__proto__ 指向的是 Function.prototype 见第4
// Function.prototype.constructor === Function
console.log(Function.constructor === Function); // true
console.log(Object.constructor === Function); //true
9 . Function.prototype.proto === Object.prototype
Function是一个特殊的例子 他创造了所有的函数,但他自身就是也是一个函数 总不能自己创造自己吧 所以他的上级是 Object.prototype
