JavaScript对象创建模式实例汇总

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

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

一. 工厂模式

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

rush:js;"> 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);

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

二. 构造函数模式

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

rush:js;"> 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操作符来标识对象类型。

rush:js;"> cat.constructor == Animal // true cat instanceof Animal // true

三. 原型模式

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

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

rush:js;"> 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

或者:

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

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

rush:js;"> function Animal() {} Animal.prototype = { constructor: Animal,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","play","sleep" alert(dog.hobbies); // "dance","sleep" alert(cat.hobbies === dog.hobbies); // true

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

rush:js;"> function Animal(name,age) { this.name = "animal"; this.age = 1; this.hobbies = ["dance","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","play" alert(cat.hobbies === dog.hobbies); // false alert(cat.sayName === dog.sayName); // true

五. 动态原型模式

rush:vb;"> 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语句,可以重写调用构造函数时返回的值。

rush:js;"> 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操作符调用构造函数

rush:js;"> 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程序设计有所帮助。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


什么是深拷贝与浅拷贝?深拷贝与浅拷贝是js中处理对象或数据复制操作的两种方式。‌在聊深浅拷贝之前咱得了解一下js中的两种数据类型:
前言 今天复习了一些前端算法题,写到一两道比较有意思的题:重建二叉树、反向输出链表每个节点 题目 重建二叉树: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列 {1,2,4,7,3,5,6,8} 和中序遍历序列 {
最近在看回JavaScript的面试题,this 指向问题是入坑前端必须了解的知识点,现在迎来了ES6+的时代,因为箭头函数的出现,所以感觉有必要对 this 问题梳理一下,所以刚好总结一下JavaScript中this指向的问题。
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)