apply 和call 的區別
ECMAScript 規範給所有函數都定義了call 與apply 兩個方法,它們的應用非常廣泛,它們的作用也是一模一樣,只是傳參的形式有區別而已。
apply( )
#apply 方法傳入兩個參數:一個是作為函數上下文的對象,另外一個是作為函數參數所組成的數組。
var obj = { name : 'linxin' } function func(firstName, lastName){ console.log(firstName + ' ' + this.name + ' ' + lastName); } func.apply(obj, ['A', 'B']); // A linxin B
可以看到,obj 是作為函數上下文的對象,函數 func 中 this 指向了 obj 這個物件。參數 A 和 B 是放在陣列中傳入 func 函數,分別對應 func 參數的列表元素。
call( )
call 方法第一個參數也是作為函數上下文的對象,但是後面傳入的是參數列表,而不是單一數組。
var obj = { name: 'linxin' } function func(firstName, lastName) { console.log(firstName + ' ' + this.name + ' ' + lastName); } func.call(obj, 'C', 'D'); // C linxin D
對比 apply 我們可以看到差異,C 和 D 是作為單獨的參數傳給 func 函數,而不是放到陣列中。
對於什麼時候該用什麼方法,其實不用糾結。如果你的參數本來就存在一個陣列中,那自然就用 apply,如果參數比較散亂彼此之間沒什麼關聯,就用 call。
apply 和call 的用法
1.改變this 指向
var obj = { name: 'linxin' } function func() { console.log(this.name); } func.call(obj); // linxin
我們知道,call 方法的第一個參數是作為函數上下文的對象,這裡把obj 作為參數傳給了func,此時函數裡的this 便指向了obj 對象。此處func 函數裡其實相當於
function func() {
console.log(obj.name);
}
先看範例
var Person1 = function () { this.name = 'linxin'; } var Person2 = function () { this.getname = function () { console.log(this.name); } Person1.call(this); } var person = new Person2(); person.getname(); // linxin從上面我們看到,Person2 實例化出來的物件person 透過getname 方法拿到了Person1 中的name。因為在 Person2 中,Person1.call(this) 的作用就是使用 Person1 物件來取代 this 對象,那麼 Person2 就有了 Person1 中的所有屬性和方法了,相當於 Person2 繼承了 Person1 的屬性和方法。 3.呼叫函數
apply、call 方法都會使函數立即執行,因此它們也可以用來呼叫函數。
function func() { console.log('linxin'); } func.call(); // linxin
call 和bind 的區別
在EcmaScript5 中擴展了叫bind 的方法,在低版本的IE 中不相容。它和 call 很相似,接受的參數有兩個部分,第一個參數是是作為函數上下文的對象,第二部分參數是個列表,可以接受多個參數。 它們之間的差異有以下兩點。
1.bind 發回傳值是函數
#
var obj = { name: 'linxin' } function func() { console.log(this.name); } var func1 = func.bind(obj); func1(); // linxin
function func(a, b, c) { console.log(a, b, c); } var func1 = func.bind(null,'linxin'); func('A', 'B', 'C'); // A B C func1('A', 'B', 'C'); // linxin A B func1('B', 'C'); // linxin B C func.call(null, 'linxin'); // linxin undefined undefined###call 是把第二個及以後的參數當作func 方法的實參傳進去,而func1 方法的實參則是在bind 中參數的基礎上再往後排。 ######在低版本瀏覽器沒有 bind 方法,我們也可以自己實作一個。 ############
if (!Function.prototype.bind) { Function.prototype.bind = function () { var self = this, // 保存原函数 context = [].shift.call(arguments), // 保存需要绑定的this上下文 args = [].slice.call(arguments); // 剩余的参数转为数组 return function () { // 返回一个新函数 self.apply(context,[].concat.call(args, [].slice.call(arguments))); } } }
以上是JavaScript中apply和call,call和bind區別用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!