JavaScript创建对象的几种方式

谁践踏了优雅 2022-05-14 02:29 293阅读 0赞

**JavaScript创建对象的几种方式**

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

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

构造函数的执行过程：

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

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

**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.为了解决构造传参和共享问题，可以组合构造函数+ 原型模式**  
将不共享的属性封装在构造函数，将共享的方法封装在原型中

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

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

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

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