前端知識總結系列筆記一： new Object()和Object.create()的區別

關於對象包裝器

1. 內置對象

JavaScript是面向對象的語言，爲了方便操做基本類型值，ECMAScript還提供了3種特殊的引用類型：Boolean, Number, String。

舉個栗子，具體看String對象

String對象

String對象是文本值的包裝器，除了爲變量存儲文本，String對象還包含一些屬性和方法來獲取或操做文本的信息，不須要進行實例化就能夠直接使用。例如能夠用一個只讀的length屬性用於返回字符串的長度，運用一些方法如charAt、concat、indexOf、slice等返回開發者所須要的信息（這裏不詳細介紹這些方法的用途）。

思考1： 字符串‘123’ 和 new String（‘123’）的區別

const a = '123'; // Output: 123 輸出值類型 123，是基本數據類型
const b = new String('123'); // Output: String {'123'} 輸出對象類型， 是複雜數據類型

Object.getPrototypeOf(a) === Object.getPrototypeOf(b); // true, a和b的原型都是同樣的，都指向String內置對象
複製代碼

思考2：字符串什麼狀況下會轉換成String內置對象？

看下面一段代碼

const s1 = 'jiaxin';
const s2 = s1.substring(2);
複製代碼

上述這段代碼變量 s1 是一個字符串，屬於基本類型值。而下面一行代碼而是調用了s1的substring（）方法，並將放回的結果保存在了s2中。按道理來講，s1是一個基本數據類型而已，不該該有方法，可是確實能調用String內置對象提供的一系列方法，爲何呢？實際上爲了實現這種直觀的操做，後臺已經自動完成了一系列的處理。主要有如下幾個過程：

（1）從內存中讀取s1這個變量的值

（2）建立String類型的一個實例

（3）在實例上調用指定的方法

（4）銷燬這個實例

能夠將以上幾個步驟想象成執行了下述代碼：

const s1 = new String('jiaxin');
const s2 = s1.substring(2);
s1 = null;
複製代碼

總結：

對象包裝器就是將原始類型（string、number、boolean...）轉換成對應的對象（String、Number、Boolean）。

關於 new Object()

1. 語法

用途： 爲給定值建立一個對象的包裝器，建立出來的對象是其定值所屬內置對象的實例

new Object(a) // a可爲數據類型，如 number， string， Object

2. 特徵

(1) 與對象的包裝類型的建立一致

// 如下建立的二者是同樣的
new Object(1);
new Number(1);
複製代碼

控制檯的輸出

// 再舉個栗子， 也是一致的
new Object('111');
new String('111');
複製代碼

控制檯輸出

注意：若是給定值爲null 或 undefined，則返回空對象， 若是給定值是一個對象，則返回原對象,數組同理

new Object(null);
new Object(undefined);
new Object({
    name: 'jiaxin',
    age: 18
});
複製代碼

控制檯輸出

（2）建立出來的對象爲其定值所屬內置對象的實例

// instanceof運算符用於測試構造函數的prototype屬性是否出如今對象的原型鏈中的任何位置
new Object('foo') instanceof String; // true
new Object(true) instanceof Boolean; // true
複製代碼

（3）若是Object的參數是一個對象，則返回原對象，數組同理

function Foo () {};
new Object(Foo) === Foo; // true 若是Object的參數是一個對象，則返回原對象
複製代碼

關於 Object.create()

1. 語法

用途：不用定義一個構造函數，該方法憑空建立一個新對象並把新對象內部的[[prototype]]關聯到你指定的對象

返回值：一個空對象，帶着指定的原型對象和屬性

Object.create(proto, [propertiesObject])

參數說明：

（1）proto：新建立對象的原型對象

（2）propertiesObject：可選，不指定則爲undefined，是要添加到的新建立對象中的可枚舉屬性 （即其自身定義的屬性，而不是其原型鏈上的枚舉屬性）

const Girl = {
    name: 'jiaxin',
    age: 18,
    sayHello: function() {
        console.log(`Hello, I am ${this.name}`);
    }
}

let girl1 = Object.create(Girl); // Output: {}

girl1.__proto__ === Girl; // true 建立出來的對象的原型指向其指定的對象Girl
複製代碼

2. 實現原理

function Foo() {};

const foo = Object.create(Foo);

const fn = function() {};
fn.prototype = Foo;
const foo = new fn()
複製代碼

3. 用new Object()實現Object.create()

function Foo() {};

const fn = Object.create(Foo.prototype);
// 等價於
const fn = new Object();
fn.__proto__ = Foo.prototype;
複製代碼

總結：

一、new Object(a)用於建立一個對象包裝器。

（1）若是a爲string，number，boolean，則返回其對應的基本包裝類型的對象，至關於返回new String(a),new Number(a),new Boolean(a)的實例；

（2）若是a爲空，null，undefined，則返回一個空對象{}；

（3）若是a爲對象或數組，則返回原對象或數組

二、Object.create()用於建立一個新對象並把新對象內部的[[prototype]]關聯到你指定的對象