JavaScript对象创建模式实例汇总


Posted in Javascript onOctober 03, 2016

本文实例总结了JavaScript对象创建模式。分享给大家供大家参考,具体如下:

在JavaScript中创建对象是很容易的,可以使用对象字面量或者构造函数。常用的创建对象的模式有以下几种:

一. 工厂模式

工厂模式抽象了具体对象的过程,用函数来封装以特ing接口创建对象的细节。
如下:

function createAnimal(name, age) {
  var o = new Object();
  o.name = name;
  o.age = age;
  o.sayName = function() {
    alert(this.name);
  }
  return o;
}
var cat = createAnimal("cat", 12);
var dog = createAnimal("dog", 3);

工厂模式虽然解决了创建多个相似兑现过的问题,但是却没有解决对象识别的问题。

二. 构造函数模式

构造函数模式可以创建特定类型的对象。

function Animal(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function() {
    alert(this.name);
  }
}
var cat = new Animal("cat", 12);
var dog = new Animal("dog", 3);

可以使用对象的constructor属性或instanceof操作符来标识对象类型。

cat.constructor == Animal // true
cat instanceof Animal // true

三. 原型模式

每个函数都有一个prototype(原型)属性。这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

使用原型对象的好处是,可以让所有对象实例共享它所包含的属性和方法。

function Animal() {}
Animal.prototype.name = "animal";
Animal.prototype.age = 1;
Animal.prototype.sayName = function() {
  alert(this.name);
}
var test1 = new Animal();
test1.sayName(); // "animal"
var test2 = new Animal();
test2.sayName(); // "animal"
alert(test1.sayName === test2.sayName); // true

或者:

function Animal() {}
Animal.prototype = {
  constructor: Animal,
  name: "animal",
  age: 1,
  sayName: function() {
    alert(this.name);
  }
};

原型中所有属性是被很多实例共享的,通过在实例上添加一个同名属性,可以隐藏原型中的对应属性。但是,对于包含引用类型值的属性来说,问题就比较明显了,如下:

function Animal() {}
Animal.prototype = {
  constructor: Animal,
  name: "animal",
  age: 1,
  hobbies: ["dance", "sing", "play"],
  sayName: function() {
    alert(this.name);
  }
};
var cat = new Animal();
var dog = new Animal();
cat.hobbies.push("sleep");
alert(cat.hobbies); // "dance", "sing", "play", "sleep"
alert(dog.hobbies); // "dance", "sing", "play", "sleep"
alert(cat.hobbies === dog.hobbies); // true

四. 组合使用构造函数模式和原型模式

function Animal(name, age) {
  this.name = "animal";
  this.age = 1;
  this.hobbies = ["dance", "sing", "play"];
}
Animal.prototype = {
  constructor: Animal,
  sayName: function() {
    alert(this.name);
  }
};
var cat = new Animal("cat", 2);
var dog = new Animal("dog", 3);
cat.hobbies.push("sleep");
alert(cat.hobbies); // "dance", "sing", "play", "sleep"
alert(dog.hobbies); // "dance", "sing", "play"
alert(cat.hobbies === dog.hobbies); // false
alert(cat.sayName === dog.sayName); // true

五. 动态原型模式

function Animal(name, age) {
  this.name = name;
  this.age = age;
  if(typeof this.sayName != "function") {
    Animal.prototype.sayName = function() {
      alert(this.name);
    }
  }
}
var cat = new Animal("cat", 12);
cat.sayName(); // "cat"

使用动态原型模式时,不能使用对象字面量重写原型。如果在已经创建了实例的情况下重写原型,那么就会切断现有实例与新原型之间的联系。

六. 寄生构造函数模式

寄生构造函数模式的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象。

从表面上看,这个函数很像典型的构造函数。除了使用new操作符之外,这个模式跟工厂模式长得一模一样。构造函数在不返回值的情况下,默认会返回新对象实例。而通过在构造函数的末尾添加一个return语句,可以重写调用构造函数时返回的值。

function Animal(name, age) {
  var o = new Object();
  o.name = name;
  o.age = age;
  o.sayName = function() {
    alert(this.name);
  }
  return o;
}
var cat = new Animal("cat", 12);
cat.sayName(); // "cat"

由于返回的对象与构造函数或构造函数的原型之间没有什么关系,因此不能依赖instanceof操作符来确定对象类型。

建议在可以使用其他模式的情况下,不能使用这种模式。

七. 稳妥构造函数模式

稳妥构造函数模式与寄生构造函数模式类似,但有两点不同:

一是新创建对象的实例方法不引用this;

二是不适用new操作符调用构造函数。

function Animal(name, age) {
  var o = new Object();
  o.name = name;
  o.age = age;
  var msg = "Hello, I'm ";
  o.sayName = function() {
    alert(msg + this.name);
  }
  return o;
}
var cat = new Animal("cat", 12);
cat.sayName(); // "Hello, I'm cat"

稳妥构造函数模式适合在某些安全执行环境。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
在Windows上安装Node.js模块的方法
Sep 25 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
JavaScript实现简单计算器
Mar 19 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
js实现的光标位置工具函数示例
Oct 03 #Javascript
js获取腾讯视频ID的方法
Oct 03 #Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 #Javascript
微信小程序 navigation API实例详解
Oct 02 #Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 #Javascript
微信小程序 location API实例详解
Oct 02 #Javascript
微信小程序 Storage API实例详解
Oct 02 #Javascript
You might like
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
php 获取全局变量的代码
2011/04/21 PHP
CI框架Session.php源码分析
2014/11/03 PHP
教大家制作简单的php日历
2015/11/17 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
javascript parseInt 大改造
2009/09/27 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
先进党支部事迹材料
2014/01/13 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
雷峰塔导游词
2015/02/09 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
2016年安全月活动总结
2016/04/06 职场文书
八年级作文之感恩
2019/11/22 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python
vscode内网访问服务器的方法
2022/06/28 Servers