美文网首页
创建对象的方式汇总

创建对象的方式汇总

作者: David三人行 | 来源:发表于2017-03-15 20:39 被阅读12次

在javascript中,创建对象的方式有很多种。假设我们要创建一个描述人的对象,这个对象有一个name属性和一个speak方法。针对这种情况,我们下面会一一列举不同的实现方式。
1.直接创建对象

var obj = new Object();
obj.name = 'david';
obj.speak = function(){
  alert(this.name);
}

2.对象字面量的方式

var obj = {
  name:'david',
  speak:function(){
    alert(this.name);
  }
}

以上两种是最常见的创建对象方式,能够解决大部分的变量创建场景。然而,当你需要创建多个相似的对象,以上方法就显得比较乏力了,你需要不断的写重复代码。这时候,你需要引入一些设计模式来解决这个问题。
3.工厂模式

function createPeople(name){
    var obj = new Object();
    obj.name = name;
    obj.speak = function(){
        alert(this.name);
    }
    return obj;
}
createPeople('people1');
createPeople('people2');
createPeople('people3');
...

工厂模式这种动态创建对象的方式能够解决大部分的创建多个对象场景。然而上面的工厂模式仍有所不足。
1.创建的对象之间毫无关系。
2.每次创建对象都动态创建了匿名函数,占据了而外的内存空间。而实际上这些方法都可以公用。
因而,我们引入了构造函数。
4.构造函数
什么叫构造函数呢?它实际上就是一个普通函数,只是它跟普通函数有些区别,比如:
1.我们建议用首字母大写的函数名在区别普通函数。
2.没有return语句。
3.内部有this变量。
4.使用new关键字调用。
然后,我们用一个new关键字去创建对象。

function People(name){
  this.name = name;
  this.speak = function(){
      alert(this.name); 
  }
}
var david = new People('david');
david.speak();//david
var jimmy = new People('jimmy');
jimmy.speak();//jimmy

上述例子中,我们成功创建了一个david对象。然而它是怎么实现创建对象的呢?实际上在new一个构造函数时,它做了如下4个动作:

function people(name){
    var obj = new Object();//1.动态创建对象
    People.apply(obj,arguments);//2.把this对象指向新创建的对象
    obj.__proto__ = People.prototype;//3.把对象的__proto__属性指向对象的prototype
    return obj;//4.返回对象
}
var david = people('david');
var jimmy = people('jimmy');
david.speak();//david
jimmy.speak();//jimmy

通过构造函数创建的对象,彼此是有联系的。每一个通过构造函数创建的对象,都会有一个内置的constructor属性,该属性指向构造方法。

david.constructor === People//true
jimmy.constructor === People//true

并且,我们可以通过instanceof 来识别对象。

david instanceof People//true
jimmy instanceof People//true

这样就解决了对象的识别问题。然而用构造函数创建变量,还是没有解决重复创建实例方法的问题,每次创建对象,仍然会创建匿名函数并指向speak。有没有一种方式能够让实例对象共享方法或者属性呢?

jimmy.speak===david.speak//false

为了解决实例的属性、方法共享问题。javascript引入了原型的概念。

具体查看我的其中一篇文章。

5.原型

function People(name){
    this.name = name;
}
People.prototype.speak = function(){
    alert(this.name);
}
var david = new People('david');
var jimmy = new People('jimmy');
david.speak===jimmy.speak;//true

这种方式把需要共享的方法放到原型中,当访问实例对象中的属性或者函数时,如果在实例对象中找不到,则会在其原型对象中查找。这就避免了重复创建函数的弊端了~
(这其实不是纯粹的原型模式,而是构造函数和原型组成的新模式。在javascript权威指南中,原型模式把所有属性、方法都放在原型对象上。个人觉得这里生硬的拆开构造函数和原型有些不妥,会让新手困惑。原型、构造函数、实例对象的关系可以查看我的另一篇博文http://www.jianshu.com/p/753322534214

相关文章

  • JS-最全的创建对象方式

    JS最全创建对象方式汇总 1.最简单的方式--创建一个Object实例 2.对象字面量 以上均为创建单个对象的方法...

  • 创建对象的方式汇总

    在javascript中,创建对象的方式有很多种。假设我们要创建一个描述人的对象,这个对象有一个name属性和一个...

  • JavaScript 基础操作汇总

    参考网址 JavaScript 对象参考手册 JavaScript基础参考手册汇总 Array 对象 创建方式: ...

  • javascript面向对象解析(一)

    创建对象的方式 json对象方式创建对象 Object方式 声明构造函数方式,创建对象 -- 这种创建对象的方式用...

  • Java基础-创建对象的方式汇总

    上一篇 <<<单例模式(Singleton Pattern)[https://www.jianshu.com/p/...

  • Vue基本指令

    Vue的基本指令功能和使用方式汇总 Vue的基本结构 通过元素创建Vue对象 el:Vue对象指定的元素范围 da...

  • 要解决问题2022.04.05

    1、多样本读取与创建对象 参考:Seurat包之导入单细胞数据方式汇总[https://www.jianshu.c...

  • 设计模式-责任链模式(Chain of Responsibili

    上一篇 <<<创建对象的方式汇总[https://www.jianshu.com/p/5a78da6e99dd]下...

  • 浅谈23种设计模式(4/23)

    设计模式汇总 创建型模式 这些设计模式提供了一种在创建对象的同时隐藏创建逻辑的方式,而不是使用新的运算符直接实例化...

  • JS创建对象及对象属性获取

    组合方式创建对象 除了常用的创建单个对象的方式外,我们希望批量创建对象时,一般采用组合方式来创建对象。下面是具体的...

网友评论

      本文标题:创建对象的方式汇总

      本文链接:https://www.haomeiwen.com/subject/htsknttx.html