實例對象與 new 命令 · JavaScript 教程

# 實例對象與 new 命令 JavaScript 語言具有很強的面向對象編程能力，本章介紹 JavaScript 面向對象編程的基礎知識。 ## 對象是什么面向對象編程（Object Oriented Programming，縮寫為 OOP）是目前主流的編程范式。它將真實世界各種復雜的關系，抽象為一個個對象，然后由對象之間的分工與合作，完成對真實世界的模擬。每一個對象都是功能中心，具有明確分工，可以完成接受信息、處理數據、發出信息等任務。對象可以復用，通過繼承機制還可以定制。因此，面向對象編程具有靈活、代碼可復用、高度模塊化等特點，容易維護和開發，比起由一系列函數或指令組成的傳統的過程式編程（procedural programming），更適合多人合作的大型軟件項目。那么，“對象”（object）到底是什么？我們從兩個層次來理解。 **（1）對象是單個實物的抽象。** 一本書、一輛汽車、一個人都可以是對象，一個數據庫、一張網頁、一個遠程服務器連接也可以是對象。當實物被抽象成對象，實物之間的關系就變成了對象之間的關系，從而就可以模擬現實情況，針對對象進行編程。 **（2）對象是一個容器，封裝了屬性（property）和方法（method）。** 屬性是對象的狀態，方法是對象的行為（完成某種任務）。比如，我們可以把動物抽象為`animal`對象，使用“屬性”記錄具體是哪一種動物，使用“方法”表示動物的某種行為（奔跑、捕獵、休息等等）。 ## 構造函數面向對象編程的第一步，就是要生成對象。前面說過，對象是單個實物的抽象。通常需要一個模板，表示某一類實物的共同特征，然后對象根據這個模板生成。典型的面向對象編程語言（比如 C++ 和 Java），都有“類”（class）這個概念。所謂“類”就是對象的模板，對象就是“類”的實例。但是，JavaScript 語言的對象體系，不是基于“類”的，而是基于構造函數（constructor）和原型鏈（prototype）。 JavaScript 語言使用構造函數（constructor）作為對象的模板。所謂”構造函數”，就是專門用來生成實例對象的函數。它就是對象的模板，描述實例對象的基本結構。一個構造函數，可以生成多個實例對象，這些實例對象都有相同的結構。構造函數就是一個普通的函數，但具有自己的特征和用法。 ```javascript var Vehicle = function () { this.price = 1000; }; ``` 上面代碼中，`Vehicle`就是構造函數。為了與普通函數區別，構造函數名字的第一個字母通常大寫。構造函數的特點有兩個。 - 函數體內部使用了`this`關鍵字，代表了所要生成的對象實例。 - 生成對象的時候，必須使用`new`命令。下面先介紹`new`命令。 ## new 命令 ### 基本用法 `new`命令的作用，就是執行構造函數，返回一個實例對象。 ```javascript 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`命令時，根據需要，構造函數也可以接受參數。 ```javascript var Vehicle = function (p) { this.price = p; }; var v = new Vehicle(500); ``` `new`命令本身就可以執行構造函數，所以后面的構造函數可以帶括號，也可以不帶括號。下面兩行代碼是等價的，但是為了表示這里是函數調用，推薦使用括號。 ```javascript // 推薦的寫法 var v = new Vehicle(); // 不推薦的寫法 var v = new Vehicle; ``` 一個很自然的問題是，如果忘了使用`new`命令，直接調用構造函數會發生什么事？這種情況下，構造函數就變成了普通函數，并不會生成實例對象。而且由于后面會說到的原因，`this`這時代表全局對象，將造成一些意想不到的結果。 ```javascript var Vehicle = function (){ this.price = 1000; }; var v = Vehicle(); v // undefined price // 1000 ``` 上面代碼中，調用`Vehicle`構造函數時，忘了加上`new`命令。結果，變量`v`變成了`undefined`，而`price`屬性變成了全局變量。因此，應該非常小心，避免不使用`new`命令、直接調用構造函數。為了保證構造函數必須與`new`命令一起使用，一個解決辦法是，構造函數內部使用嚴格模式，即第一行加上`use strict`。這樣的話，一旦忘了使用`new`命令，直接調用構造函數就會報錯。 ```javascript 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`命令，如果發現沒有使用，則直接返回一個實例對象。 ```javascript 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`命令，都會得到同樣的結果。 ### new 命令的原理使用`new`命令時，它后面的函數依次執行下面的步驟。 1. 創建一個空對象，作為將要返回的對象實例。 1. 將這個空對象的原型，指向構造函數的`prototype`屬性。 1. 將這個空對象賦值給函數內部的`this`關鍵字。 1. 開始執行構造函數內部的代碼。也就是說，構造函數內部，`this`指的是一個新生成的空對象，所有針對`this`的操作，都會發生在這個空對象上。構造函數之所以叫“構造函數”，就是說這個函數的目的，就是操作一個空對象（即`this`對象），將其“構造”為需要的樣子。如果構造函數內部有`return`語句，而且`return`后面跟著一個對象，`new`命令會返回`return`語句指定的對象；否則，就會不管`return`語句，返回`this`對象。 ```javascript var Vehicle = function () { this.price = 1000; return 1000; }; (new Vehicle()) === 1000 // false ``` 上面代碼中，構造函數`Vehicle`的`return`語句返回一個數值。這時，`new`命令就會忽略這個`return`語句，返回“構造”后的`this`對象。但是，如果`return`語句返回的是一個跟`this`無關的新對象，`new`命令會返回這個新對象，而不是`this`對象。這一點需要特別引起注意。 ```javascript var Vehicle = function (){ this.price = 1000; return { price: 2000 }; }; (new Vehicle()).price // 2000 ``` 上面代碼中，構造函數`Vehicle`的`return`語句，返回的是一個新對象。`new`命令會返回這個對象，而不是`this`對象。另一方面，如果對普通函數（內部沒有`this`關鍵字的函數）使用`new`命令，則會返回一個空對象。 ```javascript function getMessage() { return 'this is a message'; } var msg = new getMessage(); msg // {} typeof msg // "object" ``` 上面代碼中，`getMessage`是一個普通函數，返回一個字符串。對它使用`new`命令，會得到一個空對象。這是因為`new`命令總是返回一個對象，要么是實例對象，要么是`return`語句指定的對象。本例中，`return`語句返回的是字符串，所以`new`命令就忽略了該語句。 `new`命令簡化的內部流程，可以用下面的代碼表示。 ```javascript 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); ``` ### new.target 函數內部可以使用`new.target`屬性。如果當前函數是`new`命令調用，`new.target`指向當前函數，否則為`undefined`。 ```javascript function f() { console.log(new.target === f); } f() // false new f() // true ``` 使用這個屬性，可以判斷函數調用的時候，是否使用`new`命令。 ```javascript function f() { if (!new.target) { throw new Error('請使用 new 命令調用！'); } // ... } f() // Uncaught Error: 請使用 new 命令調用！ ``` 上面代碼中，構造函數`f`調用時，沒有使用`new`命令，就拋出一個錯誤。 ## Object.create() 創建實例對象構造函數作為模板，可以生成實例對象。但是，有時拿不到構造函數，只能拿到一個現有的對象。我們希望以這個現有的對象作為模板，生成新的實例對象，這時就可以使用`Object.create()`方法。 ```javascript 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()`的詳細介紹，請看后面的相關章節。