JavaScript创造对象的4种基本方法

• 1. 字面量创建
  
  • 基本写法
• 2. 使用内置构造函数创建对象
  
  • JS中的内置构造函数
  • 基本写法
• 3. 工厂模式
  
  • 基本写法
• 4. 自定义构造函数模式
  
  • 用构造函数模式将前面的例子重写：
  • 自定义构造函数通用写法：

1. 字面量创建

字面量创建是由若干名/值对组成的映射表，名/值对中间用冒号分隔，名/值对之间用逗号分隔，整个映射表用花括号括起来。

基本写法

var student1 = {
    name : 'cocytus',
    age : 23,
    gender : 'male';
};

var student2 = {
    name : 'tansan',
    age : 23,
    gender : 'female';
};

console.log(student1.name);
console.log(student1.age);
console.log(student1.male);

优点：简单，直观，易懂。

缺点：①代码复用性差；②代码冗余度高

2. 使用内置构造函数创建对象

JS中的内置构造函数

String
Number
Boolean
Date
Array
Function
Object
RegExp

基本写法

  var obj1 = new Object();

  obj1.name = 'cocytus';
  obj1.age = 23;
  obj1.hobby = ['JavaScript','HTML'];
  obj1.height = 175;

  console.log(obj1);

弊端：①创建的对象无法复用；②代码冗余度高

3. 工厂模式

工厂模式抽象了创建具体对象的过程。考虑到 ECMAScript 中无法创建类，开发人员就发明了一种函数，用函数来封装以待定接口创建对象的细节。

基本写法

    /**
   * 功能：批量创建同一个类型的对象
   * 参数：对象的不同属性值
   * 返回值：当前创建出来的对象
   */
  function createPerson(age,gender,name) {
    var person = new Object();
    person.age = age;
    person.gender = gender;
    person.name = name;
    person.sayName = function(){
    };
    return person;
  }

  var person1 = create{Person}(18,"male","zs");
  console.log(person1);
  var person2 = createPerson(20,"male","ls");
  console.log(person2);
  var person3 = createPerson(19,"male","ww");
  console.log(person3);

优点：可以批量创建同一种类型的对象

缺点：没有解决对象识别的问题（看不到对象类型）

4. 自定义构造函数模式

为了解决从原型对象生成实例的问题， JavaScript 提供了一个构造函数模式。

所谓“构造函数”，其实就是一个普通函数，但是内部使用了 this 变量，对构造函数使用 new 运算符，就能生成实例，并且 this 变量会绑定在实例对象上。

用构造函数模式将前面的例子重写：

    function Person(age,gender,name){//构造函数首字母一定大写
        this.age = age;
        this.gender = gender;
        this.name = name;
        this.sayName = function(){
            alert(this.name);
        };
    }

    var person1 = new Person(18,"male","zs");
    console.log(person1);
    var person2 = new Person(20,"male","ls");
    console.log(person2);
    var person3 = new Person(19,"male","ww");
    console.log(person3);

自定义构造函数通用写法：

function 构造函数名(参数1,参数2,参数3...) {
        //设置对象的属性
        this.属性01 = 参数1;
        this.属性02 = 参数2;
        //设置对象的方法
        this.方法01 = function () {
            //.....
        };
        this.方法02 = function () {
            //.....
        }
    }
    // 自定义构造函数方式创建对象
    var 对象01 = new 构造函数名(实参01,实参02,实参03...);
    var 对象02 = new 构造函数名(实参01,实参02,实参03...);

必须使用 new 操作符，这种方式调用构造函数实际上经历了以下4个步骤：

1. 创建了一个新的空对象
2. 将构造函数里面的 this 指向了这新对象
3. 执行了这个构造函数的函数体
4. 将创建出来的新对象返回

优点：可以批量创建，只要需要每一次 new 一个即可，并且可以看到具象化的类型

缺点：需要自己创建一个构造函数