探討一個js基礎理論的話題，也許在技巧應用上對你沒有太大的幫助，但也許會給你帶來一些啟發。
如果你真正理解Javascript函數是如何調用工作的，那么就可以避免一些bug的發生；
首先讓我們創建一個簡單的函數,這個函數將在下文中使用,這個函數僅僅返回當前的this的值和兩個提供的參數.

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

調用這個函數非常的簡單,我們需要做的僅僅是：

makeArray('one', 'two');

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

alert( typeof window.makeArray);

返回值：=> function?

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

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

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

JavaScript函數調用規則1：在沒有通過明確所有者對象而直接調用的函數中，如myFunction()，將導致this的值成為默認對象（瀏覽器中的窗口）。

現創建一個簡單的對象,使用makeArray函數作為它的一個方法,我們將使用json的方式來聲明一個對象,我們也來調用這個方法：

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

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

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

JavaScript函數調用規則2： 在一個使用方法調用語法,像 obj.myFunction()或者 obj['myFunction'](),這時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，它是一個方法調用，this為所屬的對象(按鈕元素） button2.onclick = function(){buttonClicked();}; //返回值：=> window ，因為buttonClicked()是被直接調用的(不像 obj.buttonClicked().) 這和我們第三個按鈕,將事件處理函數直接放在標簽里是一樣的.所以點擊第三個按鈕的結果是和第二個一樣,都是window. </script>

我們知道在Javascript中沒有類,而且任何一個自定義的類型需要一個初始化函數,使用原型對象(作為初始化函數的一個屬性)定義你的類型,讓我們來創建一個簡單的類型

function ArrayMaker(arg1, arg2) {this.someProperty = 'whatever';this.theArray = [ this, arg1, arg2 ]; } // 聲明實例化方法 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' ]

值得注意的是出現在函數調用前面的new運算符,沒有它,函數就像全局函數一樣,且我們創建的那些屬性都將是創建在全局對象上(window),而你并不想那樣,另一個話題是,因為在你的構造器里沒有返回值,所以如果你忘記使用new運算符,將導致你的一些變量被賦值為 undefined.因為這個原因,構造器函數以大寫字母開頭是一個好的習慣,這可以作為一個提醒,讓你在調用的時候不要忘記前面的new運算符.

Javascript函數調用規則3： 當你將函數用作初始化函數的時候,像MyFunction(),Javascript的運行時將把this的值指定為新建的對象.

轉載于:https://www.cnblogs.com/fengfan/archive/2010/07/01/1769313.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。