这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 对象创建模式, 结合实例形式总结分析了 JavaScript 常见的对象创建模式, 包括工厂模式、构造函数模式、原型模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式等, 需要的朋友可以参考下
本文实例总结了 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0525/331449.html