JS面向物件程式設計基礎篇(一) 物件和建構函式例項詳解
本文例項講述了JS面向物件程式設計物件和建構函式。分享給大家供大家參考,具體如下:
面向物件程式設計(Object Oriented Programming,縮寫為 OOP)是目前主流的程式設計正規化。它將真實世界各種複雜的關係,抽象為一個個物件,然後由物件之間的分工與合作,完成對真實世界的模擬。每一個物件都是功能中心,具有明確分工,可以完成接受資訊、處理資料、發出資訊等任務。物件可以複用,通過繼承機制還可以定製。因此,面向物件程式設計具有靈活、程式碼可複用、高度模組化等特點,容易維護和開發,比起由一系列函式或指令組成的傳統的程序式程式設計(procedural programming),更適合多人合作的大型軟體專案。
1.物件(object)
(1)物件是單個實物的抽象。
一本書、一輛汽車、一個人都可以是物件,一個數據庫、一張網頁、一個與遠端伺服器的連線也可以是物件。當實物被抽象成物件,實物之間的關係就變成了物件之間的關係,從而就可以模擬現實情況,針對物件進行程式設計。
(2)物件是一個容器,封裝了屬性(property)和方法(method)。
屬性是物件的狀態,方法是物件的行為(完成某種任務)。比如,我們可以把動物抽象為animal
物件,使用“屬性”記錄具體是那一種動物,使用“方法”表示動物的某種行為(奔跑、捕獵、休息等等)。
2.建構函式
面向物件程式設計的第一步,就是要生成物件。前面說過,物件是單個實物的抽象。通常需要一個模板,表示某一類實物的共同特徵,然後物件根據這個模板生成。JavaScript 語言使用建構函式(constructor)作為物件的模板。
建構函式就是一個普通的函式,但是有自己的特徵和用法。
var Vehicle = function () { this.price = 1000; };
上面程式碼中,Vehicle
就是建構函式。為了與普通函式區別,建構函式名字的第一個字母通常大寫。
建構函式的特點有兩個:
- 函式體內部使用了
this
關鍵字,代表了所要生成的物件例項。 - 生成物件的時候,必須使用
new
命令。
下面先介紹new
命令:
3.new 命令
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;
一個很自然的問題是,如果忘了使用new
命令,直接呼叫建構函式會發生什麼事?
這種情況下,建構函式就變成了普通函式,並不會生成例項物件。而且由於後面會說到的原因,this
這時代表全域性物件,將造成一些意想不到的結果。
var Vehicle = function (){ this.price = 1000;//this指向window }; var v = Vehicle(); v // undefined price // 1000
上面程式碼中,呼叫Vehicle
建構函式時,忘了加上new
命令。結果,變數v
變成了undefined
,而price
屬性變成了全域性變數。因此,應該非常小心,避免不使用new
命令、直接呼叫建構函式。
為了保證建構函式必須與new
命令一起使用,一個解決辦法是使用嚴格模式。這樣的話,一旦忘了使用new
命令,直接呼叫建構函式就會報錯。
'use strict';//由於嚴格模式中,函式內部的this不能指向全域性物件,預設等於undefined var Vehicle = function (){ this.price = 1000;//因為使用嚴格模式,this為undefined }; var v = Vehicle();
function Fubar(foo,bar){ 'use strict'; debugger this._foo = foo; this._bar = bar; } Fubar()
上面程式碼的Fubar
為建構函式,use strict
命令保證了該函式在嚴格模式下執行。由於嚴格模式中,函式內部的this
不能指向全域性物件,預設等於undefined
,導致不加new
呼叫會報錯(JavaScript 不允許對undefined
新增屬性)。
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
語句返回一個數值。這時,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
命令,會得到一個空物件。這是因為new
命令總是返回一個物件,要麼是例項物件,要麼是return
語句指定的物件。本例中,return
語句返回的是字串,所以new
命令就忽略了該語句。
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
命令,就丟擲一個錯誤。
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
的模板,後者繼承了前者的屬性和方法。
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於JavaScript相關內容感興趣的讀者可檢視本站專題:《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程式設計有所幫助。