JavaScript中原型与原型链的简单理解
原型和原型链是JavaScript中一个比较难理解的概念,什么是prototype?什么是proto?什么是构造函数?
讲原型和原型链,如果是讲定义,那很是晦涩难懂,今天我们就通俗易懂的说说原型与原型链。还需要借助阮老师的“Javascript继承机制的设计思想”。
1 构造函数
在讲原型和原型链之前,我们简单说下什么是构造函数,在 JavaScript 中,用 new 关键字来调用的函数,称为构造函数。任何的函数都可以作为构造函数存在,构造函数首字母一般大写。看看我们常用构造函数:
var arr = []; // var arr = new Array();
var obj = {}; // var obj = new Object();
var date = new Date();
那我们知道了什么是构造函数,那我们还应该知道它的作用,我们举个例子,比如有个班级,班级里有50人,老师把这50人的信息录入系统,信息可能包含姓名、年龄、性别、身高、体重、联系方式及各科成绩等,普通方式,我们可以这么处理,每个人都建个对象,对象包含这些信息。
var lisi = { name: '李四', age: 6, gender: '男', address: 'xxxx' };
var zhangsan = { name: '张三', age: 6, gender: '女', address: 'xxxx' };
var wangwu = { name: '王五', age: 6, gender: '女', address: 'xxxx' };
...
上面这种写法,我们会发现做了很多重复的事情,每个人都有名字、年龄等信息,其实我们就可以把这些提取出来。
function Person(name, gender, address) {
this.name = name;
this.gender = gender;
this.address= address;
...
}
然后就可以实例化学生。
var lisi = new Person('李四', 6, 'xxx');
var zhangsan = new Person('张三', 6, 'xxx');
var wangwu = new Person('王五', 6, 'xxx');
...
在使用对象字面量创建一系列同一类型的对象时,这些对象可能具有一些相似的特征(属性)和行为(方法),此时会产生很多重复的代码,而使用构造函数就可以实现代码复用。说到这应该可以理解构造函数的作用了。接下来我们说说原型。
2 原型
接上例子,比如我们还要针对学生统计每个人的总分是多少,我们改造构造函数Person,构造函数上有个 prototype属性,这个属性就是这个构造函数的原型(显式原型),这个原型是函数特有,prototype对象默认有两个属性,constructor属性和__proto__属性。constructor,这个属性包含了一个指针,指回原构造函数。__proto__属性我们下面详细说。
prototype作用就是共享和继承。
共享:学生都是一班的
Person.prototype.class = "一班"
继承:所有实例化的都可以调用这个方法统计分数
Person.prototype.statistical = function () {
return this.yw + this.sx + this.yy
}
实例化的学生对象都可以调用statistical
lisi.statistical()
通过控制台输出,我们可以看到我们实例化的对象,有个__proto__属性,这个属性就是隐式原型,这个__proto__是所有对象都有的属性,
这个__proto__属性指向我们的构造函数的prototype,我们通过===(全等)测试
借用网上一张图,理下构造函数、原型对象、实例的关系。
3 原型链
从上面这张图,我们可以看到原型链的影子,由于JavaScript的一切都是对象(除undefined),又由于所有对象都有__proto__属性,__proto__又指向构造函数的prototype,当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。
原型链,说明是链式,而不是环,说明有终点,它的终点是null
4 总结
prototype是函数的原型对象,即prototype是一个对象,它会被对应的__proto__引用。__proto__是所有对象都有的属性,通过__proto__的链式查找,可以形成原型链,原型链的终点是null。
本文来自「青年码农」公众号,作者:青年码农,转载请注明原文链接:https://www.cnblogs.com/nmgwap/p/16331576.html