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,文本节点为文本内容,属性节点为属性 ...
随机推荐
- ABAP函数:VIEW_MAINTENANCE_CALL(维护表视图等)
function:VIEW_MAINTENANCE_CALL 功能:维护表视图等 The function module calls the extended table maintenance (V ...
- perl lwp 默认的请求头
</pre><pre name="code" class="html">[root@dr-mysql01 ~]# cat getx.pl ...
- (step6.3.2)hdu 1068(Girls and Boys——二分图的最大独立集)
题目大意:第一行输入一个整数n,表示有n个节点.在接下来的n行中,每行的输入数据的格式是: 1: (2) 4 6 :表示编号为1的人认识2个人,他们分别是4.6: 求,最多能找到多少个人,他们互不认识 ...
- Swift - 滚动视图(UIScrollView)的用法
1,当图片尺寸超过屏幕时,使用UIScrollView可以实现滚动条视图,即手指触摸滚动屏幕方便浏览整个页面. 1 2 3 4 5 6 var scrollView=UIScrollView() sc ...
- 改变Edit的光标(使用CreateCaret,ShowCaret和LoadBitmap三个API函数)
看着Edit的光标,是不是觉得了无生趣,想不想换个形状来玩玩,其实很简单,且听我道来. Edit是Windows的标准控件,它是一个系统范围窗口类,所以任何应用程序都能创建它.其实Edit本质上也是一 ...
- windows下搭建node.js及npm的工作环境
近期在研究数据可视化D3框架,决定在windows下搭建一个nodejs及npm的工作环境,在网上查了n篇文章,别管是编译源代码安装也好.还是使用node.msi格式安装包也好,总是有问题.终于,功夫 ...
- STM32 + RT Thread OS 学习笔记[四]
1. 补注 a) 硬件,打通通讯通道 若学习者购买了学习板,通常可以在学习板提供的示例代码中找到LCD的相关驱动代码,基本上,这里的驱动的所有代码都可以从里面找到. 从上面的示意图可见,M ...
- JavaScript 中的事件类型1(读书笔记思维导图)
Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...
- Android----------WindowManager
我们Android平台是一个又一个的Activity组成的,每个Activity有一个或者多个View构成.所以说.当我们想显示一个界面的时候,我们首先想到的是建立一个Activity,然后全部的操作 ...
- Linux/UNIX之信号(2)
信号(2) sigaction函数 sigaction函数的功能是检查或改动与制定信号相关联的处理动作.此函数代替了signal函数. #include <signal.h> int si ...