（學習筆記）javascript創(chuàng)建對象的幾種方式，以及es6 class 如何轉化成es5代碼創(chuàng)建對象
1. 最簡單的對象字面量和Object構造函數(shù)兩種方式####
//object構造函數(shù)方法
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!');
}
}
但是這兩種方法只能創(chuàng)建一個對象涣仿，無法進行批量創(chuàng)建，不利于封裝嗜桌。
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. 構造函數(shù)模式和原型模式####
//構造函數(shù)模式
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();
//構造函數(shù)+原型組合模式
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, '小黑');
這兩個模式层亿，分別都走了極端桦卒。構造函數(shù)模式在創(chuàng)建對象時，每一個屬性都會被重新創(chuàng)建匿又。而在原型模式每一個屬性只會被創(chuàng)建一次方灾，而且改變其中一個對象的屬性，會污染其他對象琳省。而這兩者的結合就解決了兩方的缺點迎吵。
4. es6 class創(chuàng)建對象####
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定義對象的區(qū)別
- class的構造函數(shù)必須使用new進行調用，普通構造函數(shù)不用new也可執(zhí)行针贬。
- 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;
};
}();
// 對構造函數(shù)進行判定
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是否為構造函數(shù)
_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, '小黑');
