深入浅出JavaScript之call()、apply()方法

写在前面:

隔了很长时间了,也不知道写点什么。最近一直在研究ES6,一直想写出来的文章能对初学者或者是在学习JS路上有所帮助的。这就是我的初衷。

call、apply的作用

在JavaScript中,call()方法和apply()方法都是为了改变函数运行时上下文而存在的,换句话说:就是为了改变函数体内部 this 的指向。
在JavaScript中,也可以说再OOP JavaScript思想编程中,其实最绕的地方就是:函数被定义时的上下文、运行时的上下文、上下文的改变。

我们先来定义一个构造函数(constructor)然后改变指向:

function Fn() {}

Fn.prototype = {
    color:'red',
    say:function () {
        alert(this.color);
    }
};

var fn = new Fn();
fn.say();       //返回red

这是一个很普通的构造函数,给原型new了一个新的对象,然后添加一个属性和方法。那么我们如果要再创建一个对象呢,不想给这个新的对象添加方法怎么去公用上面这个方法呢?

 var Fn1 = {
    color:'yellow'
};

var fn = new Fn();
fn.say.call(Fn1);    //使用call()方法返回yellow
fn.say.apply(Fn1);   //使用apply()方法返回yellow

所以,可以看出 call()和 apply()是为了动态改变 this 而出现的,当一个对象(Object)没有这个方法,但是其他的Fn原型里面有这个方法,我们可以借助call或apply用其它对象的方法来操作。
大家是不是感觉这个call()和apply()没什么差距对吧?

call()方法与apply()方法的差别

对于使用者而言,call与apply的作用完全一样,不过它们接受的参数不一样:
call()方法中的其余的参数必须直接传给函数
apply()接收两个参数:一个参数是在其中运行的作用域,另一个是参数数组(可以是Array实例,也可以是arguments对象).
也可以理解为其实call传参为固定的必须知道你有多少个参数传进去,而apply可以传一个数组。

当明确知道传参数量时使用call()而不确定的时候使用apply()方法然后把参数push进数组传递进去,函数内部也可以通过 arguments 这个数组来遍历所有的参数。

深入理解call与apply

function box(msg) {
    alert(msg);
}
box(1); //1
box(1,2); //1

上面的这个函数就是没有确定实参数量,这个时候就可以考虑使用call或者apply,刚刚讲过,只有apply在不确定的数量的时候使用最佳。

function box(){
 console.log.apply(console,arguments);
};
box(1); //1
box(1,2); //1 2

这一章差不多就讲完了,其实要点没多少知识点,主要就是充分掌握了技巧与思想,JavaScript就会变的很容易。欢迎前端大牛纠正错误,如有错误我会及时改正。谢谢~

(PS:其实一直不知道写什么,所以这么长时间没更新,如果大家想看JS哪些方面的,在我了解与掌握的前提下还是可以写一写的。我的邮箱:cn_brian@163.com)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值