麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

Javascript函數調用與this解析

2019-11-08 18:34:51
字體:
來源:轉載
供稿:網友

js函數調用的四種方式

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調用模式

先來看一個簡單的例子:

// 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。以上即為四種函數的調用方法。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 欧美日韩精品中文字幕 | 欧美一级黄色影院 | 久久探花 | 成人区一区二区三区 | 九色激情网 | 欧美高清第一页 | 欧美日韩亚洲精品一区二区三区 | 欧美人的天堂一区二区三区 | 全免费午夜一级毛片真人 | 免费久久精品 | 欧美一级黄色录相 | 国产资源视频在线观看 | 久久免费视频3 | 久久久综合 | 蜜桃久久一区二区三区 | 激情久久精品 | 国产一级一级片 | 黄网站免费在线看 | 午夜视频在线观 | 成人三级电影网址 | 精精国产xxxx视频在线野外 | 青草av.久久免费一区 | 懂色粉嫩av久婷啪 | 欧美综合日韩 | 欧美韩国日本在线 | 偿还电影免费看 | 国产三级精品最新在线 | 一级免费在线 | 国产精品久久久久无码av | 91网页| 国产亚洲精品久久久久婷婷瑜伽 | 成人免费毛片在线观看 | 国产精品7区 | 综合网日日天干夜夜久久 | 免费男女乱淫真视频 | 色柚视频网站ww色 | 国产在线观看91精品 | 羞羞的网址 | 日本看片一区二区三区高清 | 91精品国产刺激国语对白 | 羞羞的小视频 |