JavaScript学习-面向对象与原型4
来源:互联网 发布:淘宝拍卖房产靠谱吗 编辑:程序博客网 时间:2024/06/04 18:11
原型模式创建对象的缺点
1、省略了构造函数传参
导致的结果就是对象初始化的值都是一样的。
2、原型的最大优点,也是其最大缺点,即共享。
特别是对于引用类型,比如一个数组,如果你通过一个实例修改了数组中的数据,那么由此原型创建的所有对象访问的都是修改后的数组数据,因为原型的数据是共享的。
function Box(){}Box.prototype = { constructor :Box, name:'Lee',// 原型属性 age:100, family:['哥哥','姐姐','妹妹'], run :function(){ return this.name + this.age +'运行中...'; }}var box1 = new Box();document.write(box1.family);box1.family.push('弟弟');document.write("<br/>")document.write(box1.family);var box2 = new Box();document.write("<br/>")document.write(box2.family);
输出:
哥哥,姐姐,妹妹哥哥,姐姐,妹妹,弟弟哥哥,姐姐,妹妹,弟弟
组合构造函数+原型模式
为了解决原型模式的缺点,我们可以采用组合构造函数+原型模式。也就是说不需要共享的部分使用构造函数,需要共享的部分使用原型。
function Box(name,age){ this.name = name; this.age = age; this.family = ['哥哥','姐姐','妹妹'];}Box.prototype = { constructor :Box, run :function(){ return this.name + this.age +'运行中...'; }}
动态原型模式
组合构造函数+原型模式解决了原型模式的两个缺点,但还是有一些问题:
1、构造函数和原型分别来书写。我们更希望能封装起来。
2、原型模式中,不管你是否调用了原型中的共享方法,它都会初始化原型中的方法。
// 动态原型模式function Box(name,age){ this.name = name; this.age = age; this.family = ['哥哥','姐姐','妹妹']; if(typeof this.run != 'function'){// 仅在第一次调用时初始化 Box.prototype.run = function(){ return this.name + this.age +'运行中...'; } }}// 测试代码var box1 = new Box('Lee',100);var box2 = new Box('Jack',200);document.write(box1.run());document.write("<br/>")document.write(box2.run());
输出:
Lee100运行中...Jack200运行中...
寄生构造函数
// 寄生构造函数function Box(name,age){ var obj = new Object(); obj.name = name; obj.age = age; obj.run = function(){ return this.name + this.age +'运行中...'; } return obj;}// 测试代码var box1 = new Box('Lee',100);var box2 = new Box('Jack',200);document.write(box1.run());document.write("<br/>")document.write(box2.run());
寄生构造函数模式其实就是工厂模式+构造函数,这种模式比较通用,但不能确定对象关系,所以在可以使用之前所说的模式时,不建议使用。
稳妥构造函数
在一些安全的环境中,比如禁止使用this和new,这里的this是构造函数里不使用this,这里的new是外部实例化的时候不实用new。这种方式叫做稳妥构造函数。
// 稳妥构造函数function Box(name,age){ var obj = new Object(); obj.run = function(){ return name + age +'运行中...';// 直接使用参数 } return obj;}// 测试代码var box1 = Box('Lee',100);var box2 = Box('Jack',200);document.write(box1.run());document.write("<br/>")document.write(box2.run());
阅读全文
0 0
- JavaScript学习-面向对象与原型4
- JavaScript学习-面向对象与原型1
- JavaScript学习-面向对象与原型2
- JavaScript学习-面向对象与原型3
- JavaScript学习-面向对象与原型5
- JavaScript面向对象与原型
- Javascript面向对象与原型
- 【JavaScript】面向对象与原型
- JavaScript:面向对象与原型
- JavaScript面向对象与原型
- 【JavaScript】面向对象与原型
- javascript面向对象基础 工厂与原型
- JavaScript中面向对象与原型
- JavaScript 面向对象与原型、继承
- JavaScript之面向对象与原型
- Javascript 面向对象原型
- JavaScript面向对象-原型
- JavaScript面向对象技术·原型与原型链
- 指针值传递所遇到的问题
- 卷积神经网络(一)- Foundations of Convolutional Neuron Networks
- 欢迎使用CSDN-markdown编辑器
- 如何调用另一个python文件中的代码
- 吴恩达机器学习笔记(二)(附编程作业链接)
- JavaScript学习-面向对象与原型4
- navicat premium出现PostgreSQL: column “rolcatupdate” does not exist error?
- PythonAnyWhere免费部署python类网站
- [leetcode]283. Move Zeroes[facebook]
- Android Gradle(1)— Flavor,简单使用多渠道打包
- [leetcode]67. Add Binary[facebook]
- 磁盘分区创建场景memo
- 在虚拟磁盘中安装Windows Server 2016
- 基于PyTorch的深度学习入门教程(二)——简单知识