探討一個(gè)js基礎(chǔ)理論的話題，也許在技巧應(yīng)用上對(duì)你沒(méi)有太大的幫助，但也許會(huì)給你帶來(lái)一些啟發(fā)。
如果你真正理解Javascript函數(shù)是如何調(diào)用工作的，那么就可以避免一些bug的發(fā)生；
首先讓我們創(chuàng)建一個(gè)簡(jiǎn)單的函數(shù),這個(gè)函數(shù)將在下文中使用,這個(gè)函數(shù)僅僅返回當(dāng)前的this的值和兩個(gè)提供的參數(shù).

function makeArray(arg1, arg2){return [ this, arg1, arg2 ]; }

調(diào)用這個(gè)函數(shù)非常的簡(jiǎn)單,我們需要做的僅僅是：

makeArray('one', 'two');

返回值：=> [ window, 'one', 'two' ]
問(wèn)題出現(xiàn)了，this的值怎么會(huì)變成了window？下面做個(gè)簡(jiǎn)單分析：
在Javascript里,有一個(gè)全局的對(duì)象, 那些看起來(lái)散落在你的腳本里的每一行代碼，其實(shí)都被寫在了一個(gè)全局對(duì)象的上下文里.在我們的例子中,其實(shí)那個(gè)makeArray 函數(shù)可以說(shuō)不是一個(gè)松散的全局函數(shù),而是全局對(duì)象的一個(gè)方法, 讓我們返回來(lái)看瀏覽器,在這個(gè)環(huán)境里它的全局對(duì)象被映射到window對(duì)象.讓我們來(lái)證明一下:

alert( typeof window.makeArray);

返回值：=> function?

所有的這些意味著我們之前調(diào)用makeArray的方法是和下面調(diào)用的方法一樣的，

window.makeArray('one', 'two');

返回值：=> [ window, 'one', 'two' ]

JavaScript函數(shù)調(diào)用規(guī)則1：在沒(méi)有通過(guò)明確所有者對(duì)象而直接調(diào)用的函數(shù)中，如myFunction()，將導(dǎo)致this的值成為默認(rèn)對(duì)象（瀏覽器中的窗口）。

現(xiàn)創(chuàng)建一個(gè)簡(jiǎn)單的對(duì)象,使用makeArray函數(shù)作為它的一個(gè)方法,我們將使用json的方式來(lái)聲明一個(gè)對(duì)象,我們也來(lái)調(diào)用這個(gè)方法：

var arrayMaker = {someProperty: 'some value here',make: makeArray }; arrayMaker.make('one', 'two'); // 返回：=> [ arrayMaker, 'one', 'two' ] arrayMaker['make']('one', 'two'); // 返回：=> [ arrayMaker, 'one', 'two' ]

?this的值變成了對(duì)象arrayMaker本身.你可能會(huì)疑問(wèn)原始的函數(shù)定義并沒(méi)有改變,為何它不是window了呢.函數(shù)是一個(gè)對(duì)象，你可以傳遞它們或者復(fù)制他們.就好像整個(gè)函數(shù)連帶參數(shù)列表和函數(shù)體都被復(fù)制,且被分配給了arrayMaker里的屬性make,那就好像這樣定義一個(gè)arrayMaker:

var arrayMaker = {someProperty: 'some value here',make: function (arg1, arg2) {return [ this, arg1, arg2 ];} };

JavaScript函數(shù)調(diào)用規(guī)則2： 在一個(gè)使用方法調(diào)用語(yǔ)法,像 obj.myFunction()或者 obj['myFunction'](),這時(shí)this的值為obj。

這是事件處理代碼中bug的主要源頭,看看下面的例子：

<input type="button" value="Button 1" id="btn1" /> <input type="button" value="Button 2" id="btn2" /> <input type="button" value="Button 3" id="btn3" οnclick="buttonClicked();"/> <script type="text/javascript"> function buttonClicked(){var text = (this === window) ? 'window' : this.id;alert( text ); } var button1 = document.getElementById('btn1'); var button2 = document.getElementById('btn2'); button1.onclick = buttonClicked; //返回值：=> btn1，它是一個(gè)方法調(diào)用，this為所屬的對(duì)象(按鈕元素） button2.onclick = function(){buttonClicked();}; //返回值：=> window ，因?yàn)閎uttonClicked()是被直接調(diào)用的(不像 obj.buttonClicked().) 這和我們第三個(gè)按鈕,將事件處理函數(shù)直接放在標(biāo)簽里是一樣的.所以點(diǎn)擊第三個(gè)按鈕的結(jié)果是和第二個(gè)一樣,都是window. </script>

我們知道在Javascript中沒(méi)有類,而且任何一個(gè)自定義的類型需要一個(gè)初始化函數(shù),使用原型對(duì)象(作為初始化函數(shù)的一個(gè)屬性)定義你的類型,讓我們來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的類型

function ArrayMaker(arg1, arg2) {this.someProperty = 'whatever';this.theArray = [ this, arg1, arg2 ]; } // 聲明實(shí)例化方法 ArrayMaker.prototype = {someMethod: function () {alert( 'someMethod called');},getArray: function () {return this.theArray;} }; var am = new ArrayMaker( 'one', 'two' ); var other = new ArrayMaker( 'first', 'second' ); am.getArray(); // 返回值：=> [ am, 'one' , 'two' ]

值得注意的是出現(xiàn)在函數(shù)調(diào)用前面的new運(yùn)算符,沒(méi)有它,函數(shù)就像全局函數(shù)一樣,且我們創(chuàng)建的那些屬性都將是創(chuàng)建在全局對(duì)象上(window),而你并不想那樣,另一個(gè)話題是,因?yàn)樵谀愕臉?gòu)造器里沒(méi)有返回值,所以如果你忘記使用new運(yùn)算符,將導(dǎo)致你的一些變量被賦值為 undefined.因?yàn)檫@個(gè)原因,構(gòu)造器函數(shù)以大寫字母開頭是一個(gè)好的習(xí)慣,這可以作為一個(gè)提醒,讓你在調(diào)用的時(shí)候不要忘記前面的new運(yùn)算符.

Javascript函數(shù)調(diào)用規(guī)則3： 當(dāng)你將函數(shù)用作初始化函數(shù)的時(shí)候,像MyFunction(),Javascript的運(yùn)行時(shí)將把this的值指定為新建的對(duì)象.

轉(zhuǎn)載于:https://www.cnblogs.com/fengfan/archive/2010/07/01/1769313.html

總結(jié)

以上是生活随笔為你收集整理的【javascript】函数调用的对象和方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。