一些学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 worldpettyjack
fn.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的背景都变为红色的了.
});
简单吧.好了, 讲解到此为止.
