JavaScript创建对象的几种方式

JavaScript创建对象的几种方式

通过字面量的方式创建对象

var obj{
    name:"张学友", job:"歌手", sing:function(){ console.log("大家好，我是学友！");
    }
}
  
  
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7

2.通过new操作符和内置构造函数Object()

var obj = new Object();
        obj.singer = "张学友";
        obj.sing = function () {
           console.log("一千个伤心的母牛");
        }
  
  
   
   1
   
   2
   
   3
   
   4
   
   5

以上两种方式的缺点是：代码复用性差，如果要创建多个类似的对象，会产生大量的重复代码

3.工厂模式：避免创建多个类似对象造成代码冗余

function singer(name,age){
            var o =new Object();
            o.name = name;
            o.age = age;
            o.sing = function () {
                console.log("大家好,我是"+this.name);
            }
            return o;
        }
var zxy = singer("张学友",20);
console.log(typeof zxy);/*输出Object*/

  
  
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12

工厂模式缺点：工厂模式解决了重复实例化的问题，但还有一个问题，无法搞清楚他们到底是哪个对象的实例。（即无法识别它是Object的实例对象还是singer的实例对象）

4.自定义构造函数的方法：

function Singer(name, age) { //首字母大写以区分普通函数
   this.name = name;
   this.age = age;
   this.sing = function () {
    console.log("大家好,我是"+this.name);
   };
}
var zxy = new("张学友",20);
  
  
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8

构造函数的执行过程：

当使用了构造函数，并且 new 构造函数()，后台就执行了 new Object()
调用构造函数，把新创建出来的对象赋值给构造函数内的this
在构造函数内使用this为新创建出来的对象新增成员
返回新对象(后台直接返回)

构造函数式的优点：即解决了重复实例化的问题，又解决了对象识别的问题
缺点：在构造函数中定义的方法，每次创建对象时，都会重新创建该方法，造成了资源浪费

5.使用原型创建对象

function Singer() {} //声明一个构造函数
Singer.prototype.name = '张学友'; //在原型里添加属性
Singer.prototype.age = 20;
Singer.prototype.sing = function () { //在原型里添加方法
   console.log("大家好,我是"+this.name);
};
  
  
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6

为了封装属性和方法，并且减少不必要的代码，原型的创建可以使用字面量的方式：

//使用字面量的方式
function Singer() {};
Singe.prototype = { 
    constructor : Singer;//使用字面量的方式，别忘了这一步哟
    name : "张学友",
    age : 20,
    sing : function () {
         console.log("大家好,我是"+this.name);
    }
};
  
  
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10

原型方法的缺点：构造函数的原型对象中的成员，可以被该构造函数创建出来的所有对象访问,即所有的对象共享数据,还无法传参。
6.为了解决构造传参和共享问题，可以组合构造函数+ 原型模式
将不共享的属性封装在构造函数，将共享的方法封装在原型中

function Singer(name, age) { //不共享的使用构造函数
    this.name = name;
    this.age = age;
};
Singer.prototype = { //共享的使用原型模式
    constructor :Singer,
    sing : function () {
       console.log("大家好,我是"+this.name);
    }
};
  
  
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10

划重点：这种混合模式解决了传参和对象共享数据的问题。但是，原型模式，不管是否调用了原型中的共享方法，它都会初始化原型中的方法。并且，明明是一个东西，写成了两部分，如果学过C#和Java，这让人感觉很怪异。于是动态原型模式闪亮登场

7.动态原型模式（完美方案）

function Singer(name ,age) { 
        this.name = name;
        this.age = age;

        if (typeof this.sing != 'function') { //仅在第一次调用的初始化
             Singer.prototype.sing = function () {
                 console.log("大家好,我是"+this.name);
            };
        }
}


  
  
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14

此外还有两种用的较少的方式：

1.寄生构造函数：其实就是工厂模式+构造函数模式

<p>function Singer(name, age) { 
    var obj = new Object(); 
    obj.name = name; 
    obj.age = age; 
    obj.sing = function () { 
         console.log(“大家好,我是”+this.name);
  };
return obj; 
}

.2.稳妥构造函数：在一些安全的环境中使用，比如禁止使用 this 和 new（在外部实例化构造函数时不使用 new）

function Singer(name , age) {
    var obj = new Object();
    obj.sing = function () {
        console.log("大家好,我是"+this.name);
};
    return obj;
}

var zxy = Singer('张学友', 20);
  
  
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9

JavaScript创建对象的几种方式

通过字面量的方式创建对象

JavaScript创建对象的几种方式

猜你喜欢