call & apply

  对于apply和call两者在作用上是相同的:这两个方法通常被用来类的继承和回调函数。但两者在参数上有区别的。call函数和apply方法的第一个参数都是要传入给当前对象的对象,及函数内部的this。后面的参数都是传递给当前对象的参数。

如 func.call(func1,var1,var2,var3) 对应的apply写法为:func.apply(func1,[var1,var2,var3])

 
  call和apply 方法可以用来代替另一个对象调用一个方法。其实就是更改对象的内部指针,即改变对象的this指向的内容。如果没有提供 第一个 参数,那么 Global 对象被用作第一个。
除了call和apply,bind也可以实现改变this指向的内容。
add.call(sub,4,2)就相当于 add(4,2)

注:在ES5的strict模式下,this已经被规定不会指向全局对象,而是undefined

 

1、第一个参数

(1)

   

(2)

  function Obj(){

       this.value="对象!";

  }
  var value="global 变量";

  function Fun1(){

       alert(this.value);

  }
    window.Fun1();    //global 变量
    Fun1.call(window);   //global 变量
    Fun1.call(document.getElementById('myText'));   //input text
    Fun1.call(new Obj());    //对象!

 

2、第二个参数

  (注:sayColor()也是作为全局函数定义的,而且当在全局作用域中调用它时,它确实会显示”red”——因为对this.color 的求值会转换成window.color 的求值。而sayColor.call(this)和sayColor.call(window),则是两种显式地在全局作用域中调用函数的方式,结果当然都会显示”red”。但是,当运行sayColor.call(o)时,函数的执行环境就不一样了,因为此时函数体内的this 对象指向了o,于是结果显示的是”blue”。使用call()(或apply())来扩充作用域的最大好处,就是对象不需要与方法有任何耦合关系。)

 

作用1: 类的继承

function Person(name,age){

     this.name = name;

     this.age=age;

     this.alertName = function(){

             alert(this.name);

         }

      this.alertAge = function(){

             alert(this.age);

         }

}

function webDever(name,age,sex){

         Person.call(this,name,age);    //继承Person

         this.sex=sex;

         this.alertSex = function(){

                  alert(this.sex);

         }

}

var test= new webDever(“愚人码头”,28,”男”);

test.alertName();//愚人码头

test.alertAge();//28

test.alertSex();//男

注:Person.call(this,name,age) 的意思就是使用 Person构造函数(也是函数)在this对象下执行,那么 webDever就有了Person的所有属性和方法,test对象就能够直接调用Person的方法以及属性了。

 

作用2: 回调函数
  call 和 apply在回调行数中也非常有用,很多时候我们在开发过程中需要对改变回调函数的执行上下文,最常用的比如ajax或者定时什么的,一般情况下,Ajax都是全局的,也就是window对象下的,来看这个例子:

function Album(id, title, owner_id) {

  this.id = id;

  this.name = title;

  this.owner_id = owner_id;

};

Album.prototype.get_owner = function (callback) {

  var self = this;

  $.get(‘/owners/’ + this.owner_id, function (data) {

       callback && callback.call(self, data.name);   //这里使用self,因为当callback作为普通函数调用时,this指向的是window。

  });

};

var album = new Album(1, ‘生活’, 2);

album.get_owner(function (owner) {

     alert(‘The album’ + this.name + ‘ belongs to ‘ + owner);

});

 
这里

album.get_owner(function (owner) {

     alert(‘The album’ + this.name + ‘ belongs to ‘ + owner);

});

中的 this.name就能直接取到album对象中的name属性了。

 

原文地址:https://www.cnblogs.com/telnetzhang/p/5706255.html