前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >JavaScript中原型与原型链的简单理解

JavaScript中原型与原型链的简单理解

作者头像
青年码农
发布2021-03-23 15:08:06
发布2021-03-23 15:08:06
40800
代码可运行
举报
文章被收录于专栏:青年码农青年码农
运行总次数:0
代码可运行

原型和原型链是JavaScript中一个比较难理解的概念,什么是prototype?什么是proto?什么是构造函数?

讲原型和原型链,如果是讲定义,那很是晦涩难懂,今天我们就通俗易懂的说说原型与原型链。还需要借助阮老师的“Javascript继承机制的设计思想”。

1 构造函数

在讲原型和原型链之前,我们简单说下什么是构造函数,在 JavaScript 中,用 new 关键字来调用的函数,称为构造函数。任何的函数都可以作为构造函数存在,构造函数首字母一般大写。看看我们常用构造函数:

代码语言:javascript
代码运行次数:0
运行
复制
var arr = []; // var arr = new Array(); 
var obj = {}; // var obj = new Object();  
var  date = new Date();

那我们知道了什么是构造函数,那我们还应该知道它的作用,我们举个例子,比如有个班级,班级里有50人,老师把这50人的信息录入系统,信息可能包含姓名、年龄、性别、身高、体重、联系方式及各科成绩等,普通方式,我们可以这么处理,每个人都建个对象,对象包含这些信息。

代码语言:javascript
代码运行次数:0
运行
复制
var lisi = { name: '李四', age: 6, gender: '男', address: 'xxxx' };
var zhangsan = { name: '张三', age: 6, gender: '女', address: 'xxxx' };
var wangwu = { name: '王五', age: 6, gender: '女', address: 'xxxx' };
...

上面这种写法,我们会发现做了很多重复的事情,每个人都有名字、年龄等信息,其实我们就可以把这些提取出来。

代码语言:javascript
代码运行次数:0
运行
复制
function Person(name, gender, address) {
    this.name = name;
    this.gender = gender;
    this.address= address;
    ...
}

然后就可以实例化学生。

代码语言:javascript
代码运行次数:0
运行
复制
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作用就是共享和继承。

共享:学生都是一班的

代码语言:javascript
代码运行次数:0
运行
复制
Person.prototype.class = "一班"

继承:所有实例化的都可以调用这个方法统计分数

代码语言:javascript
代码运行次数:0
运行
复制
Person.prototype.statistical = function () {
    return this.yw + this.sx + this.yy
}

实例化的学生对象都可以调用statistical

代码语言:javascript
代码运行次数:0
运行
复制
lisi.statistical()

通过控制台输出,我们可以看到我们实例化的对象,有个__proto__属性,这个属性就是隐式原型,这个__proto__是所有对象都有的属性,

这个__proto__属性指向我们的构造函数的prototype,我们通过===(全等)测试

借用网上一张图,理下构造函数、原型对象、实例的关系。

3 原型链

从上面这张图,我们可以看到原型链的影子,由于JavaScript的一切都是对象(除undefined),又由于所有对象都有__proto__属性,__proto__又指向构造函数的prototype,当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。

原型链,说明是链式,而不是环,说明有终点,它的终点是null

4 总结

prototype是函数的原型对象,即prototype是一个对象,它会被对应的__proto__引用。__proto__是所有对象都有的属性,通过__proto__的链式查找,可以形成原型链,原型链的终点是null

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-03-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 青年码农 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档