JavaScript方法的示例分析

小編給大家分享一下JavaScript方法的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)主要為客戶提供服務(wù)項目涵蓋了網(wǎng)頁視覺設(shè)計、VI標志設(shè)計、營銷網(wǎng)站、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式成都網(wǎng)站建設(shè)、成都做手機網(wǎng)站、微商城、網(wǎng)站托管及網(wǎng)頁維護、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計、SEO優(yōu)化排名。設(shè)計、前端、后端三個建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標準。已經(jīng)為成都水泥攪拌車行業(yè)客戶提供了網(wǎng)站營銷推廣服務(wù)。

在一個對象中綁定函數(shù)，稱為這個對象的方法。

在JavaScript中，對象的定義是這樣的：

var xiaoming = {
 name: '小明',
 birth: 1990
};

但是，如果我們給xiaoming綁定一個函數(shù)，就可以做更多的事情。比如，寫個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了

綁定到對象上的函數(shù)稱為方法，和普通函數(shù)也沒啥區(qū)別，但是它在內(nèi)部使用了一個this關(guān)鍵字，這個東東是什么？

在一個方法內(nèi)部，this是一個特殊變量，它始終指向當前對象，也就是xiaoming這個變量。所以， this.birth可以拿到xiaoming的birth屬性。

讓我們拆開寫：

function getAge() {
 var y = new Date().getFullYear();
 return y - this.birth;
}

var xiaoming = {
 name: '小明',
 birth: 1990,
 age: getAge
};

xiaoming.age(); // 25, 正常結(jié)果
getAge(); // NaN

單獨調(diào)用函數(shù)getAge()怎么返回了NaN？請注意，我們已經(jīng)進入到了JavaScript的一個大坑里。

JavaScript的函數(shù)內(nèi)部如果調(diào)用了this，那么這個this到底指向誰？

答案是，視情況而定！

如果以對象的方法形式調(diào)用，比如xiaoming.age()，該函數(shù)的this指向被調(diào)用的對象，也就是xiaoming，這是符合我們預(yù)期的。

如果單獨調(diào)用函數(shù)，比如getAge() ，此時，該函數(shù)的this指向全局對象，也就是window。

坑爹??！

更坑爹的是，如果這么寫：

var fn = xiaoming.age; // 先拿到xiaoming的age函數(shù)
fn(); // NaN

也是不行的！要保證this指向正確，必須用obj.xxx()的形式調(diào)用！

由于這是一個巨大的設(shè)計錯誤，要想糾正可沒那么簡單。ECMA決定，在strict模式下讓函數(shù)的this指向undefined，因此，在strict模式下，你會得到一個錯誤：

'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

這個決定只是讓錯誤及時暴露出來，并沒有解決this應(yīng)該指向的正確位置。

有些時候，喜歡重構(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é)果又報錯了！原因是this指針只在age方法的函數(shù)內(nèi)指向xiaoming，在函數(shù)內(nèi)部定義的函數(shù)，this又指向undefined了?。ㄔ诜莝trict模式下，它重新指向全局對象window?。?/p>

修復(fù)的辦法也不是沒有，我們用一個that變量首先捕獲this：

'use strict';

var xiaoming = {
 name: '小明',
 birth: 1990,
 age: function () {
  var that = this; // 在方法內(nè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ù)，而不是把所有語句都堆到一個方法中。

apply

雖然在一個獨立的函數(shù)調(diào)用中，根據(jù)是否是strict模式，this指向undefined或window，不過，我們還是可以控制this的指向的！

要指定函數(shù)的this指向哪個對象，可以用函數(shù)本身的apply方法，它接收兩個參數(shù)，第一個參數(shù)就是需要綁定的this變量，第二個參數(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ù)為空

另一個與apply()類似的方法是call() ，唯一區(qū)別是：

1. apply()把參數(shù)打包成Array再傳入；

2. call()把參數(shù)按順序傳入。

比如調(diào)用Math.max(3, 5, 4)，分別用apply()和call()實現(xiàn)如下：

Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5

對普通函數(shù)調(diào)用，我們通常把this綁定為null。

裝飾器

利用apply() ，我們還可以動態(tài)改變函數(shù)的行為。

JavaScript的所有對象都是動態(tài)的，即使內(nèi)置的函數(shù)，我們也可以重新指向新的函數(shù)。

現(xiàn)在假定我們想統(tǒng)計一下代碼一共調(diào)用了多少次parseInt() ，可以把所有的調(diào)用都找出來，然后手動加上count += 1，不過這樣做太傻了。最佳方案是用我們自己的函數(shù)替換掉默認的parseInt()：

var count = 0;
var oldParseInt = parseInt; // 保存原函數(shù)

window.parseInt = function () {
 count += 1;
 return oldParseInt.apply(null, arguments); // 調(diào)用原函數(shù)
};

// 測試:
parseInt('10');
parseInt('20');
parseInt('30');
count; // 3

以上是“JavaScript方法的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：JavaScript方法的示例分析
本文網(wǎng)址：http://muchs.cn/article42/ijcdhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、面包屑導(dǎo)航、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、外貿(mào)建站、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)