javascript主要有四種函數的調用方式,分別是方法調用、函數調用、構造器調用、Apply調用,不同之處在于this的初始化。對this關鍵字有解釋:一般而言,在Javascript中,this指向函數執行時的當前對象。 結合《JavaScript語言精粹》,下面用實例的方式對四種方式進行總結和解析。
這種方式即為,一個函數被保存為一個對象的屬性,在此時此函數被成為一個方法。調用時this關鍵字被綁定到該對象,實例如下:
var myObject = { value: 0, increment: function (inc) { this.value += typeof inc === 'number' ? inc : 1; }};myObject.increment();console.log(myObject.value); // 1myObject.increment(2);console.log(myObject.value); // 3在此例中,increment方法對myObject對象中的value屬性進行增加操作,increment函數中的this即指向myObject對象本身。
先來看這種調用模式的一個實例:
var Quo = function (string) { this.status = string;};Quo.PRototype.get_status = function () { return this.status;};var myQuo = new Quo("confused");console.log(myQuo.get_status()); // confused輸出結果為confused,在使用構造函數構造新的對象時,構造函數的調用會創建一個新的對象,新對象會繼承構造函數的屬性和方法。在這里使用new來調用時,會創建一個連接到該函數的prototype成員的新對象,同時this會被綁定到這個新對象上。 即此時我們創建了myQuo對象,其連接到了Quo的prototype,且創建時的this.status = string;中的this指向這個創建的新對象,status為新對象myQuo的屬性,而不是Quo函數prototype的屬性,可以做如下驗證:
console.log(myQuo.hasOwnProperty("status")); //true作為對比,我們對Quo函數增加一個屬性id:
var Quo = function (string) { this.status = string;};Quo.prototype.id = 1;id為Quo構造器函數prototype對象的一個屬性,然后再次進行測試:
var myQuo = new Quo("confused");console.log(myQuo.id); //1console.log(myQuo.hasOwnProperty("get_status")); //falseconsole.log(myQuo.hasOwnProperty("id")); //false這里可以看到在創建新對象myQuo時沒有id屬性和get_status函數,而這里myQuo繼承了Quo的id屬性,就通過原型鏈找到了Quo.prototype.id的值。
先看一個最簡單的實例,在瀏覽器中:
function myFunction() { return this;}alert(myFunction()); // [object Window]當函數沒有被自身的對象調用時, this 的值就會變成全局對象。在 web 瀏覽器中全局對象是瀏覽器窗口(window 對象)。該實例返回 this 的值即為window對象。也就是此函數即為window對象的函數,myFunction()等同于window.myFunction()。 但是此處在使用內部函數時存在一個this指向的問題,看下面的例子:
// 注意此處在node環境和瀏覽器環境下值不同,// node環境下必須去掉var使value成為全局變量。value = 4;var myObject = { value: 1, double: function () { //var that = this; var helper = function () { this.value = add(this.value, this.value); }; helper(); }};function add(a, b) { return a + b;}myObject.double();alert(value); // 8alert(myObject.value); // 1在這里的myObject對象中,我們在double這個函數中使用了內部函數并賦值給helper,但是此處的this.value的this指向了全局對象,所以在執行這個函數后全局變量value的值變了但Object中的value屬性值仍然是1,這不是我們想要的結果。 《js語言精粹》中指出這里是語言設計上的一個錯誤,this應該仍然綁定到外部函數的this變量中。這個設計錯誤的后果就是方法不能利用內部函數來幫助它工作,因為內部函數的this被綁定了錯誤的值,所以不能共享該方法對對象的訪問權。 但是我們可以有一個很容易的解決方案去解決這個問題,對myObject進行修改:
var myObject = { value: 1, double: function () { var that = this; var helper = function () { that.value = add(that.value, that.value); }; helper(); }};myObject.double();alert(value); // 4alert(myObject.value); // 2這里使用了一個that變量來指向double方法中this的值即myObject本身,這樣就可以對myObject對象的屬性value進行修改。
先來看一個簡單的例子:
// Apply and callvar array = [3, 4];function add(a, b) { return a + b;}var sum = add.apply(null, array);console.log(sum); // 7這里主要介紹apply方法的使用,此方法可以讓我們構建一個參數數組傳遞給調用函數而且也允許我們選擇this的值,apply方法接受兩個參數,第一個是要綁定給this的值,第二個就是一個參數數組。和它相似的有方法call(),兩者的區別在于第二個參數: apply傳入的是一個參數數組,也就是將多個參數組合成為一個數組傳入,而call則作為call的參數傳入(從第二個參數開始):
// 兩者相同var array = [3, 4];var sum = add.apply(null, array);var sum = add.call(add, 3, 4);另外一個結合Quo構造器調用模式使用的例子:
var statusObject = { status: 'A-OK'};var status = Quo.prototype.get_status.apply(statusObject);console.log(status); // A-OK在這里即使用了apply并將statusObject作為get_status的this,結果即為A-OK。以上即為四種函數的調用方法。
新聞熱點
疑難解答