您好,登錄后才能下訂單哦!
小編給大家分享一下JavaScript方法的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
在一個(gè)對(duì)象中綁定函數(shù),稱為這個(gè)對(duì)象的方法。
在JavaScript中,對(duì)象的定義是這樣的:
var xiaoming = { name: '小明', birth: 1990 };
但是,如果我們給xiaoming
綁定一個(gè)函數(shù),就可以做更多的事情。比如,寫(xiě)個(gè)age()
方法,返回xiaoming
的年齡:
var xiaoming = { name: '小明', birth: 1990, age: function () { var y = new Date().getFullYear(); return y - this.birth; } }; xiaoming.age; // function xiaoming.age() xiaoming.age(); // 今年調(diào)用是25,明年調(diào)用就變成26了
綁定到對(duì)象上的函數(shù)稱為方法,和普通函數(shù)也沒(méi)啥區(qū)別,但是它在內(nèi)部使用了一個(gè)this
關(guān)鍵字,這個(gè)東東是什么?
在一個(gè)方法內(nèi)部,this
是一個(gè)特殊變量,它始終指向當(dāng)前對(duì)象,也就是xiaoming
這個(gè)變量。所以, this.birth
可以拿到xiaoming
的birth
屬性。
讓我們拆開(kāi)寫(xiě):
function getAge() { var y = new Date().getFullYear(); return y - this.birth; } var xiaoming = { name: '小明', birth: 1990, age: getAge }; xiaoming.age(); // 25, 正常結(jié)果 getAge(); // NaN
單獨(dú)調(diào)用函數(shù)getAge()
怎么返回了NaN
?請(qǐng)注意,我們已經(jīng)進(jìn)入到了JavaScript的一個(gè)大坑里。
JavaScript的函數(shù)內(nèi)部如果調(diào)用了this,那么這個(gè)this到底指向誰(shuí)?
答案是,視情況而定!
如果以對(duì)象的方法形式調(diào)用,比如xiaoming.age(),
該函數(shù)的this指向被調(diào)用的對(duì)象,也就是xiaoming
,這是符合我們預(yù)期的。
如果單獨(dú)調(diào)用函數(shù),比如getAge()
,此時(shí),該函數(shù)的this指向全局對(duì)象,也就是window
。
坑爹啊!
更坑爹的是,如果這么寫(xiě):
var fn = xiaoming.age; // 先拿到xiaoming的age函數(shù) fn(); // NaN
也是不行的!要保證this指向正確,必須用obj.xxx()
的形式調(diào)用!
由于這是一個(gè)巨大的設(shè)計(jì)錯(cuò)誤,要想糾正可沒(méi)那么簡(jiǎn)單。ECMA決定,在strict模式下讓函數(shù)的this
指向undefined
,因此,在strict模式下,你會(huì)得到一個(gè)錯(cuò)誤:
'use strict'; var xiaoming = { name: '小明', birth: 1990, age: function () { var y = new Date().getFullYear(); return y - this.birth; } }; var fn = xiaoming.age; fn(); // Uncaught TypeError: Cannot read property 'birth' of undefined
這個(gè)決定只是讓錯(cuò)誤及時(shí)暴露出來(lái),并沒(méi)有解決this
應(yīng)該指向的正確位置。
有些時(shí)候,喜歡重構(gòu)的你把方法重構(gòu)了一下:
'use strict'; var xiaoming = { name: '小明', birth: 1990, age: function () { function getAgeFromBirth() { var y = new Date().getFullYear(); return y - this.birth; } return getAgeFromBirth(); } }; xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined
結(jié)果又報(bào)錯(cuò)了!原因是this
指針只在age
方法的函數(shù)內(nèi)指向xiaoming
,在函數(shù)內(nèi)部定義的函數(shù),this
又指向undefined
了!(在非strict模式下,它重新指向全局對(duì)象window
!)
修復(fù)的辦法也不是沒(méi)有,我們用一個(gè)that
變量首先捕獲this
:
'use strict'; var xiaoming = { name: '小明', birth: 1990, age: function () { var that = this; // 在方法內(nèi)部一開(kāi)始就捕獲this function getAgeFromBirth() { var y = new Date().getFullYear(); return y - that.birth; // 用that而不是this } return getAgeFromBirth(); } }; xiaoming.age(); // 25
用var that = this
;,你就可以放心地在方法內(nèi)部定義其他函數(shù),而不是把所有語(yǔ)句都堆到一個(gè)方法中。
apply
雖然在一個(gè)獨(dú)立的函數(shù)調(diào)用中,根據(jù)是否是strict模式,this
指向undefined
或window
,不過(guò),我們還是可以控制this的指向的!
要指定函數(shù)的this
指向哪個(gè)對(duì)象,可以用函數(shù)本身的apply
方法,它接收兩個(gè)參數(shù),第一個(gè)參數(shù)就是需要綁定的this
變量,第二個(gè)參數(shù)是Array
,表示函數(shù)本身的參數(shù)。
用apply
修復(fù)getAge()
調(diào)用:
function getAge() { var y = new Date().getFullYear(); return y - this.birth; } var xiaoming = { name: '小明', birth: 1990, age: getAge }; xiaoming.age(); // 25 getAge.apply(xiaoming, []); // 25, this指向xiaoming, 參數(shù)為空
另一個(gè)與apply()
類似的方法是call()
,唯一區(qū)別是:
apply()把參數(shù)打包成Array再傳入;
call()把參數(shù)按順序傳入。
比如調(diào)用Math.max(3, 5, 4),分別用apply()和call()實(shí)現(xiàn)如下:
Math.max.apply(null, [3, 5, 4]); // 5 Math.max.call(null, 3, 5, 4); // 5
對(duì)普通函數(shù)調(diào)用,我們通常把this綁定為null。
裝飾器
利用apply()
,我們還可以動(dòng)態(tài)改變函數(shù)的行為。
JavaScript的所有對(duì)象都是動(dòng)態(tài)的,即使內(nèi)置的函數(shù),我們也可以重新指向新的函數(shù)。
現(xiàn)在假定我們想統(tǒng)計(jì)一下代碼一共調(diào)用了多少次parseInt()
,可以把所有的調(diào)用都找出來(lái),然后手動(dòng)加上count += 1
,不過(guò)這樣做太傻了。最佳方案是用我們自己的函數(shù)替換掉默認(rèn)的parseInt():
var count = 0; var oldParseInt = parseInt; // 保存原函數(shù) window.parseInt = function () { count += 1; return oldParseInt.apply(null, arguments); // 調(diào)用原函數(shù) }; // 測(cè)試: parseInt('10'); parseInt('20'); parseInt('30'); count; // 3
以上是“JavaScript方法的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。