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


Posted in Javascript onFebruary 10, 2020

本文实例讲述了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面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

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

Javascript 相关文章推荐
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
基于JSON数据格式详解
Aug 31 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 #Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 #Javascript
webpack打包优化的几个方法总结
Feb 10 #Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 #Javascript
node.js制作一个简单的登录拦截器
Feb 10 #Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 #Javascript
jQuery实现简易QQ聊天框
Feb 10 #jQuery
You might like
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php多重接口的实现方法
2015/06/20 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
python设置值及NaN值处理方法
2018/07/03 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
交通法规咨询中心工作职责
2013/11/27 职场文书
运动会稿件50字
2014/02/17 职场文书
护士工作失误检讨书
2014/09/14 职场文书
优秀教师推荐材料
2014/12/16 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
中国世界遗产导游词
2015/02/13 职场文书
关于Python使用turtle库画任意图的问题
2022/04/01 Python
如何利用python创作字符画
2022/06/25 Python