JavaScript对象创建模式实例汇总

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript对象创建模式实例汇总，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4434字，纯文字阅读大概需要7分钟。

内容图文

本文实例总结了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对象创建模式实例汇总所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

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

内容手机端