JavaScript学习笔记之call和apply

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

  1.call方法

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

1 function add(a, b) {
2     alert(a + b);      
3 }
4 function sub(a, b) {
5     alert(a - b);  
6 }
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]);