关于js原型链的问题,网上的文章有很多,但是大多数对于初学者来说晦涩难懂。没有结合实例,看起来总是没有什么概念,以下是我结合一个简单的例子,绘出的原型图,如有不对,欢迎指正。
代码
代码很简单,一个构造函数,一个通过构造函数new出来的对象实例,一个直接new的出来对象,和一个函数体
function A(){
this.c=3;
this.d=4;
}
var a = new A();
var b = new Object();
var c = function () {console.log('c')}
我们来研究一下他们的原型(下图是以浏览器中测试结果为依据绘出)
蓝色线条为对象查找属性的原型链路径,我们可以看到,不管是函数还是对象,最终都都集中到了Object.prototype
上。说明我们一但在object.prototype
上增加一个属性,那么下面所有的对象都能查到该属性
Object.prototype.test = 666
A.test //666
a.test //666
b.test //666
c.test //666
同理如果在构造函数A上增加一个方法,那么实例a,就会具有这个方法。
这种写法我们会经常看到。例如给vue增加一个全局方法可以这么写
Vue.prototype.$http = axios
从图上我们可以看出函数和普通对象的区别,普通对象是通过__proto__
查找原型链,而函数是通过prototype
查找