0%

原型与原型链


在之前的博客中有分享过原型的概念,但是绝对原型和原型链还是容易混淆,所以再深入的研究一下

原型的概念

在说构造函数之前,我们先来探讨一下我们之前博客中提到的原型, 什么是原型?

在JavaScript中,通过原型可以实现对象的属性继承,这时候就有一个问题,我们没有定义原型,原型是怎么来的?
之前说过,在H5中,一切皆为对象,所以函数也是一种对象,javascript默认的给函数一个属性——prototype。
这个prototype的属性值是一个对象(属性的集合,再次强调!),默认的只有一个叫做constructor的属性,指向这个函数本身。

注意这个prototype属性,这是只有函数才拥有的,其他的对象也有原型使用的是(proto)

prototype 与 proto 的区别

就像之前说的一样, prototype是函数才有的属性,而_proto_是每个对象都有的属性,但_proto_不是一个规范的属性,只是部分的浏览器实现了此属性

我举个简单的例子:

Person(这是一个构造函数)  --- prototype--->  Person.prototype(原型)

person(构造函数初始化的对象)--- _proto_ ---> Person.prototype(原型)

这就是prototype与_proto_不同的用法

原型链的概念

为什么会产生原型链?是因为原型本身也是一个对象,它也有自身的_proto_属性,这样的链式结构,就组成了一个原型链,并且最终会指向Null

其实只要弄懂_proto_属性指向谁,原型链就很好理解了

这里附上一个小demo

1
2
3
4
5
6

var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}(即构造器function A 的原型对象)
console.log(a.__proto__.__proto__); //Object {}(即构造器function Object 的原型对象)
console.log(a.__proto__.__proto__.__proto__); //null

以上就是我对原型与原型链的一些理解,不足之处希望大牛们多提一些意见,感激不尽

-------------本文结束感谢您的阅读-------------
没办法,总要恰饭的嘛~~