Javascript中call、apply函數淺析

call/apply函數做用其實就是改變this的取值,有一句話是:誰調用的這個方法那方法裏的this就是指誰,而有時咱們會須要改變this值,因此call/apply就能派上用場。數組

下面我寫個方法來模擬JQuery中的each方法來加深對call/apply函數的理解app

代碼以下:函數

1         function each(arr, callback) {
2             for (var i = 0; i < arr.length; i++) {
3                 callback(arr[i], i, arr[i]);
4             }
5         }
6         each(["zzq", "lihua", "bob"], function (i, val) {
7             console.log(this == val);
8         });

這都知道確定是打印出來false,由於each裏的this是指window,只要咱們稍微改造一下this

1         function each(arr, callback) {
2             for (var i = 0; i < arr.length; i++) {
3                 //callback.call(arr[i], i, arr[i]); //同下
4                 callback.apply(arr[i], [i, arr[i]]);
5             }
6         }
7         each(["zzq", "lihua", "bob"], function (i, val) {
8             console.log(this == val);
9         });

這時候打印出來就是true了,由於call/apply方法能夠改變this的取值,查看JQuery源碼的each方法能夠發現,實現也是如此spa

 1     each: function( obj, callback ) {
 2         var length, i = 0;
 3 
 4         if ( isArrayLike( obj ) ) {
 5             length = obj.length;
 6             for ( ; i < length; i++ ) {
 7                 if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
 8                     break;
 9                 }
10             }
11         } else {
12             for ( i in obj ) {
13                 if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
14                     break;
15                 }
16             }
17         }
18 
19         return obj;
20     }

最後總結下:call和apply方法做用是徹底同樣的,只是apply中參數是用數組傳遞,在不清楚參數個數時能夠使用apply,反之使用callcode

相關文章
相關標籤/搜索