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 相关文章推荐
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
JavaScript的==运算详解
Jul 20 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
js实现三角形粒子运动
Sep 22 Javascript
React 高阶组件HOC用法归纳
Jun 13 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
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
Js的MessageBox
2006/12/03 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
javascript 常用代码技巧大收集
2009/02/25 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
Python的IDEL增加清屏功能实例
2017/06/19 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
python热力图实现简单方法
2021/01/29 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
建筑文秘专业个人求职信范文
2013/12/28 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
自我鉴定写作要点
2014/01/17 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
大学新闻系求职信
2014/06/03 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python