午夜勾魂曲-午夜福利自怕-午夜福利在线观看6080-午夜福利院电影-国产精品毛片AV久久97-国产精品麻豆高潮刺激A片

JavaScript 中的 call()、apply()、bind() 的詳解

2018-4-22    seo達人

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

三種方法的作用

在 JavaScript 中

  1. call、apply 和 bind 是 Function 對象自帶的三個方法,都是為了改變函數體內部 this 的指向。
  2. call、apply 和 bind 三者第一個參數都是 this 要指向的對象,也就是想指定的上下文。
  3. call、apply 和 bind 三者都可以利用后續參數傳參。
  4. bind 是返回對應 函數,便于稍后調用;apply 、call 則是立即調用 。
舉個栗子
function fruits() {}

fruits.prototype = {
   color: 'red',
   say: function() { console.log('My color is ' + this.color); 
   }
} var apple = new fruits;
apple.say(); // 此時方法里面的this 指的是fruits // 結果: My color is red
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

如果我們有一個對象 banana= {color : 'yellow'} ,我們不想重新定義 say 方法,那么我們可以通過 call 或 apply 用 apple 的 say 方法:

var banana = { color: 'yellow' };
apple.say.call(banana); // 此時的this的指向已經同過call()方法改變了,指向的是banana,this.color就是banana.color='yellow'; // 結果是My color is yellow 

apple.say.apply(banana); // 同理,此時的this的指向已經同過apply()方法改變了,指向的是banana,this.color就是banana.color ='yellow'; // 結果是My color is yellow

apple.say.apply(null); // nullwindow下的,此時,this 就指向了window ,但是window下并沒有clolr這個屬性,因此this.clolr就是window.color=undefined; // 結果是My color is undefined
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
call 和 apply 的區別

二者的作用完全一樣,知識接受 參數 的方式不太一樣。

call 是把參數按順序傳遞進去,而 apply 則是把參數放在 數組 里面。

var array1 = [12,'foo',{name:'Joe'},-2458]; var array2 = ['Doe' , 555 , 100]; Array.prototype.push.call(array1, array2); // 這里用 call 第二個參數不會把 array2 當成一個數組,而是一個元素 // 等價于 array1.push("'Doe' , 555 , 100"); // array1.length=5; Array.prototype.push.apply(array1, array2); // 這里用 apply 第二個參數是一個數組 // 等價于:  array1.push('Doe' , 555 , 100); // array1.length=7;
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
類(偽)數組使用數組方法
var divElements = document.getElementsByTagName('div'); // 雖然 divElements 有 length 屬性,但是他是一個偽數組,不能使用數組里面的方法 Array.isArray(divElements);// false var domNodes = Array.prototype.slice.call(document.getElementsByTagName('div')); // 將數組對象 Array 里的 this 指向偽數組 document.getElementsByTagName('div'),  // slice() 方法可從已有的數組中返回選定的元素,不傳參數是,返回整個數組  Array.isArray(domNodes);// true
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
驗證一個對象的類型可以用
Object.prototype.toString.call(obj)
    
  • 1
bind() 方法

bind() 方法會創建一個 新函數,稱為綁定函數,當調用這個綁定函數時,綁定函數會以創建它時傳入 bind() 方法的第一個參數 作為 this,傳入 bind() 方法的 第二個以及以后的參數加上綁定函數運行時本身的參數按照順序作為原函數的參數來調用原函數。

注意bind()方法創建的函數不會立即調用,在下面的例子中,最后 func() 才調用了函數,這是它與 callapply的區別。

var bar = function(){ console.log(this.x);
} var foo = {
    x:3 }
bar(); // undefined var func = bar.bind(foo); //此時this已經指向了foo,但是用bind()方法并不會立即執行,而是創建一個新函數,如果要直接調用的話 可以bar.bind(foo)() func(); // 3
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

在 Javascript 中,多次 bind() 是無效的。更深層次的原因, bind() 的實現,相當于使用函數在內部包了一個 call / apply ,第二次 bind() 相當于再包住第一次 bind() ,故第二次以后的 bind 是無法生效的。

var bar = function(){ console.log(this.x);
} var foo = {
  x:3 } var sed = {
  x:4 } var func = bar.bind(foo).bind(sed);
func(); //3 var fiv = {
  x:5 } var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //3

日歷

鏈接

個人資料

藍藍設計的小編 http://www.gerard.com.cn

存檔

主站蜘蛛池模板: 麻豆狠色伊人亚洲综合网站 | 免费在线视频成人 | 欧美精品3atv一区二区三区 | 全彩无翼污之邪恶女教师 | 亚洲精品在线网址 | 久久久久99精品成人片三人毛片 | 成人影片大全 | 日本久久久久亚洲中字幕 | 日本bbwhd| 在线观看qvod | 国产精品亚洲欧美一区麻豆 | 中文字幕视频在线观看 | 欧美wwwvideos在线观看 | 夜色福利院在线观看免费 | 99视频在线精品免费观看18 | 国产精品玖玖玖影院 | 90后美女乳沟 | 全是肉的高h短篇列车 | 真实农村女人野外自拍照片 | 亚洲精品免费网站 | 中文字AV字幕在线观看 | 亚洲欧美日韩国产另类电影 | 国产在线高清视频无码不卡 | 91九色视频无限观看免费 | 亚洲精品成人AV在线观看爽翻 | 成人1000部免费观看视频 | 免费夜色污私人影院网站 | 国产亚洲va在线电影 | 999久久久国产精品蜜臀AV | 国产精品免费大片一区二区 | 中文字幕绝色少妇性 | 久久免费电影 | 忘忧草研究所 麻豆 | 国产色婷婷亚洲99精品 | 99在线在线视频观看 | 久久婷婷丁香五月色综合啪免费 | 国产欧美国日产在线播放 | 2022国产精品不卡a | 高清无码中文字幕影片 | 小色哥影院 | 吃春药后的女教师 |