JavaScript创建对象的7种方式

    xiaoxiao2022-07-06  195

    JavaScript创建对象的7种方式

    工厂模式

    function Person(){ var obj = new Object(); obj.name = 'aaa'; obj.say = function(){ console.log(this.name); } return obj; } var person1 = Person(); person1.say(); console.log(person1.name);

    不使用new操作符,函数内部返回一个新创建的对象,存在无法通过constructor识别对象和创建多个实例时,会多次存储共同的方法,浪费资源的问题。

    构造函数模式

    function Person(){ this.name = 'aaa'; this.say = function(){ console.log(this.name); } } var person1 = new Person(); person1.say(); console.log(person1.name);

    通过new关键字创建实例,解决了constructor识别问题,但多个实例多次存储共同的方法的问题仍未解决。

    原型模式

    function Person(){} Person.prototype.name = 'aaa'; Person.prototype.say = function(){ console.log(this.name); } var person1 = new Person(); person1.say(); console.log(person1.name);

    多个实例对象共享属性和方法,解决了上述问题,但可能会存在应用类型属性互相影响的情况。

    构造函数+原型模式

    function Person(name){ this.name = name; } Person.prototype.say = function(){ console.log(this.name); } var person1 = new Person('a'); var person2 = new Person('b'); person1.say(); person2.say();

    目前最为广泛、认可度最高的方法,原型链的方式定义共享方法,实例拥有自己的属性,不会互相影响。

    动态原型模式

    function Person(name){ this.name = name; if(typeof this.say!= 'function'){ Person.prototype.say = function(){ console.log(this.name); } } } var person1 = new Person('aa'); person1.say();

    可以在初次调用构造函数的时候就完成原型对象的修改,且修改能体现在所有实例中

    寄生构造模式

    function Person(name){ var obj = new Object(); obj.name = name; obj.say = function(){ console.log(this.name); } return obj; } var person1 = new Person('aa'); person1.say();

    和工厂模式形式上的区别是使用了new操作符

    稳妥构造模式

    function Person(name){ var obj = new Object(); obj.name = name; obj.say = function () { console.log(name); } return obj; } var person1 = Person('aaa'); person1.say();

    适用于禁用this和new的环境下,但是存在无法通过constructor识别对象和创建多个实例时,会多次存储共同的方法,浪费资源的问题。

    最新回复(0)