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疑问之对象创建,布布扣,bubuko.com

时间: 2024-10-11 07:05:24

JS学习笔记-OO疑问之对象创建的相关文章

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

封装是面向对象的基础,今天所要学习的匿名函数与闭包就是为了实现JS的面向对象封装.封装实现.封装变量,提高数据.系统安全性,封装正是面向对象的基础. 匿名函数 即没有名字的函数,其创建方式为 function(){...} 单独存在的匿名函数,无法运行,可通过赋值给变量调用或通过表达式自我执行来实现运行. 1.赋值给变量为一般的函数使用方式 var run = function(){ return '方法运行中'; }; alert(run()); 2.通过表达式自我执行 (function(a

Think in C++学习笔记(一)——对象创建与引用

计算机把写好的程序转换为机器可识别的语言的过程所使用的工具有两种,分别是解释器与编译器. 一.解释器(边解释边执行) 将源代码转化为一些动作并执行,由于是解释一行执行一行,所以每次执行完后这一行的解释就会丢弃,从而会产生很多重复解释的行为,导致程序执行变慢. 二.编译器(编译后再执行) 编译过程: 预处理器:节省输入,增加代码可读性: 编译器:对预处理过的代码进行语法分析,生成语法分析树: 由代码生成器遍历语法树,把树的每个节点转化为汇编语言或机器代码,在此过程中需要对代码优化: 连接器:把一组

JS学习笔记(三) 对象

参考资料: 1. http://www.w3school.com.cn/js/js_objects.asp ? 知识点: ? Javascript中的所有事物都是对象. ? Javascript是基于prototype,而不是基于类的. ? Javascript是面向对象的语言,但Javascript不使用类.因此,在Javascript中,不会创建类,也不会通过类来创建对象. ? Javascript中的所有数字都存储为根为10的64位的浮点数.其中,整数最多为15位,小数最大位数为17,且浮

【JS学习笔记】DOM操作应用-创建、插入和删除元素;文档碎片

一.创建.插入和删除元素 (1)创建DOM元素 createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点 例子:为ul插入li <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="htt

JS学习笔记10之Math对象

-->Math对象 常用属性和方法-->使用Math对象制作相应的效果 Math对象用于执行数学任务 一.Math对象的属性: 二.Math对象的方法: 三.常用属性和方法: Math.PI ----------------返回圆周率3.14 ...Math.ceil(x) ------------对数值x进行向上取整Math.floor(x) -----------对数值x进行向下取整Math.round(x) ----------对数值x进行四舍五入Math.min(a,b,c...) -

node.js学习笔记目录

1.node.js学习笔记(1)--Node.js简介及环境安装 2.node.js学习笔记(2)--使用Express快速创建应用 3.node.js学习笔记(3)--Express创建的项目分析 4.node.js学习笔记(4)--使用Express完成简单的登陆 5.node.js学习笔记(5)--MongoDB下载及安装 6.node.js学习笔记(6)--MongoDB简单入门 7.node.js学习笔记(7)--Node.js与MongoDB简单交互 8.node.js学习笔记(8)

【转】Backbone.js学习笔记(二)细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由

js学习笔记知识点

AJAX用法安全限制JSONPCORS面向对象编程创建对象构造函数原型继承class继承 AJAX 用法 AJAX不是JavaScript的规范,它只是一个哥们"发明"的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求 在现代浏览器上写AJAX主要依靠XMLHttpRequest对象: 'use strict'; function success(text) { var textarea = document.getE

JS学习笔记-数组

ECMAScript中没有提供类和接口等的定义,但它却是一门面向对象的语言,由于它能够通过其它 方式实现类似高级语言的面向对象功能,这些内容将在后面的文章中进行一步步的总结.此篇仅对JS中对象作简要说明,重点汇总一些类似于对象的数组的经常用法. 对象 创建 上篇提到创建对象的两种方式: 使用new运算符创建Object var obj = new Object(); 使用字面量方式创建 var   obj = {}; 这里值得注意的是在使用字面量(常量)创建Object时不会调用构造函数. 属性