• js中创建对象的几种方式


    1.Object 构造函数模式

     先创建空Object对象, 再动态添加属性/方法

      * 适用场景: 起始时不确定对象内部数据
      * 问题: 语句太多
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
      var p = new Object()
      p = {} //此时内部数据是不确定的
      // 再动态添加属性/方法
      p.name = 'Tom'
      p.age = 12
      p.setName = function (name) {
        this.name = name
      }

    2.字面量

     使用{}创建对象, 同时指定属性/方法
      * 适用场景: 起始时对象内部数据是确定的
      * 问题: 如果创建多个对象, 有重复代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
      
     var p = {
        name: 'Tom',
        age: 12,
        setName: function (name) {
          this.name = name
        }
      }

      //测试
      console.log(p.name, p.age)
      p.setName('JACK')
      console.log(p.name, p.age)

    3.工厂模式

     通过工厂函数动态创建对象并返回
      * 适用场景: 需要创建多个对象
      * 问题: 对象没有一个具体的类型, 都是Object类型
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function createObj(name, sex){
        var obj = new Object();
        obj.name = name;
        obj.sex = sex;
        obj.sayName = function(){
          alert(this.name);
        }
        return obj;
      }
     
    var person = createObj('Tom', 'man');

    缺点:①无法确定对象的类型(因为都是Object)。

       ②创建的多个对象之间没有关联。

    4.构造函数

    自定义构造函数, 通过new创建对象
      * 适用场景: 需要创建多个类型确定的对象
      * 问题: 每个对象都有相同的数据, 浪费内存
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function createObj(name, sex){
        this.name = name;
        this.sex = sex;
        this.sayName = function(){
          alert(this.name);
        }
      }
     
      var person = new createObj('Tom', 'man');

    缺点:①多个实例重复创建方法,无法共享。

         ②多个实例都有sayName方法,但均不是同一个Function的实例。 

    5.原型方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function createObj(){}
     
      createObj.prototype.name = 'Tom';
      createObj.prototype.sex = 'man';
      createObj.prototype.sayName = function(){
        alert(this.name);
      }
     
    var person = new createObj();

    缺点:①无法传入参数,不能初始化属性值。

         ②如果包含引用类型的值时,改变其中一个实例的值,则会在所有实例中体现。 

    6.组合式(构造函数+原型方法)推荐使用

    构造函数+原型的组合模式
      * 套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
      * 适用场景: 需要创建多个类型确定的对象
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function createObj(name, sex){
      this.name = name;
      this.sex = sex;
     }
     createObj.prototype.sayName = function(){
      alert(this.name);
     }
     
     var person = new createObj('Tom', 'man');

    优点:构造函数共享实例属性,原型共享方法和想要共享的属性。可传递参数,初始化属性值。 

    7.动态原型方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function createObj(name, sex){
      this.name = name;
      this.sex = sex;
      if(typeof this.sayName != 'function'){
       createObj.prototype.sayName = function(){
        alert(this.name);
       }
      }
     }
     
     var person = new createObj('Tom', 'man');
     

    if语句中只会调用一次,就是在碰到第一个实例调用方法时会执。此后所有实例都会共享该方法。在动态原型方法下,不能使用对象字面量重写原型。

  • 相关阅读:
    Mesos 配置项解析
    1039. Course List for Student (25)
    Cts框架解析(12)-ITargetPreparer
    通过ulimit改善linux系统性能(摘自IBM)
    HDU 1080 DP
    C语言调用Lua函数
    创建MySQL从库
    C# Func<>托付
    SpringMVC入门
    VNC连接Ubuntu 16.04桌面灰色的问题解决
  • 原文地址:https://www.cnblogs.com/ll15888/p/13784561.html
Copyright © 2020-2023  润新知