磨人的小妖精----原型链

引言

其实很早我就接触了原型链,可是一直是似懂非懂,实习或者是做项目经常性写一些业务代码也没有用上,但是原型链这个东西是JavaScript的精髓,我一定要弄懂,嘤嘤嘤

话不多说开始吧

首先需要看一张相当经典的图!
在这里插入图片描述
这张图看起来有点乱,但其实条例时十分清晰的。

对象、函数以及原型之间的关系

对象:在JavaScript中,人和事是存在的东西都是对象(包括函数也是一个对象),我们平时new出来的对象,看似是由函数实例出来的,但是其实是个假象。
第一个概念:JavaScript中的所有对象并不是说是构造函数实例化(new)而来的,JavaScript中存在构造函数的概念,但是实例化是不存在的。其实JavaScript对象是产生于构造函数的原型属性中
但是对象并不等于构造函数的原型属性,他们并不是相等的。

var A=function(){
}
var a=new A();
console.log(a===A.prototype)//输出false

oh~那么那么它们是个什么关系呢?据资料讲,这个关系造作克隆,每个对象都会有一个,JavaScript中给我们保留了一个属性去维持这个关系,
那就死__proto__。

var A=function(){
}
var a=new A();
console.log(a.__proto__===A.prototype)//输出true

这也就是为什么,我们在构造函数的原型属性上写的方法和属性能够被当前创建的对象访问的原因,这个__proto__起了十分大的作用。

原型链

console.log(typeof A.prototype);//输出object

继续之前的例子,我们输出A的原型属性,发现是个object,对象!!那么跟之前有类似了,他的构造函数是谁?

console.log(A.__proto__===Function.prototype);//输出true
console.log(A.__proto__.__proto__===Object.prototype);//输出true

就这样一条原型链就能够顺清楚了。

console.log(Object.prototype.__proto__);//null

原型链的最顶端是null!
其实执行typeof null也会是对象,其实它不仅仅是对象,他还是整个JavaScript体系的最上一级,所有的JavaScript对象都是由它一级一级克隆下来的!
补充一张图片(见过最简单易懂的图了,但是注意,在原型链上查找的时候是不会查找自身的原型链的!):
在这里插入图片描述

拓展

我们将对象的创建再细化一下!
在这里插入图片描述
直接上例子看看:

/*1、字面量方式*/
var a = {};
console.log(a.__proto__);  //Object {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*2、构造器方式*/
var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*3、Object.create()方式*/
var a1 = {a:1}
var a2 = Object.create(a1);
console.log(a2.__proto__); //Object {a: 1}

console.log(a2.__proto__ === a2.constructor.prototype); //false(此处即为图1中的例外情况)

结语

啊哈哈哈哈哈哈哈哈哈哈终于把你顺清楚了,你个原型链哈哈哈哈哈哈哈哈哈哈哈哈哈。
小建议就是,一定要自己动手!!印象更加深刻!!!!

参考资料

js原型链如何简单理解
三张图搞懂JavaScript的原型对象与原型链

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章