本文实例总结了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 // truecat 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); // falsealert(cat.sayName === dog.sayName); // true
新闻热点
疑难解答
图片精选