JS面向?qū)ο缶幊袒A(chǔ)篇(一) 對象和構(gòu)造函數(shù)實(shí)例詳解
本文實(shí)例講述了JS面向?qū)ο缶幊虒ο蠛蜆?gòu)造函數(shù)。分享給大家供大家參考,具體如下:
面向?qū)ο缶幊?/b>(Object Oriented Programming,縮寫為 OOP)是目前主流的編程范式。它將真實(shí)世界各種復(fù)雜的關(guān)系,抽象為一個(gè)個(gè)對象,然后由對象之間的分工與合作,完成對真實(shí)世界的模擬。每一個(gè)對象都是功能中心,具有明確分工,可以完成接受信息、處理數(shù)據(jù)、發(fā)出信息等任務(wù)。對象可以復(fù)用,通過繼承機(jī)制還可以定制。因此,面向?qū)ο缶幊叹哂徐`活、代碼可復(fù)用、高度模塊化等特點(diǎn),容易維護(hù)和開發(fā),比起由一系列函數(shù)或指令組成的傳統(tǒng)的過程式編程(procedural programming),更適合多人合作的大型軟件項(xiàng)目。
1.對象(object)(1)對象是單個(gè)實(shí)物的抽象。
一本書、一輛汽車、一個(gè)人都可以是對象,一個(gè)數(shù)據(jù)庫、一張網(wǎng)頁、一個(gè)與遠(yuǎn)程服務(wù)器的連接也可以是對象。當(dāng)實(shí)物被抽象成對象,實(shí)物之間的關(guān)系就變成了對象之間的關(guān)系,從而就可以模擬現(xiàn)實(shí)情況,針對對象進(jìn)行編程。
(2)對象是一個(gè)容器,封裝了屬性(property)和方法(method)。
屬性是對象的狀態(tài),方法是對象的行為(完成某種任務(wù))。比如,我們可以把動(dòng)物抽象為animal對象,使用“屬性”記錄具體是那一種動(dòng)物,使用“方法”表示動(dòng)物的某種行為(奔跑、捕獵、休息等等)。
2.構(gòu)造函數(shù)面向?qū)ο缶幊痰牡谝徊?,就是要生成對?/b>。前面說過,對象是單個(gè)實(shí)物的抽象。通常需要一個(gè)模板,表示某一類實(shí)物的共同特征,然后對象根據(jù)這個(gè)模板生成。JavaScript 語言使用構(gòu)造函數(shù)(constructor)作為對象的模板。所謂”構(gòu)造函數(shù)”,就是專門用來生成實(shí)例對象的函數(shù)。它就是對象的模板,描述實(shí)例對象的基本結(jié)構(gòu)。一個(gè)構(gòu)造函數(shù),可以生成多個(gè)實(shí)例對象,這些實(shí)例對象都有相同的結(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)鍵字,代表了所要生成的對象實(shí)例。 生成對象的時(shí)候,必須使用new命令。下面先介紹new命令:
3.new 命令new命令的作用,就是執(zhí)行構(gòu)造函數(shù),返回一個(gè)實(shí)例對象。
var Vehicle = function () { this.price = 1000;}; var v = new Vehicle();v.price // 1000
上面代碼通過new命令,讓構(gòu)造函數(shù)Vehicle生成一個(gè)實(shí)例對象,保存在變量v中。這個(gè)新生成的實(shí)例對象,從構(gòu)造函數(shù)Vehicle得到了price屬性。new命令執(zhí)行時(shí),構(gòu)造函數(shù)內(nèi)部的this,就代表了新生成的實(shí)例對象,this.price表示實(shí)例對象有一個(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ù)可以帶括號,也可以不帶括號。下面兩行代碼是等價(jià)的,但是為了表示這里是函數(shù)調(diào)用,推薦使用括號。
// 推薦的寫法var v = new Vehicle();// 不推薦的寫法var v = new Vehicle;
一個(gè)很自然的問題是,如果忘了使用new命令,直接調(diào)用構(gòu)造函數(shù)會(huì)發(fā)生什么事?
這種情況下,構(gòu)造函數(shù)就變成了普通函數(shù),并不會(huì)生成實(shí)例對象。而且由于后面會(huì)說到的原因,this這時(shí)代表全局對象,將造成一些意想不到的結(jié)果。
var Vehicle = function (){ this.price = 1000;//this指向window}; var v = Vehicle();v // undefinedprice // 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不能指向全局對象,默認(rèn)等于undefinedvar 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不能指向全局對象,默認(rèn)等于undefined,導(dǎo)致不加new調(diào)用會(huì)報(bào)錯(cuò)(JavaScript 不允許對undefined添加屬性)。
new 命令的原理使用new命令時(shí),它后面的函數(shù)依次執(zhí)行下面的步驟。
創(chuàng)建一個(gè)空對象,作為將要返回的對象實(shí)例。 將這個(gè)空對象的原型,指向構(gòu)造函數(shù)的prototype屬性。 將這個(gè)空對象賦值給函數(shù)內(nèi)部的this關(guān)鍵字。 開始執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼也就是說,構(gòu)造函數(shù)內(nèi)部,this指的是一個(gè)新生成的空對象,所有針對this的操作,都會(huì)發(fā)生在這個(gè)空對象上。構(gòu)造函數(shù)之所以叫“構(gòu)造函數(shù)”,就是說這個(gè)函數(shù)的目的,就是操作一個(gè)空對象(即this對象),將其“構(gòu)造”為需要的樣子。
如果構(gòu)造函數(shù)內(nèi)部有return語句,而且return后面跟著一個(gè)對象,new命令會(huì)返回return語句指定的對象;否則,就會(huì)不管return語句,返回this對象。
var Vehicle = function () { this.price = 1000; return 1000;}; (new Vehicle()) === 1000// false
上面代碼中,構(gòu)造函數(shù)Vehicle的return語句返回一個(gè)數(shù)值。這時(shí),new命令就會(huì)忽略這個(gè)return語句,返回“構(gòu)造”后的this對象。
但是,如果return語句返回的是一個(gè)跟this無關(guān)的新對象,new命令會(huì)返回這個(gè)新對象,而不是this對象。這一點(diǎn)需要特別引起注意。
var Vehicle = function (){ this.price = 1000; return { price: 2000 };}; (new Vehicle()).price// 2000
上面代碼中,構(gòu)造函數(shù)Vehicle的return語句,返回的是一個(gè)新對象。new命令會(huì)返回這個(gè)對象,而不是this對象。
另一方面,如果對普通函數(shù)(內(nèi)部沒有this關(guān)鍵字的函數(shù))使用new命令,則會(huì)返回一個(gè)空對象。
function getMessage() { return ’this is a message’;} var msg = new getMessage(); msg // {}typeof msg // 'object'
上面代碼中,getMessage是一個(gè)普通函數(shù),返回一個(gè)字符串。對它使用new命令,會(huì)得到一個(gè)空對象。這是因?yàn)閚ew命令總是返回一個(gè)對象,要么是實(shí)例對象,要么是return語句指定的對象。本例中,return語句返回的是字符串,所以new命令就忽略了該語句。
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() // falsenew f() // true
使用這個(gè)屬性,可以判斷函數(shù)調(diào)用的時(shí)候,是否使用new命令。
function f() { if (!new.target) { throw new Error(’請使用 new 命令調(diào)用!’); } // ...} f() // Uncaught Error: 請使用 new 命令調(diào)用!
上面代碼中,構(gòu)造函數(shù)f調(diào)用時(shí),沒有使用new命令,就拋出一個(gè)錯(cuò)誤。
Object.create() 創(chuàng)建實(shí)例對象構(gòu)造函數(shù)作為模板,可以生成實(shí)例對象。但是,有時(shí)拿不到構(gòu)造函數(shù),只能拿到一個(gè)現(xiàn)有的對象。我們希望以這個(gè)現(xiàn)有的對象作為模板,生成新的實(shí)例對象,這時(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 張三.
上面代碼中,對象person1是person2的模板,后者繼承了前者的屬性和方法。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(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é)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章:
1. 教你JS更簡單的獲取表單中數(shù)據(jù)(formdata)2. 測試模式 - XSL教程 - 53. 用xslt+css讓RSS顯示的跟網(wǎng)頁一樣漂亮4. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫特效5. 移動(dòng)端HTML5實(shí)現(xiàn)拍照功能的兩種方法6. python b站視頻下載的五種版本7. html5手機(jī)觸屏touch事件介紹8. 《CSS3實(shí)戰(zhàn)》筆記--漸變設(shè)計(jì)(一)9. 讓chatgpt將html中的圖片轉(zhuǎn)為base64方法示例10. ASP.NET Core自定義中間件的方式詳解
