国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

JavaScript中的call和apply的用途以及區別

2019-11-19 18:00:25
字體:
來源:轉載
供稿:網友

apply 接受兩個參數,第一個參數指定了函數體內this 對象的指向,第二個參數為一個帶下標的集合,這個集合可以為數組,也可以為類數組,apply 方法把這個集合中的元素作為參數傳遞給被調用的函數:

var func = function( a, b, c ){  alert ( [ a, b, c ] ); // 輸出 [ 1, 2, 3 ]};func.apply( null, [ 1, 2, 3 ] );

在這段代碼中,參數 1、2、3 被放在數組中一起傳入func函數,它們分別對應func參數列表中的a、b、c。

call 傳入的參數數量不固定,跟apply 相同的是,第一個參數也是代表函數體內的this 指向,從第二個參數開始往后,每個參數被依次傳入函數:

var func = function( a, b, c ){  alert ( [ a, b, c ] ); // 輸出 [ 1, 2, 3 ]};func.call( null, 1, 2, 3 );

當調用一個函數時,JavaScript 的解釋器并不會計較形參和實參在數量、類型以及順序上的區別,JavaScript 的參數在內部就是用一個數組來表示的。從這個意義上說,apply比call的使用率更高,我們不必關心具體有多少參數被傳入函數,只要用apply 一股腦地推過去就可以了。call是包裝在apply上面的一顆語法糖,如果我們明確地知道函數接受多少個參數,而且想一目了然地表達形參和實參的對應關系,那么也可以用call 來傳送參數。

call和apply的用途

1. 改變this 指向

call 和apply 最常見的用途是改變函數內部的this 指向,我們來看個例子:

var obj1 = {  name: 'sven'};var obj2 = {  name: 'anne'};window.name = 'window';var getName = function(){  alert ( this.name );};getName(); // 輸出: windowgetName.call( obj1 ); // 輸出: svengetName.call( obj2 ); // 輸出: anne

當執行getName.call( obj1 )這句代碼時,getName 函數體內的this 就指向obj1 對象,所以此處的

var getName = function(){alert ( this.name );};

實際上相當于:

var getName = function(){alert ( obj1.name ); // 輸出: sven};

在實際開發中,經常會遇到this指向被不經意改變的場景,比如有一個div節點,div節點的onclick 事件中的this 本來是指向這個div的:

document.getElementById( 'div1' ).onclick = function(){  alert( this.id ); // 輸出:div1};

假如該事件函數中有一個內部函數func,在事件內部調用func 函數時,func 函數體內的this就指向了window,而不是我們預期的div,見如下代碼:

document.getElementById( 'div1' ).onclick = function(){  alert( this.id ); // 輸出:div1  var func = function(){    alert ( this.id ); // 輸出:undefined  }  func();};

這時候我們用call 來修正func 函數內的this,使其依然指向div:

document.getElementById( 'div1' ).onclick = function(){  var func = function(){    alert ( this.id ); // 輸出:div1  }  func.call( this );};

2. Function.prototype.bind

大部分高級瀏覽器都實現了內置的Function.prototype.bind,用來指定函數內部的this 指向,即使沒有原生的Function.prototype.bind 實現,我們來模擬一個也不是難事,代碼如下:

Function.prototype.bind = function( context ){var self = this; // 保存原函數return function(){ // 返回一個新的函數    return self.apply( context, arguments ); // 執行新的函數的時候,會   把之前傳入的context  // 當作新函數體內的this  }};var obj = {  name: 'sven'};var func = function(){  alert ( this.name ); // 輸出:sven}.bind( obj);func();

我們通過Function.prototype.bind 來“包裝”func 函數,并且傳入一個對象context 當作參數,這個context 對象就是我們想修正的this 對象。

在Function.prototype.bind 的內部實現中,我們先把func 函數的引用保存起來,然后返回一個新的函數。當我們在將來執行func 函數時,實際上先執行的是這個剛剛返回的新函數。在新函數內部,self.apply( context, arguments )這句代碼才是執行原來的func 函數,并且指定context對象為func 函數體內的this。

這是一個簡化版的Function.prototype.bind 實現,通常我們還會把它實現得稍微復雜一點,

使得可以往func 函數中預先填入一些參數:

Function.prototype.bind = function(){  var self = this, // 保存原函數  context = [].shift.call( arguments ), // 需要綁定的this 上下文  args = [].slice.call( arguments ); // 剩余的參數轉成數組  return function(){ // 返回一個新的函數    return self.apply( context, [].concat.call( args, [].slice.call(  arguments ) ) );    // 執行新的函數的時候,會把之前傳入的context 當作新函數體內的this    // 并且組合兩次分別傳入的參數,作為新函數的參數  }};var obj = {  name: 'sven'};var func = function( a, b, c, d ){  alert ( this.name ); // 輸出:sven  alert ( [ a, b, c, d ] ) // 輸出:[ 1, 2, 3, 4 ]}.bind( obj, 1, 2 );func( 3, 4 );

以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持武林網!

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 邛崃市| 本溪市| 县级市| 乌拉特后旗| 安义县| 濮阳县| 大埔区| 九寨沟县| 英吉沙县| 枞阳县| 和田县| 通榆县| 科技| 油尖旺区| 明星| 巴南区| 临沂市| 五常市| 太仆寺旗| 邻水| 海门市| 八宿县| 抚顺市| 丰顺县| 大城县| 绥棱县| 德钦县| 阿荣旗| 盖州市| 元氏县| 太谷县| 大化| 会宁县| 景东| 眉山市| 太湖县| 洛阳市| 江北区| 邵东县| 潼南县| 新野县|