JavaScript学习笔记之call和apply

时间:2023-03-09 16:26:23
JavaScript学习笔记之call和apply

  前端的知识面太广了,想要记住所有知识点是不可能的,所以将这些学过的记录下来,随时都可以翻开来参考

  1.call方法

  调用一个对象的一个方法,call(this, arg1, arg2,argN);用来代替另一个对象调用一个方法,官方的解释有时候确实莫名其妙,还是上例子吧

 function add(a, b) {
alert(a + b);
}
function sub(a, b) {
alert(a - b);
}
7 add.call(sub, 3, 1) //add(3, 1)== 4

  从以上例子来看:输出结果为4,意味着运行了方法add(),add方法代替了sub方法;可是为什么不直接使用函数add()呢?这只是表明了call()的用法,实际开发中的例子肯定比这个复杂很多.

function Foo1 () {
this.name = 'foo1';
this.showName = function () {
alert(this.name)
}
} function Foo2 () {
this.name = 'foo2';
} var f1 = new Foo1();
var f2 = new Foo2(); f1.showName.call(f2);

  从以上例子来说:call把f1的方法放到f2来执行,原来f2中并没有方法showName(),使用call之后showName方法但是此时this.name中的this已经不属于f1的.所以返回结果相当于showName = function () { alert('foo2')} == foo2;

  另外:call还可以实现方法的继承

function Foo1 () {
this.show = function (text) {alert(text)}
}
function Foo2 () {
Foo1.call(this)
} var f2 = new Foo2()
f2.show('javascript') //javascript

  以上例子中的Foo2直接继承了Foo1的show方法,实例化Foo后f2也有了show方法,输出结果为'javascript'.

  

  2.apply方法

  aplly方法的使用和call大致相同,区别在于apply将后面的agr参数写成数组形式:

  f1.apply(f2, [agr1,agr2,agrN]);