前言
典型的面向對象編程語言(比如C++和Java),存在“類”(class)這個概念。所謂“類”就是對象的模板,對象就是“類”的實例。但是,在 JavaScript 語言的對象體系,不是基于“類”的,而是基于構造函數(constructor)和原型鏈(prototype)。
1 對象的概念
“面向對象編程”(Object Oriented Programming,縮寫為OOP),是目前主流的編程范式。它的核心思想是將真實世界中各種復雜的關系,抽象為一個個對象,然后由對象之間的分工與合作,完成對真實世界的模擬。總結一下:
- 對象是單個實物的抽象
- 對象是一個容器,封裝了“屬性”和“方法”
- 所謂屬性,就是對象的一種狀態;所謂方法,就是對象的一種行為
- 比如說,可以把動物抽象為animal對象,屬性記錄的就是哪一種動物,以及該動物的大小和顏色等。方法表示該動物的某種行為(奔跑,獵食,交配,休息等等)。
2 構造函數
- “面向對象編程”的第一步,就是要生成對象。而js中面向對象編程是基于構造函數(constructor)和原型鏈(prototype)的。
- 前面說過,“對象”是單個實物的抽象。通常需要一個模板,表示某一類實物的共同特征,然后“對象”根據這個模板生成。js語言中使用構造函數(constructor)作為對象的模板。
- 所謂構造函數,就是提供一個生成對象的模板,并描述對象的基本結構的函數。一個構造函數,可以生成多個對象,每個對象都有相同的結構。
看一下構造函數的基本結構
var People = function() {
this.name = 'xiaoyi'; // 注意這里xiaoyi要加單引號, 不然會認為這個是變量,并且未定義
this.age = 25;
}
// 兩種寫法相同
function People() {
this.name = 'xiaoyi';
this.age = 25;
}
上面代碼中,People就是構造函數,它提供模板,用來生成對象實例。(就是可以按照這個方法定義別的變量)。為了與普通函數區別,構造函數名字的第一個字母通常大寫(這里的People,不大寫也不會報錯,但是還是按照規則比較好)。
構造函數的三大特點:
- 構造函數的函數名的第一個字母通常大寫。
- 函數體內使用this關鍵字,代表所要生成的對象實例。
- 生成對象的時候,必須使用 new 命令來調用構造函數。
3 new 命令
基本原理
new 命令的作用,就是執行一個構造函數,并且返回一個對象實例。使用new命令時,它后面的函數調用就不是正常的調用,而是依次執行下面的步驟。
- 創建一個空對象,作為將要返回的對象實例。
- 將空對象的原型指向了構造函數的prototype屬性。
- 將空對象賦值給構造函數內部的this關鍵字。
- 開始執行構造函數內部的代碼。
也就是說,構造函數內部,this指向的是一個新生成的空對象,所有針對this的操作,都會發生在這個空對象上。構造函數之所謂構造函數,意思是這個函數的目的就是操作一個空對象(即this對象),將其構造為需要的樣子。
以上是 new 命令的基本原理,這個很重要。以下會用具體實例來驗證該原理的過程。
基本用法
new 命令的作用,就是調用一個構造函數,并且返回一個對象實例。
function People() {
this.age = 25;
}
var wll = new People();
console.log(wll.age);
上面代碼通過 new 命令,讓構造函數 People 生成一個對象實例,并賦值給全局變量 wll。這個新生成的對象實例,從構造函數 People 中繼承了 age 屬性。同時說明這個對象實例是沒有 age 屬性的。在 new 命令執行時,就代表了新生成的對象實例 wll,this.age 表示對象實例有一個age屬性,它的值是25。
使用 new 命令時,根據需要,構造函數也可以接受參數。
function People(name, age) {
this.name = name;
this.age = age;
}
var wll = new People('wangleilei', 25);
console.log(wll.name); // wangleilei
console.log(wll.age); // 25
console.log(wll); // People {name: "wangleilei", age: 25}
上面代碼中,我們創建了一個構造函數People,傳入了兩個參數 name 和age,構造函數 People 內部使用了 this 關鍵字來指向將要生成的對象實例。
然后,我們使用 new 命令來創建對象實例 wll。
當我們使用 new 命令來調用構造函數時,new 命令會創建一個空對象 wll,作為將要返回的實例對象。接著,這個空對象的原型會指向構造函數 People 的prototype屬性,即 People.prototype。
然后我們將這個空對象賦值給構造函數內部的this關鍵字,也就是說,讓構造函數內部的this關鍵字指向一個對象實例。最后,開始執行構造函數內部的代碼。
因為對象實例 wll 是沒有 name和age屬性的,所以對象實例中的兩個屬性都是繼承自構造函數 People中的,這也說明了構造函數是生成對象的函數,是給對象提供模板的函數。
一個問題,如果我們忘記使用 new 命令來調用構造函數,直接調用構造函數了,會發生什么?
function People() {
this.age = 25;
}
var wll = People();
console.log(wll); // undefined
console.log(wll.age); // TypeError: wll is undefined
console.log(window.age); // 25
可見,這種情況下,構造函數變成了普通函數,并不會生成實例對象(wll 是 undefined)
并且,this 指向了全局作用域(如果有 new 則不會),age 也就變成了全局變量。
解決辦法:
1、 在構造函數內部使用嚴格模式,即第一行加上use strict。
function People() {
'use strict';
this.age = 25;
}
var wll = People();
console.log(wll); // Cannot set property 'age' of undefined
console.log(window.age);// undefined
嚴格模式下,函數內部的 this 不能指向全局對象,即便指向了全局,this 默認值等于undefined(如上代碼)。
2、另一個解決辦法,是在構造函數內部判斷是否使用 new 命令,如果發現沒有使用,則直接返回一個實例對象。
function People(age) {
if(!(this instanceof People)) {
return new People(age);
}
this.age = age;
}
var wll = People(25);
console.log(wll.age); // 25
上面代碼中,構造函數不管加不加new命令,都會得到同樣的結果。
3、 如果構造函數內部有 return 語句,而且 return 后面跟著一個復雜數據類型(對象,數組等),new 命令會返回 return 語句指定的對象;如果 return 語句后面跟著一個簡單數據類型(字符串,布爾值,數字等),則會忽略 return 語句,返回 this 對象。
function People() {
this.age = 25;
return {
age: 26
};
}
var wll = new People();
console.log(wll.age); //26
function People() {
this.age = 25;
return 27;
}
var wll = new People();
console.log(wll.age); //25
4、另一方面,如果對普通函數(內部沒有this關鍵字的函數)使用 new 命令,則會返回一個空對象。
function People() {
return 'its a message';
}
var wll = new People();
console.log(wll); // People {}
上面代碼中,對普通函數 People 使用 new 命令,會創建一個空對象。這是因為 new 命令總
是返回一個對象,要么是實例對象,要么是 return 語句指定的對象或數組。本例中,return 語句返回的是字符串,所以 new 命令就忽略了該語句。
來自 http://www.cnblogs.com/Uncle-Keith/p/5803551.html 有修改。謝謝!