一些學js的同學一看到call, apply, 就蒙了, 感覺不好懂, 看的頭大. 今天我們就一起來研究一下這2個東東.
徹底弄清楚它們的用法.

?

定義:

call, apply是函數的方法, 只有函數才有這2個方法.

作用:

call, apply主要作用是改變函數賴以執行的作用域, 簡言之就是改變函數中this的指向.

用法:

fn.call(obj, args1, args2, ...); //obj是指定函數賴以執行的對象, arg1等是傳給函數的參數(假如有的話)
fn.apply(obj, [args1, args2, ...]); //obj是指定函數賴以執行的對象, [arg1, ...]等是傳給函數的參數數組(假如有的話)

?

差別:

call和apply的差別就是參數的不同.
call中的參數必須是一個個枚舉出來的.
apply中的參數必須是數組或者是arguments對象

?

?

例子1:function fn(arg){alert(arg);}fn.call(this, 'hello world'); //hello world, 由于fn中沒指定this, 所以此時的this指向window對象.fn.apply(this, ['hello world']); //hello world, 由于fn中沒指定this, 所以此時的this指向window對象.

例子2:function fn(arg1, arg2, arg3){alert(arg1 + arg2 + arg3);}fn.call(this, 'hello world', 'petty', 'jack'); //hello worldpettyjackfn.apply(this, ['hello world', 'petty', 'jack']); //hello worldpettyjack

例子3:function myFn(arg1, arg2, arg3){alert(arg1 + arg2 + arg3);}function fn(arg1, arg2, arg3){myFn.apply(this, arguments); //此處傳arguments對象, 即fn中的[arg1, arg2, arg3] }fn('hello', 'world', '!'); //helloworld!
例子4:var o = {name: 'tom'};function fn(){alert(this.name);}fn.call(this); //此時this指向window, 所以是window的name值fn.call(o); //此時this指向o, 所以是o的name值, 'tom'fn.apply(o); //同上

例子5：function MyFn(name){this.name = name;} // 定義一個構造函數function Fn(age, name){this.age = age;MyFn.call(this, name); // 理解了call的定義后, 就不難看出, 此處繼承了MyFn的name屬性.//MyFn.apply(this, [name]); // 也可} // 定義另一個構造函數var person = new Fn(20, 'tom');alert(person.name); // 原本Fn是沒有name屬性的, 但是使用了call或者apply后, 就繼承了MyFn的name屬性, 所以為'tom'

理解了以上的call和apply的原理后, 我們一起來模仿jquery中each函數.function each(obj, fn){var i;if(Object.prototype.toString.call(obj) === '[object Array]'){for(i = 0, length = obj.length; i < length; i++){fn.call(obj[i], i, obj[i]);}}else if(typeof obj === 'object'){for(i in obj){if(obj.hasOwnProperty(i)){fn.call(obj[i], i, obj[i]);}}}else{return false;}}var oDiv = document.getElementsByTagName('div');each(oDiv, function(){this.style.background = '#ff0000'; // 所有div的背景都變為紅色的了.});

?

簡單吧.好了, 講解到此為止.

?

轉載于:https://www.cnblogs.com/tinkbell/p/3200488.html

總結

以上是生活随笔為你收集整理的详解javascript中的call, apply的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。