JS中创建对象的方法

摘要

“在JS中,一切皆对象”,相信很多朋友都听说这句话。假如你去问一些做前端开发工作的朋友他们是如何创建一个对象的,笔者相信你得到最多的答案应该是:Object构造函数和对象字面量。今天笔者就来详细总结一下JavaScript中创建对象的方法。

“在JS中,一切皆对象”,相信很多朋友都听说这句话。假如你去问一些做前端开发工作的朋友他们是如何创建一个对象的,笔者相信你得到最多的答案应该是:Object构造函数和对象字面量。今天笔者就来详细总结一下JavaScript中创建对象的方法

一、Object构造函数

  1. var oPerson = new Object();
  2. obj.name = 'shaw';
  3. obj.age = 18;

二、对象字面量

  1. var oPerson = {name: 'shaw', age: 18};

这两种创建对象的方法相信是很多前端开发工程师常用的方式,而且大多数工程师更习惯于使用对象字面量的方式。以上两种方式虽然书写简便,但是在创建多个对象时往往就会出现大量相同的代码。JS在设计中为了避免此类情况的发生,衍生出了“工厂模式”。

三、工厂模式

听到“工厂模式”,很多朋友可能没有任何概念。其实用一句话概括就是:我负责创建一个对象和创建对象的整个过程,其余我的就不归我管了。

如果还是没弄明白,看看下面的代码:

  1. function createPerson(name, age) {
  2.     var obj = new Object();
  3.     obj.name = name;
  4.     obj.age = age;
  5.     return obj;
  6. }
  7. var oPerson = createPerson('shaw', 18);

四、构造函数

  1. function Person(name, age) {
  2.     this.name = name;
  3.     this.age = age;
  4. }
  5. var oPerson = new Person('shaw', 18);

我们可以看到,相比较于“工厂模式”,构造函数的方式更为简洁。通过对比代码,我们也能总结出“工厂模式”和面向对象的区别。

1、构造函数创建对象的时候以new关键字调用

2、构造函数将属性挂载到this下

3、构造函数不需要返回值

五、原型模式

  1. function Person() {}
  2. Person.prototype.name = 'shaw';
  3. Person.prototype.age = 18;
  4. var oPerson = new Person();
  5. // 上面的方法还可以用字面量的方式进行简写
  6. function Person() {}
  7. Person.prototype = {
  8.     constructor: Person,
  9.     name: 'shaw',
  10.     age: 18
  11. }
  12. var oPerson = new Person();

注:使用这种方式的时候,我们需要注意自己手动重置一下constructor,不过这种方式还是不够好,应为constructor属性默认是不可枚举的,这样直接设置后它将变为可枚举的属性。

六、组合使用构造函数和原型模式

  1. function Person(name, age) {
  2.     this.name = name;
  3.     this.age = age;
  4. }
  5. Person.prototype.say = function() {
  6.     console.log(this.name);
  7. }
  8. var oPerson = new Person('shaw', 18);

这种方式不同于原型模式,这也是使用最为广泛的一种形式。这种形式既保证了每个对象属性的私有性,同时对象之间还共享了相同的方法。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: