1.對(duì)象（object）

（1）對(duì)象是單個(gè)實(shí)物的抽象。

一本書、一輛汽車、一個(gè)人都可以是對(duì)象，一個(gè)數(shù)據(jù)庫(kù)、一張網(wǎng)頁(yè)、一個(gè)與遠(yuǎn)程服務(wù)器的連接也可以是對(duì)象。當(dāng)實(shí)物被抽象成對(duì)象，實(shí)物之間的關(guān)系就變成了對(duì)象之間的關(guān)系，從而就可以模擬現(xiàn)實(shí)情況，針對(duì)對(duì)象進(jìn)行編程。

（2）對(duì)象是一個(gè)容器，封裝了屬性（property）和方法（method）。

屬性是對(duì)象的狀態(tài)，方法是對(duì)象的行為（完成某種任務(wù)）。比如，我們可以把動(dòng)物抽象為animal對(duì)象，使用“屬性”記錄具體是那一種動(dòng)物，使用“方法”表示動(dòng)物的某種行為（奔跑、捕獵、休息等等）。

2.構(gòu)造函數(shù)

面向?qū)ο缶幊痰牡谝徊剑褪且蓪?duì)象。前面說(shuō)過(guò)，對(duì)象是單個(gè)實(shí)物的抽象。通常需要一個(gè)模板，表示某一類實(shí)物的共同特征，然后對(duì)象根據(jù)這個(gè)模板生成。JavaScript 語(yǔ)言使用構(gòu)造函數(shù)（constructor）作為對(duì)象的模板。所謂”構(gòu)造函數(shù)”，就是專門用來(lái)生成實(shí)例對(duì)象的函數(shù)。它就是對(duì)象的模板，描述實(shí)例對(duì)象的基本結(jié)構(gòu)。一個(gè)構(gòu)造函數(shù)，可以生成多個(gè)實(shí)例對(duì)象，這些實(shí)例對(duì)象都有相同的結(jié)構(gòu)。

構(gòu)造函數(shù)就是一個(gè)普通的函數(shù)，但是有自己的特征和用法。

var Vehicle = function () {
 this.price = 1000;
};

上面代碼中，Vehicle就是構(gòu)造函數(shù)。為了與普通函數(shù)區(qū)別，構(gòu)造函數(shù)名字的第一個(gè)字母通常大寫。

構(gòu)造函數(shù)的特點(diǎn)有兩個(gè)：

• 函數(shù)體內(nèi)部使用了this關(guān)鍵字，代表了所要生成的對(duì)象實(shí)例。
• 生成對(duì)象的時(shí)候，必須使用new命令。

下面先介紹new命令：

3.new 命令

new命令的作用，就是執(zhí)行構(gòu)造函數(shù)，返回一個(gè)實(shí)例對(duì)象。

var Vehicle = function () {
 this.price = 1000;
};
 
var v = new Vehicle();
v.price // 1000

上面代碼通過(guò)new命令，讓構(gòu)造函數(shù)Vehicle生成一個(gè)實(shí)例對(duì)象，保存在變量v中。這個(gè)新生成的實(shí)例對(duì)象，從構(gòu)造函數(shù)Vehicle得到了price屬性。new命令執(zhí)行時(shí)，構(gòu)造函數(shù)內(nèi)部的this，就代表了新生成的實(shí)例對(duì)象，this.price表示實(shí)例對(duì)象有一個(gè)price屬性，值是1000。

使用new命令時(shí)，根據(jù)需要，構(gòu)造函數(shù)也可以接受參數(shù)。

var Vehicle = function (p) {
 this.price = p;
};
 
var v = new Vehicle(500);

new命令本身就可以執(zhí)行構(gòu)造函數(shù)，所以后面的構(gòu)造函數(shù)可以帶括號(hào)，也可以不帶括號(hào)。下面兩行代碼是等價(jià)的，但是為了表示這里是函數(shù)調(diào)用，推薦使用括號(hào)。

// 推薦的寫法
var v = new Vehicle();
// 不推薦的寫法
var v = new Vehicle;

一個(gè)很自然的問(wèn)題是，如果忘了使用new命令，直接調(diào)用構(gòu)造函數(shù)會(huì)發(fā)生什么事？

這種情況下，構(gòu)造函數(shù)就變成了普通函數(shù)，并不會(huì)生成實(shí)例對(duì)象。而且由于后面會(huì)說(shuō)到的原因，this這時(shí)代表全局對(duì)象，將造成一些意想不到的結(jié)果。

var Vehicle = function (){
 this.price = 1000;//this指向window
};
 
var v = Vehicle();
v // undefined
price // 1000

上面代碼中，調(diào)用Vehicle構(gòu)造函數(shù)時(shí)，忘了加上new命令。結(jié)果，變量v變成了undefined，而price屬性變成了全局變量。因此，應(yīng)該非常小心，避免不使用new命令、直接調(diào)用構(gòu)造函數(shù)。

為了保證構(gòu)造函數(shù)必須與new命令一起使用，一個(gè)解決辦法是使用嚴(yán)格模式。這樣的話，一旦忘了使用new命令，直接調(diào)用構(gòu)造函數(shù)就會(huì)報(bào)錯(cuò)。

'use strict';//由于嚴(yán)格模式中，函數(shù)內(nèi)部的this不能指向全局對(duì)象，默認(rèn)等于undefined
var Vehicle = function (){ 
	this.price = 1000;//因?yàn)槭褂脟?yán)格模式，this為undefined
};
 
var v = Vehicle();

function Fubar(foo, bar){
 'use strict';
 debugger
 this._foo = foo;
 this._bar = bar;
}
Fubar()

上面代碼的Fubar為構(gòu)造函數(shù)，use strict命令保證了該函數(shù)在嚴(yán)格模式下運(yùn)行。由于嚴(yán)格模式中，函數(shù)內(nèi)部的this不能指向全局對(duì)象，默認(rèn)等于undefined，導(dǎo)致不加new調(diào)用會(huì)報(bào)錯(cuò)（JavaScript 不允許對(duì)undefined添加屬性）。

new 命令的原理

使用new命令時(shí)，它后面的函數(shù)依次執(zhí)行下面的步驟。

1. 創(chuàng)建一個(gè)空對(duì)象，作為將要返回的對(duì)象實(shí)例。
2. 將這個(gè)空對(duì)象的原型，指向構(gòu)造函數(shù)的prototype屬性。
3. 將這個(gè)空對(duì)象賦值給函數(shù)內(nèi)部的this關(guān)鍵字。
4. 開始執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼

也就是說(shuō)，構(gòu)造函數(shù)內(nèi)部，this指的是一個(gè)新生成的空對(duì)象，所有針對(duì)this的操作，都會(huì)發(fā)生在這個(gè)空對(duì)象上。構(gòu)造函數(shù)之所以叫“構(gòu)造函數(shù)”，就是說(shuō)這個(gè)函數(shù)的目的，就是操作一個(gè)空對(duì)象（即this對(duì)象），將其“構(gòu)造”為需要的樣子。

如果構(gòu)造函數(shù)內(nèi)部有return語(yǔ)句，而且return后面跟著一個(gè)對(duì)象，new命令會(huì)返回return語(yǔ)句指定的對(duì)象；否則，就會(huì)不管return語(yǔ)句，返回this對(duì)象。

var Vehicle = function () {
 this.price = 1000;
 return 1000;
};
 
(new Vehicle()) === 1000
// false

上面代碼中，構(gòu)造函數(shù)Vehicle的return語(yǔ)句返回一個(gè)數(shù)值。這時(shí)，new命令就會(huì)忽略這個(gè)return語(yǔ)句，返回“構(gòu)造”后的this對(duì)象。

但是，如果return語(yǔ)句返回的是一個(gè)跟this無(wú)關(guān)的新對(duì)象，new命令會(huì)返回這個(gè)新對(duì)象，而不是this對(duì)象。這一點(diǎn)需要特別引起注意。

var Vehicle = function (){
 this.price = 1000;
 return { price: 2000 };
};
 
(new Vehicle()).price
// 2000

上面代碼中，構(gòu)造函數(shù)Vehicle的return語(yǔ)句，返回的是一個(gè)新對(duì)象。new命令會(huì)返回這個(gè)對(duì)象，而不是this對(duì)象。

另一方面，如果對(duì)普通函數(shù)（內(nèi)部沒(méi)有this關(guān)鍵字的函數(shù)）使用new命令，則會(huì)返回一個(gè)空對(duì)象。

function getMessage() {
 return 'this is a message';
}
 
var msg = new getMessage();
 
msg // {}
typeof msg // "object"

上面代碼中，getMessage是一個(gè)普通函數(shù)，返回一個(gè)字符串。對(duì)它使用new命令，會(huì)得到一個(gè)空對(duì)象。這是因?yàn)?code>new命令總是返回一個(gè)對(duì)象，要么是實(shí)例對(duì)象，要么是return語(yǔ)句指定的對(duì)象。本例中，return語(yǔ)句返回的是字符串，所以new命令就忽略了該語(yǔ)句。

new.target

函數(shù)內(nèi)部可以使用new.target屬性。如果當(dāng)前函數(shù)是new命令調(diào)用，new.target指向當(dāng)前函數(shù)，否則為undefined。

function f() {
 console.log(new.target === f);
}
 
f() // false
new f() // true

使用這個(gè)屬性，可以判斷函數(shù)調(diào)用的時(shí)候，是否使用new命令。

function f() {
 if (!new.target) {
  throw new Error('請(qǐng)使用 new 命令調(diào)用！');
 }
 // ...
}
 
f() // Uncaught Error: 請(qǐng)使用 new 命令調(diào)用！

上面代碼中，構(gòu)造函數(shù)f調(diào)用時(shí)，沒(méi)有使用new命令，就拋出一個(gè)錯(cuò)誤。

Object.create() 創(chuàng)建實(shí)例對(duì)象

構(gòu)造函數(shù)作為模板，可以生成實(shí)例對(duì)象。但是，有時(shí)拿不到構(gòu)造函數(shù)，只能拿到一個(gè)現(xiàn)有的對(duì)象。我們希望以這個(gè)現(xiàn)有的對(duì)象作為模板，生成新的實(shí)例對(duì)象，這時(shí)就可以使用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 張三.

上面代碼中，對(duì)象person1是person2的模板，后者繼承了前者的屬性和方法。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。