js创建对象的几种方式对比

逃离我推掉我的手 2022-06-01 13:43 303阅读 0赞

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

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

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

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

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

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*/

工厂模式缺点：工厂模式解决了重复实例化的问题，但还有一个问题，无法搞清楚他们到底是哪个对象的实例。（即无法识别它是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.  当使用了构造函数，并且 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);
    };

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

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

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

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

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

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);

以上就是我总结的js创建对象的方法，若有疏漏和错误，请指教