javascript创建对象的方法。es6 class 创建对象用es5实现

（学习笔记）javascript创建对象的几种方式，以及es6 class 如何转化成es5代码创建对象

原文地址

1. 最简单的对象字面量和Object构造函数两种方式####

//object构造函数方法
var person = new Object();
person.age = 22;
person.name = 'Dolanf';
person.code = function() {
  console.log(‘hello world！’);
};

//字面量方法
var person = {
    age: 22,
    name: 'Dolanf',
    code: function() {
         console.log('hello world!');
    }
}

但是这两种方法只能创建一个对象，无法进行批量创建，不利于封装。

2. 工厂模式####

function createPerson(age, name) { 
    var o = new Object();
    o.age = age;
    o.name = name;
    o.code = function() {
         console.log('hello world!');
    };
 
    return o;
}
 
var person1 = createPerson(11, '小白');
var person2 = createPerson(12, '小黑');

但是这种方法也有一个问题，那就是我们无法辨别对象。在每一个对象的proto属性中，construction属性都是Object。

3. 构造函数模式和原型模式####

//构造函数模式
function Person(age, name) { 
    this.age = age;
    this.name = name;
    this.code = function() {
         console.log('hello world!');
    };
}

var person1 = new Person(11, '小白');
var person2 = new Person(12, '小黑');

//原型模式

function Person(age, name) { 
    Person.prototype.age = age;
    Person.prototype.name = name;
    Person.prototype.code = function() {
         console.log('hello world！');
    };
}

var person1 = new Person();
var person2 = new Person();


//构造函数+原型组合模式

function  Person(age, name) { 
    this.age = age;
    this.name = name;
    this.cry = function() {
         console.log(name + 'is crying!!! T^T');
    }
}
Person.prototype = {
    constructor: Person,
    sayName: function() {
        console.log(this.name);
    }
}
var person1 = new Person(11, '小白');
var person2 = new Person(12, '小黑');

这两个模式，分别都走了极端。构造函数模式在创建对象时，每一个属性都会被重新创建。而在原型模式每一个属性只会被创建一次，而且改变其中一个对象的属性，会污染其他对象。而这两者的结合就解决了两方的缺点。

4. es6 class创建对象####

function  Person(age, name) { 
    this.age = age;
    this.name = name;
    this.cry = function() {
         console.log(name + 'is crying!!! T^T');
    }
}
Person.prototype = {
    constructor: Person,
    sayName: function() {
        console.log(this.name);
    }
}
var person1 = new Person(11, '小白');
var person2 = new Person(12, '小黑');


class Person{ 
    constructor(age, name) {
        this.age = age;
        this.name = name;
        this.cry = function() {
         console.log(name + 'is crying!!! T^T');
        }
    }
    sayName() {
        console.log(this.name);
    }
}
var person1 = new Person(11, '小白');
var person2 = new Person(12, '小黑');

es5和es6 class定义对象的区别

• class的构造函数必须使用new进行调用，普通构造函数不用new也可执行。
• class不存在变量提升，es5中的function存在变量提升。
• class内部定义的方法不可枚举，es5在prototype上定义的方法可以枚举

'use strict'; // es6中class使用的是严格模式

// 处理class中的方法
var _createClass = function () { 
   function defineProperties(target, props) { 
      for (var i = 0; i < props.length; i++) { 
         var descriptor = props[i]; 
         // 默认不可枚举
         descriptor.enumerable = descriptor.enumerable || false; 
         descriptor.configurable = true; 
         if ("value" in descriptor) descriptor.writable = true; 
         Object.defineProperty(target, descriptor.key, descriptor);
      } 
   } 
   return function (Constructor, protoProps, staticProps) { 
      if (protoProps) defineProperties(Constructor.prototype, protoProps); 
      if (staticProps) defineProperties(Constructor, staticProps); 
      return Constructor; 
   }; 
}();

// 对构造函数进行判定
function _classCallCheck(instance, Constructor) { 
   if (!(instance instanceof Constructor)) { 
      throw new TypeError("Cannot call a class as a function"); 
   }
}

// class Person转换为 es5的function
var Person = function () {
    function Person(age, name) {
        // 调用了_classCallCheck检查Person是否为构造函数
        _classCallCheck(this, Person); 

        this.age = age;
        this.name = name;
        this.cry = function () {
            console.log(name + 'is crying!!! T^T');
        };
    }

    // 调用_createClass处理定义在class中的方法。
    _createClass(Person, [{
        key: 'sayName',
        value: function sayName() {
            console.log(this.name);
        }
    }]);

    return Person;
}();

var person1 = new Person(11, '小白');
var person2 = new Person(12, '小黑');