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 相关文章推荐
Javascript中的常见排序算法
Mar 27 Javascript
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
js重写方法的简单实现
Jul 10 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
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 数组实例说明
2008/08/18 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
vue cli 全面解析
2018/02/28 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
Python实现获取网站PR及百度权重
2015/01/21 Python
Python中进程和线程的区别详解
2017/10/29 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
使用python3实现操作串口详解
2019/01/01 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
解决python flask中config配置管理的问题
2019/07/26 Python
通过自学python能找到工作吗
2020/06/21 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
党员党性分析材料
2014/02/17 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
英文感谢信范文
2015/01/21 职场文书
会计专业自荐信范文
2019/05/22 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书