问了、工厂介绍,解决重码

前面已经提到,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 + '处理中...';
};

比較:

构造函数创建

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGZzZnh5dGdiOV9seWc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" hspace="50" width="400" height="300" alt="">

使用原型创建

细节:在调用属性或方法时,採用就近原则。先查找实例中是否存在,否的话查找原型。可使用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创建怀疑的对象的更多相关文章

  1. JS学习笔记-OO疑问之对象创建

    问一.引入工厂,解决反复代码 前面已经提到,JS中创建对象的方法,不难发现,主要的创建方法中,创建一个对象还算简单,假设创建多个类似的对象的话就会产生大量反复的代码. 解决:工厂模式方法(加入一个专门 ...

  2. Node.js学习笔记(四): 全局对象

    在浏览器 JavaScript 中,通常 window 是全局对象, 而 Node.js 中的全局对象是 global,所有全局变量(除了 global 本身以外)都是 global 对象的属性. 这 ...

  3. 《Effect Java》学习笔记1———创建和销毁对象

    第二章 创建和销毁对象 1.考虑用静态工厂方法代替构造器 四大优势: i. 有名称 ii. 不必在每次调用它们的时候都创建一个新的对象:   iii. 可以返回原返回类型的任何子类型的对象: JDBC ...

  4. JS学习笔记-OO疑问之封装

    封装是面向对象的基础,今天所要学习的匿名函数与闭包就是为了实现JS的面向对象封装.封装实现.封装变量,提高数据.系统安全性,封装正是面向对象的基础. 一.匿名函数 即没有名字的函数,其创建方式为 fu ...

  5. Effective Java 学习笔记之创建和销毁对象

    一.考虑用静态工厂方法代替构造器 1.此处的静态工厂方法是指返回指为类的对象的静态方法,而不是设计模式中的静态工厂方法. 2.静态工厂方法的优势有: a.使用不同的方法名称可显著地表明两个静态工厂方法 ...

  6. JS学习笔记(四)常用对象

    Error // 语法 throw new Error("消息"); 类似于C#中的Exception对象 // alert(num); try { throw new Error ...

  7. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  8. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  9. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

随机推荐

  1. Java的图片处理工具类

    import Java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...

  2. Codefirst

    新建控控制台程序 nuget  输入Install-Package EntityFramework  回车: Program.cs只 添加 using ConsoleApplication18.Mig ...

  3. Webserver管理系列:1、安装Windows Server 2008

    简单了解下server: 1U: 2U: 3U: 在安装Windows Server 2008之前我们先了解下Windows Server 2008: Windows Server 2008是微软一个 ...

  4. windows phone (20) Image元素

    原文:windows phone (20) Image元素 之前有说道wp目前支持的图片格式为png和jpeg ,我们可以通过设置Source属性设置图片源,下面要说的是Iamge元素的部分属性,这就 ...

  5. 【从翻译mos文章】在OGG (Oracle GoldenGate) 正在使用SCHEMATRANDATA如果,需要额外的db patch

    在OGG (Oracle GoldenGate) 正在使用SCHEMATRANDATA如果.需要额外的db patch 参考原始: Patches needed to support SCHEMATR ...

  6. hdu 4107当卡段树

    其核心思想是记录最大的节点值和最低值,假设max<p要么min>=p时间,在节点只变化add值,不要子树遍历:否则,就往子树递归. #include<iostream> #in ...

  7. Qt 3D研究(九):尝试第二边缘检测方法

    Qt 3D研究(九):尝试第二边缘检测方法 三维应用程序,通过FBO.将3D图像渲染成纹理,然后对渲染成的纹理进行图像处理,终于显示在屏幕上的.是风格化后的图案.上一次我使用了一种普通的图像处理方法: ...

  8. [Elasticsearch] 控制相关性 (一) - 后面的相关度分值理论计算

    从第一章翻译Elasticsearch官方指南Controlling Relevance一章. 控制相关度(Controlling Relevance) 对于仅处理结构化数据(比方日期.数值和字符枚举 ...

  9. 前台技术--通过javaScript提交表单

    window.location=pp+"?username="+getCookie("username")+"&userid="+g ...

  10. Test SRM Level Three: LargestCircle, Brute Force

    题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=3005&rd=5858 思路: 如果直接用Brute F ...