01_对象的创建方法

Posted 2020-09-06

在平时的JS编码中，我们经常要创建一个对象，创建一个对象的方法有很多种，每一种方法都有自己的优缺点，这里全面剖析一下创建对象常用的6种方法，以及罗列他们的优缺点以供选择。

1.Object构造函数的方法；

2.对象字面量的方法；

3.工厂函数的模式；

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

5.使用原型的方法；

6.自定义构造函数和原型组合的方法；

 

01_Object构造函数的方法创造一个函数：（先创建一个空的对象，在手动添加属性和方法）；

　　var person = {} ;
　  //或者：var person = new Object();
　　person.name = ‘Tom‘;  
　　person.setName = function(name){this.name = name};
　　alert(person.name); 　　// 输出 Tom
　　person.setName(‘Jack‘);
　　alert(person.name);　　//输出 Jack

　　　  缺点：代码数量过多；

　　　　适用于：对象的属性起始不确定；

02_使用对象字面量的方法创造函数：(创造对象的同时指定属性和方法)；

　var person = {
　　　　name: ‘Tom‘,
　　　　setName: function(name){this.name = name;}
　　}
　　alert(person.name);　　//输出Tom
　　person.setName(‘Jack‘);
　　alert(person.name);　　//输出Jack

 

　　　  缺点：创建多个同类对象时有重复代码；

　　　　适用：提前知道属性值的对象；

03_工厂函数的模式创建一个人的对象；（把创造一个人的对象封装到一个工厂函数中，直接调用就可以产生大量的人）；

　function createPerson(name){
　　　　var person = {
　　　　　　name: name,
　　　　　　setName: function(name){this.name = name;}
　　　　}
　　　　return person;
　　}
　　var person1 = createPerson(‘Tom‘);
　　alert(person1.name);　　//输出Tom
　　person1.setName(‘Jack‘);　　
　　alert(person1.name);　　//输出Jack
　　var person2 = creatPerson(‘Lucy‘);　　//调用工厂函数创造第二个人的对象，仅调用即可；

 

　　　  缺点：对象没有具体的类型，就是Object,可以与下面的方法对比；

　　　　优点：解决了字面量方法的问题，可以大量生产对象；

4_使用自定义构造函数的方法创造一个人的对象；

 

    function Person(name){
        this.name = name ;
        this.setName = function(){
            this.name = name;
        }
    }
    var person = new Person(‘Tom‘);
    alert(person.name);    //输出Tom
    person.setName(‘Jack‘);
    alert(person.name);    //输出Jack

 

　　　　缺点：数据没有复用，会占用更多的空间；

　　　　优点：相对于工厂函数方法，创造的对象都有各自共同的对象名：Person；

5_使用原型的方法创造一个人的对象；

 

function Person(){}
Person.prototype.name = ‘‘;
Person.prototype.setName = function(name){
    this.name = name;};
var person = new Person();　　//创建对象时不能直接指定属性；
person.name = ‘Tom‘;
alert(person.name);    //输出Tom
person.setName(‘Jack‘);
alert(person.name);　　//输出Jack

 

　　　　缺点：创建对象时不能直接指定属性，需要重新添加，非常麻烦；

　　　  优点：解决了使用自定义构造函数的方法存在的数据不能复用的问题；

 

 

 6_使用自定义构造函数和原型组合的方法创造对象，可以结合4、5方法的优点，推荐在一些较复杂的对象中使用；

 

function Person(name){
    this.name = name
}
Person.prototype.setName = function(name){
    this.name=name;
}
var person = new Person(‘Tom‘);   //输出Tom
alert(person.name);
alert(person.setName(‘Jack‘));  //输出Jack

 

　　　　优点：结合了4、5的优点，即能复用数据，又能在创建函数的时候添加属性，同类对象的公共方法保存在父对象的原型中，方便调用；在实际中最常使用。