|
Note部分爲個人理解, 可能有理解不準確之處, 望提出交流
Chrome: 版本 83.0.4103.61（正式版本） （64 位）
1.目錄
對象是什麼
構造函數
new 命令
-基本用法
-new 命令的原理
-new.target
Object.create() 創建實例對象
2.對象是什麼
面向對象編程（Object Oriented Programming，縮寫爲 OOP）是目前主流的編程範式。它將真實世界各種複雜的關係，抽象爲一個個對象，然後由對象之間的分工與合作，完成對真實世界的模擬。
每一個對象都是功能中心，具有明確分工，可以完成接受信息、處理數據、發出信息等任務。
對象可以複用，通過繼承機制還可以定製。因此，面向對象編程具有靈活、代碼可複用、高度模塊化等特點，容易維護和開發，比起由一系列函數或指令組成的傳統的過程式編程（procedural programming），更適合多人合作的大型軟件項目。
那麼，“對象”（object）到底是什麼？我們從兩個層次來理解。
（1）對象是單個實物的抽象。
一本書、一輛汽車、一個人都可以是對象，一個數據庫、一張網頁、一個與遠程服務器的連接也可以是對象。當實物被抽象成對象，實物之間的關係就變成了對象之間的關係，從而就可以模擬現實情況，針對對象進行編程。
Note: 萬物皆是對象
（2）對象是一個容器，封裝了屬性（property）和方法（method）。
屬性是對象的狀態，方法是對象的行爲（完成某種任務）。比如，我們可以把動物抽象爲animal對象，使用“屬性”記錄具體是那一種動物，使用“方法”表示動物的某種行爲（奔跑、捕獵、休息等等）
Note: 至於容器, 能存放東西即容器. 這個東西在編程裏即數據, 所以如, 變量, 常量, 數組, 對象, 數據庫等都是容器, 看你怎麼理解, 從哪些角度觀察.
3.構造函數
面向對象編程的第一步，就是要生成對象。
前面說過，對象是單個實物的抽象。通常需要一個模板，表示某一類實物的共同特徵，然後對象根據這個模板生成。
典型的面向對象編程語言（比如 C++ 和 Java），都有“類”（class）這個概念。所謂“類”就是對象的模板，對象就是“類”的實例。
但是，JavaScript 語言的對象體系，不是基於“類”的，而是基於構造函數（constructor）和原型鏈（prototype）。
JavaScript 語言使用構造函數（constructor）作爲對象的模板。所謂”構造函數”，就是專門用來生成實例對象的函數。它就是對象的模板，描述實例對象的基本結構。一個構造函數，可以生成多個實例對象，這些實例對象都有相同的結構。
構造函數就是一個普通的函數，但是有自己的特徵和用法。
var Vehicle = function () {
this.price = 1000;
};
上面代碼中，Vehicle就是構造函數。爲了與普通函數區別，構造函數名字的第一個字母通常大寫。
構造函數的特點有兩個。
- 函數體內部使用了
this關鍵字，代表了所要生成的對象實例。
- 生成對象的時候，必須使用
new命令。
4.new 命令
4.1 基本用法
new命令的作用，就是執行構造函數，返回一個實例對象。
var Vehicle = function () {
this.price = 1000;
};
var v = new Vehicle();
v.price // 1000
上面代碼通過new命令，讓構造函數Vehicle生成一個實例對象，保存在變量v中。
這個新生成的實例對象，從構造函數Vehicle得到了price屬性。
new命令執行時，構造函數內部的this，就代表了新生成的實例對象，this.price表示實例對象有一個price屬性，值是1000。
使用new命令時，根據需要，構造函數也可以接受參數
var Vehicle = function (p) {
this.price = p;
};
var v = new Vehicle(500);
new命令本身就可以執行構造函數，所以後面的構造函數可以帶括號，也可以不帶括號。
下面兩行代碼是等價的，但是爲了表示這裏是函數調用，推薦使用括號。
// 推薦的寫法
var v = new Vehicle();
// 不推薦的寫法
var v = new Vehicle;
Q: 一個很自然的問題是，如果忘了使用new命令，直接調用構造函數會發生什麼事？
A: 這種情況下，構造函數就變成了普通函數，並不會生成實例對象。
而且由於後面會說到的原因，this這時代表全局對象，將造成一些意想不到的結果。
var Vehicle = function (){
this.price = 1000;
};
var v = Vehicle();
v // undefined
price // 1000
上面代碼中，調用Vehicle構造函數時，忘了加上new命令。
結果，變量v變成了undefined，而price屬性變成了全局變量。因此，應該非常小心，避免不使用new命令、直接調用構造函數。
爲了保證構造函數必須與new命令一起使用，一個解決辦法是，構造函數內部使用嚴格模式，即第一行加上use strict。這樣的話，一旦忘了使用new命令，直接調用構造函數就會報錯。
function Fubar(foo, bar){
'use strict';
this._foo = foo;
this._bar = bar;
}
Fubar()
// TypeError: Cannot set property '_foo' of undefined
上面代碼的Fubar爲構造函數，use strict命令保證了該函數在嚴格模式下運行。
由於嚴格模式中，函數內部的this不能指向全局對象，默認等於undefined，導致不加new調用會報錯（JavaScript 不允許對undefined添加屬性）
另一個解決辦法，構造函數內部判斷是否使用new命令，如果發現沒有使用，則直接返回一個實例對象。//推薦使用
function Fubar(foo, bar) {
if (!(this instanceof Fubar)) {
return new Fubar(foo, bar);
}
this._foo = foo;
this._bar = bar;
}
Fubar(1, 2)._foo // 1
(new Fubar(1, 2))._foo // 1
上面代碼中的構造函數，不管加不加new命令，都會得到同樣的結果。
4.2 new 命令的原理
使用new命令時，它後面的函數依次執行下面的步驟。//建議多讀兩遍, 思考記憶下
- 創建一個空對象，作爲將要返回的對象實例。
- 將這個空對象的原型，指向構造函數的
prototype屬性。
- 將這個空對象賦值給函數內部的
this關鍵字。
- 開始執行構造函數內部的代碼。
也就是說，構造函數內部，this指的是一個新生成的空對象，所有針對this的操作，都會發生在這個空對象上。構造函數之所以叫“構造函數”，就是說這個函數的目的，就是操作一個空對象（即this對象），將其“構造”爲需要的樣子。
如果構造函數內部有return語句，而且return後面跟着一個對象，new命令會返回return語句指定的對象；
否則，就會不管return語句，返回this對象。
var Vehicle = function () {
this.price = 1000;
return 1000;
};
(new Vehicle()) === 1000
// false
![]()
上面代碼中，構造函數Vehicle的return語句返回一個數值。[Note: 不是對象] 這時，new命令就會忽略這個return語句，返回“構造”後的this對象。
但是，如果return語句返回的是一個跟this無關的新對象，new命令會返回這個新對象，而不是this對象。這一點需要特別引起注意。
var Vehicle = function (){
this.price = 1000;
return { price: 2000 };
};
(new Vehicle()).price
// 2000
![]()
上面代碼中，構造函數Vehicle的return語句，返回的是一個新對象。new命令會返回這個對象，而不是this對象。
另一方面，如果對普通函數（內部沒有this關鍵字的函數）使用new命令，則會返回一個空對象。
function getMessage() {
return 'this is a message';
}
var msg = new getMessage();
msg // {}
typeof msg // "object"
![]()
上面代碼中，getMessage是一個普通函數，返回一個字符串。對它使用new命令，會得到一個空對象。//似有不同 TBD
這是因爲new命令總是返回一個對象，要麼是實例對象，要麼是return語句指定的對象。本例中，return語句返回的是字符串，所以new命令就忽略了該語句。
new命令簡化的內部流程，可以用下面的代碼表示。//建議, 認真閱讀, 理解其中的執行流程
function Person(name, age){
this.name = name;
this.age = age;
}
function _new(/* 構造函數 */ constructor, /* 構造函數參數 */ params) {
// 將 arguments 對象轉爲數組
var args = [].slice.call(arguments);
// 取出構造函數
var constructor = args.shift();
// 創建一個空對象，繼承構造函數的 prototype 屬性
var context = Object.create(constructor.prototype);
// 執行構造函數
var result = constructor.apply(context, args);
// 如果返回結果是對象，就直接返回，否則返回 context 對象
return (typeof result === 'object' && result != null) ? result : context;
}
// 實例
var actor = _new(Person, '張三', 28);
![]()
執行結果:
![]()
4.3 new.target
函數內部可以使用new.target屬性。如果當前函數是new命令調用，new.target指向當前函數，否則爲undefined。
function f() {
console.log(new.target === f);
}
f() // false
new f() // true
使用這個屬性，可以判斷函數調用的時候，是否使用new命令。
function f() {
if (!new.target) {
throw new Error('請使用 new 命令調用！');
}
// ...
}
f() // Uncaught Error: 請使用 new 命令調用！
截圖:
![]()
上面代碼中，構造函數f調用時，沒有使用new命令，就拋出一個錯誤。
5.Object.create() 創建實例對象
構造函數作爲模板，可以生成實例對象。
但是，有時拿不到構造函數，只能拿到一個現有的對象。我們希望以這個現有的對象作爲模板，生成新的實例對象，這時就可以使用Object.create()方法。
var person1 = {
name: '張三',
age: 38,
greeting: function() {
console.log('Hi! I\'m ' + this.name + '.');
}
};
var person2 = Object.create(person1);
person2.name // 張三
person2.greeting() // Hi! I'm 張三.
上面代碼中，對象person1是person2的模板，後者繼承了前者的屬性和方法。
Object.create()的詳細介紹，請看 https://wangdoc.com/javascript/oop/object.html#objectcreate。
後續補充
...
|
