javascript 原型与原型链的理解及实例分析


Posted in Javascript onNovember 23, 2019

本文实例讲述了javascript 原型与原型链的理解。分享给大家供大家参考,具体如下:

javascript中一切皆对象,但是由于没有Class类的概念,所以就无法很好的表达对象与对象之间的关系了。

比如对象A与对象B之间,它们两个是相对独立的个体,互不干扰,对象A修改自身的属性不会影响到对象B。

虽然这很好,但是有一个问题,如果对象A与对象B都有一个方法 run() ,并且代码也一样,那对象A与对象B各自都独立拥有一份 run() 方法的完整代码,这是需要资源去保存的。

一旦我们程序中应用的对象过多,那这种资源消耗会是巨大的。那有没有一种方法可以让对象A与对象B拥有一些公共的属性和方法,让它们之前有某种联系?

我们设想一下,会不会存在一个 common对象(公共对象),common对象上保存着公共的属性和方法,而对象A与对象B里面有一个prototype属性指向这个 common对象,

当然我们调用对象A或对象B的属性和方法时,如果在自身对象中没有找到,就去prototype这个属性指向的对象上面去找。

而common对象本身也有一个prototype属性指向更上一级的common对象,然后一直往上找啊找,直到为null,就停止。

这种不断的从下往上找的这种路径,就像链条一样,我们称它为 原型链,而那个common对象,我们称它为 原型对象。

我们来看一个构造函数

function Base(name) {
  this.name = name;
}
let A = new Base('A');
let B = new Base('B');
//每一个函数都有一个prototype属性,指向该函数的原型对象
console.log(Base.prototype);
//当然原型对象也是一个对象,它也有一个constructor,指向构造函数
console.log(Base.prototype.constructor === Base);
//每一个实例对象的constructor都指向创建它们的构造函数
console.log(A.constructor === Base);
console.log(B.constructor === Base);
//每一个实例对象都有一个__proto__属性,该属性指向构造函数的原型对象
console.log(A.__proto__ === Base.prototype);
console.log(B.__proto__ === Base.prototype);

1、每一个函数都有一个prototype属性,它指向该函数的原型对象。

2、原型对象也是对象,它也有自已的constructor,它指向构造函数Base()。换句话说,其实原型对象也是构造函数Base()的一个实例。只不过比较特殊,用来存放公共属性和方法的。

3、每一个通过构造函数Base()创建的实例对象,都有一个constructor,指向创建它们的构造函数。

4、每一个对象,都有一个 __proto__ 属性,指向构造函数Base()的 原型对象。换句话说,__proto__ 是将 原型 串联起来形成链条的关键。不然对象A与对象B都无法找到原型对象上的公共属性和方法。

function Base(name) {
  this.name = name;
}
//我们在原型对象上添加公共属性
Base.prototype.status = '开始';
//我们在原型对象上添加公共方法
Base.prototype.run = function() {
  console.log(this.name + ' run ...');
};
let A = new Base('A');
let B = new Base('B');
A.run();
B.run();
console.log(A.status);
console.log(B.status);
//修改原型上的属性,则实例对象也会跟着改变
Base.prototype.status = '停止';
console.log(A.status);
console.log(B.status);

通过原型与原型链,让对象与对象之间有了关联关系。

那如何通过原型与原型链,让一个构造函数继承于另一个构造函数?

比如,我们要让构造函数Child 继承于 构造函数Base,只需要让 Child 的 prototype 指向 Base的 原型对象,不就可以了?

function Base(name) {
}
Base.prototype.name = 'Base';
Base.prototype.run = function () {
  console.log(this.name + ' run ...');
};
function Child() {
}
Child.prototype = Base.prototype;
//注意这个时候,Child.prototype对象的constructor属性指向了Base
//这就导致通过构造函数Child创建的实例对象,对象的constructor属性会指向Base,而不是Child,这会导致混乱。
//所以我们重新设置Child.prototype.constructor指向Child
Child.prototype.constructor = Child;
let c = new Child();
console.log(c.name);
c.run();

这样有一个问题,Child.prototype 与 Base.prototype 指向同一个原型对象,任何对 Child.prototype 的修改都会反应到 Base.prototype 上面。

这时,Base.prototype.constructor 指向了 Child,这显然是有问题。

我们只能通过一个中间的空构造函数,来完成原型的指向。

function Base(name) {
}
Base.prototype.name = 'Base';
Base.prototype.run = function () {
  console.log(this.name + ' run ...');
};
function Child() {
}
//创建一个中间的空构造函数
function Mid() {
}
//让该空构造函数的prototype指向Base的原型对象
Mid.prototype = Base.prototype;
//再让Child的prototype指向该空构造函数的一个实例
Child.prototype = new Mid();
//这样,当修改Child.prototype.constructor时,Base.prototype就不会受影响了
Child.prototype.constructor = Child;
let c = new Child();
console.log(c.name);
c.run();
//Base.prototype的constructor仍然指向Base,没有受到影响
console.log(Base.prototype.constructor);

那怎么通过原型与原型链,让你一对象继承于另一个对象呢?

比如,我们要让对象B继承于对象A,无非就是想要拿到对象A的属性和方法,这么一想,那通过把对象B的 __proto__  指向 对象A,不就可以实现了?

let A = {
  name: 'A',
  run() {
    console.log(this.name + ' run ...');
  }
};
console.log(A.name);
A.run();
let B = {};
//让对象B的__proto__指向对象A
B.__proto__ = A;
//当对象B调用run()方法时会在自身上找,如果没找到,则通过__proto__向上找
//由于__proto__指向对象A,所以最终会在对象A中找到run()方法
B.run();
B.__proto__.name = 'B';
console.log(A.name);
console.log(B.name);

这样有一个问题,当修改 B.__proto__.name = 'B'; 时,对象A也会受到影响。

我们可以通过ES5提供的 Object.create() 来解决此问题,Object.create()可以通过指定的 原型对象 创建一个新对象。

let A = {
  name: 'A',
  run() {
    console.log(this.name + ' run ...');
  }
};
console.log(A.name);
A.run();
let B = {};
//通过Object.create()创建一个以对象A为原型对象的新对象
//让对象B的__proto__指向该新对象
//这样再操作B.__proto__中的属性就与对象A无关了。
B.__proto__ = Object.create(A);
B.run();
B.__proto__.name = 'B';
console.log(A.name);
console.log(B.name);

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js活用事件触发对象动作
Aug 10 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
jquery 插件重新绑定的处理方法分析
Nov 23 #jQuery
微信小程序实现录音功能
Nov 22 #Javascript
小程序实现按下录音松开识别语音
Nov 22 #Javascript
小程序采集录音并上传到后台
Nov 22 #Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 #Javascript
小程序实现录音上传功能
Nov 22 #Javascript
vue使用recorder.js实现录音功能
Nov 22 #Javascript
You might like
PHP 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
开源SNS系统-ThinkSNS
2008/05/18 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php 文章采集正则代码
2009/12/28 PHP
第五章 php数组操作
2011/12/30 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
php编程每天必学之验证码
2016/03/03 PHP
详解PHP归并排序的实现
2016/10/18 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
关于php开启错误提示的总结
2019/09/24 PHP
javascript面向对象编程代码
2011/12/19 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
python发布模块的步骤分享
2014/02/21 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
PHP如何设置和取得Cookie值
2015/06/30 面试题
护理专业自我鉴定
2014/01/30 职场文书
物流创业计划书
2014/02/01 职场文书
商场中秋节活动方案
2014/02/07 职场文书
青年志愿者活动方案
2014/08/17 职场文书
年会邀请函范文
2015/01/30 职场文书
世界遗产导游词
2015/02/13 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书