call方法和apply方法简单介绍

call和apply，它们的作用都是将函数绑定到另一个对象上去运行
两者的格式和参数定义：
call（thisArg[,arg1,arg2,...]）;//参数列表，arg1，arg2...
apply（thisArg[,argArray]）; //参数数组，argArray
上述两个函数内部的this指针，都会被赋值为thisArg，这可实现将函数作为
另外一个对象的方法运行的目的


一、call的简单用法：

<!DOCTYPE HTML>

<html>
<head>
    <title>call-apply</title>
</head>

<body>
<input type="text" id="idText" value="input text"/>

<script type="text/JavaScript">
  var value="global var";
  function mFunc(){
    this.value="member var";
  }
  function gFunc(){
    alert(this.value);
  }

  window.gFunc();
  gFunc.call(window);
  gFunc.call(new mFunc());
  gFunc.call(document.getElementById('idText'));

</script>

<script language="JavaScript">
  var func=new function(){
  this.a="func";
  }
  var func2=function(x){
   var a="func2";
   alert(this.a);
   alert(x);
  }

  func2.call(func,"func2");
</script>

</body>
View Code

分析useCall的结果：
1、全局变量window调用gFunc，this指向window对象，因此this.value为
global var
2、函数gFunc调用call方法，this默认指向第一个参数window对象，因此
this.value也为global var
3、函数gFunc调用call方法，this默认指向第一个参数new mFunc()，即mFunc
的对象，因此this.value为mFunc的成员变量member var
4、函数gFunc调用call方法，。this默认指向第一个参数input text的空间，
即id=‘idText’的控件，因此this.value为input控件的value值input text
5、函数func2调用call方法，this参数默认指向第一个参数func函数对象，因
此this.value为this.a，即func
6、函数func调用call方法，第二个参数属于函数对象func2的参数，因此
alert(x)为第二个参数func2

 

二、call继承用法与改进：

<!doctype html>

<html>
<head>
  <title>call-apply for inherit</title>
</head>

<body>
<script type="text/JavaScript">
function baseA(){
  this.member="baseA member";
  this.showSelfA=function(){
     window.alert(this.member);
  }
}

function baseB(){
  this.member="baseB meber";
  this.showSelfB=function(){
   window.alert(this.member);
  }
}

function extendAB(){
  baseA.call(this);
  baseB.call(this);
}

window.onload=function(){
  var extend=new extendAB();
  extend.showSelfA();
  extend.showSelfB();
}
</script>
</body>

</html>
View Code

二、call继承用法与改进
call-apply for inherit结果是弹出两遍baseB member，与我们之前的猜想不
太符合
静下心来，我们使用谷歌的调试工具，可以发现执行步骤依次为，先new一个
extendAB对象，走了一遍baseA和baseB，在baseA中的member为baseA member
，baseB中的member为baseB member，最后执行extendAB中的方法的时候的
this为extendAB，其中的member为最后出现的baseB member

对前面的代码稍作修改就可以验证我们分析的正确性

<!doctype html>

<html>
<head>
  <title>call-apply for inherit</title>
</head>

<body>
<script type="text/JavaScript">
function baseA(){
  this.memberA="baseA member";
  this.showSelfA=function(){
     window.alert(this.memberA);
  }
}

function baseB(){
  this.memberB="baseB meber";
  this.showSelfB=function(){
   window.alert(this.memberB);
  }
}

function extendAB(){
  baseA.call(this);
  baseB.call(this);
}

window.onload=function(){
  var extend=new extendAB();
  extend.showSelfA();
  extend.showSelfB();
}
</script>
</body>

</html>
View Code

 

以上的使用不是最优化的
因为每次在函数（类）中定义了成员方法，都会导致实例有副本，因此可以借
助prototype原型，进行改进。

<!doctype html>

<html>
<head>
<title>call -apply for prototype</title>
</head>

<body>
<script type="text/javascript">
var Class={
  create:function(){
    return function(){
      this.initialize.apply(this,arguments);
    }
  }
};

var Person=Class.create();
Person.prototype={
  initialize:function(obj1,obj2){
    this.obj1=obj1;
    this.obj2=obj2;
  },
  showSelf:function(){
    alert("obj:"+this.obj1+"and"+this.obj2);
  }
}

var person=new Person("man","women");
person.showSelf();


</script>
</body>

</html>
View Code

 

posted @ 2016-03-17 14:56  guodaxia  阅读(166)  评论(0)    收藏  举报