JS学习笔记-OO疑问之对象创建
问一、引入工厂,解决反复代码
前面已经提到,JS中创建对象的方法,不难发现,主要的创建方法中,创建一个对象还算简单,假设创建多个类似的对象的话就会产生大量反复的代码。
解决:工厂模式方法(加入一个专门创建对象的方法,传入參数避免反复)
function createObject(name,age){
var obj =new Object(); //创建对象
obj.name = name;
obj.age = age;
obj.run = function(){
return this.name + this.age + '处理中...';
};
return obj; //返回对象引用
};
问二、引入构造函数,解决对象识别
上面方法尽管攻克了避免反复代码出现的问题,但也带来了无法识别详细对象的问题,方法内部使用new
Object的方式,最后返回该对象引用,调用该方法创建的对象返回的所有都是Object的引用,因此使用typeof或instanceof操作符时都无法区分详细对象。
解决:构造函数(改良后的工厂方法)
function Box(name,age){ //创建对象
this.name = name;
this.age = age;
this.run = function(){
return this.name + this.age + '处理中...';
};
};
比較:细心的童鞋就该发现了,该方法与问一中的工厂模式不同之处就在于:省略了newObject()的明文运行过程;省略了return语句,这些都由后台自己主动运行。
而构造函数差别普通函数的地方在于其调用方式,必须用new运算符或对象冒充方式调用。
问三、引入prototype属性对象,解决对象之间的共享问题
每个对象都会有一个prototype,同一时候它也是一个对象。使用目的是为了解决共享问题,调用同一个构造函数创建的该对象会共享prototype中的属性和方法。
解决:使用原型模式解决共享
function Box() {} //声明一个构造函数
Box.prototype.name = 'Lee'; //在原型里加入属性
Box.prototype.age = 100;
Box.prototype.run = function () { //在原型里加入方法
return this.name + this.age + '处理中...';
};
比較:
构造函数创建
使用原型创建
细节:在调用属性或方法时,採用就近原则,先查找实例中是否存在,否的话查找原型,可使用isPrototypeOf(),hasOwnPrototy(),in操作符进行相关測试。
问四、使用组合,解决共享及传參
原型模式创建对象省略了构造函数传參初始化的过程,这既是它的缺点又是它的长处,缺点是对象初始化的值一样,而且假设原型属性中包括有引用类型,则对一个对象进行更改,其它对象的相应属性也会跟着更改了。
解决:组合构造函数+原型模式(解决共享和传參的问题)
function Box(name, age) { //不共享的使用构造函数
this.name = name;
this.age = age;
this. family = ['父亲', '母亲', '妹妹'];
};
Box.prototype = { //共享的使用原型模式
constructor : Box,
run : function () {
return this.name + this.age + this.family;
}
};
细节:这样的方式事实上就是将构造函数与原型一起使用,对要创建的对象分析,将须要共享的内容放入原型中,不须要的则放在构造函数里。这样也就是组合了。
优化:这样分开式的写法难免有些怪异,我们将这两部分合并
动态原型模式(第一次调用共享方法时进行初始化原型,以后就不会初始化了)
function Box(name ,age) { //将全部信息封装到函数体内
this.name = name;
this.age = age;
if (typeof this.run != 'function') {//仅在第一次调用的初始化
Box.prototype.run = function () {
return this.name +this.age + '处理中...';
};
}
}
中结:
在学习JS中,还是非常须要对正统面向对象语言的理解的,在这里我们学习了使用构造函数以及原型来创建对象,理解了二者的概念,对于后面的JS中面向对象深入学习会非常有帮助,各种不同的创建方式是为了解决不同情况的问题,理解了这些才干按需使用。
JS学习笔记-OO疑问之对象创建的更多相关文章
- JS学习笔记-OO疑问之封装
封装是面向对象的基础,今天所要学习的匿名函数与闭包就是为了实现JS的面向对象封装.封装实现.封装变量,提高数据.系统安全性,封装正是面向对象的基础. 一.匿名函数 即没有名字的函数,其创建方式为 fu ...
- JS学习笔记-OO创建怀疑的对象
问了.工厂介绍,解决重码 前面已经提到,JS中创建对象的方法.不难发现,主要的创建方法中,创建一个对象还算简单,假设创建多个类似的对象的话就会产生大量反复的代码. 解决:工厂模式方法(加入一个专门创建 ...
- JS学习笔记(三) 对象
参考资料: 1. http://www.w3school.com.cn/js/js_objects.asp ☂ 知识点: ☞ Javascript中的所有事物都是对象. ☞ Javascript是基于 ...
- JS学习笔记 等于和包装对象
严格等于 a===b 首先判断两边数据的类型,若类型不同,返回false. 若类型相同(1.2和1.2,字符串相等指内容和长度都是一样的),返回true null===null undefined== ...
- JS学习笔记10之Math对象
-->Math对象 常用属性和方法-->使用Math对象制作相应的效果 Math对象用于执行数学任务 一.Math对象的属性: 二.Math对象的方法: 三.常用属性和方法: Math.P ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- JS学习笔记5_DOM
1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...
随机推荐
- Windows Azure使用体验
Windows Azure在今年6月6日由世纪互联代理在中国运营,目前只能体验,没有开放注册.不过,体验的门槛比较高,只对企业开放,未来大量对外开放使用貌似时间还早.大家都懂得,“国内门槛高”.本人在 ...
- App 运营 推广相关
基本要素 1.定位和产品 2.取个好名字,一目了然+下载冲动 3.设计一个好图标,有感性和直观的认识 4.做好产品的说明.关键字,截图(前1-2行是重点) 5.做市场的排名(相关因素如下) (1) ...
- win32 sdk 列表视图控件绘制
////////////////////////////////////////////////////////////// LRESULT ListViewCustomDraw(HWND hwnd, ...
- jqueryUI中datepicker的使用,解决与asp.net中的UpdatePanel联合使用时的失效问题
1.jqueryUI的datepicker的使用 -->首先在jqueryUI官网上根据你的需要下载适合你系统主题的样式,jqueryUI主题下载地址: -->下载后的文件 jquery- ...
- Swift - 使用网格(UICollectionView)进行流布局
一.网格UICollectionView最典型的例子是iBooks.其主要属性如下: 1,layout 该属性表示布局方式,有Flow.Custom两种布局方式.默认是Flow流式布局. 2,Acce ...
- java反射机制 + Method.invoke解释 getMethod + 反射理解
功能: 通过读取另一个Dll去创建一个控件(Form,Button,TextBox,DataGridView),然后对当中一些属性进行检查. 创建控件的大致流程是,Assembly->Modul ...
- javascript中使用Map
mis.comm.js.Map = function() { this.elements = new Array(); //获取MAP元素个数 this.size = function() { ret ...
- Delphi “Invalid floating point operation.”错误的解决方法(使用System单元提供的Set8087CW函数禁用浮点异常)
这两天用webbrower写东西,有时候打开SSL加密网站时会出现”Invalid floating point operation.”的错误,上网搜了下,把解决方法贴上. 导致原因 在Delphi2 ...
- SCU 3133(博弈)
传送门:windy和水星 -- 水星游戏 2 题意:在一张由 n*m 的格子组成的棋盘上放着 k 个骑士每个骑士的位置为(xi,yi),表示第xi行,第yi列骑士如果当前位置为(x,y),一步可以走的 ...
- SQL_由创建表引出
***********************************************声明*************************************************** ...