javascript中this,apply和call方法的使用

原创 2013年12月01日 22:47:34

javascript是一种面向对象的编程语言,所以javascript中有this这个特殊的变量。但是这个this和传统的面向对象的语言又不一样,并不是指向当前的对象,而是指向当前的作用域。单纯的文字无法说明问题,下面举一个简单的例子来说明:

<script type="text/javascript">

var color="red";

function showColor(){

  var color = "blue";

  alert(this.color);

}

</script>

如果运行showColor函数,alert会显示哪个值呢?在这里,显示的值是red,有点奇怪吧?这需要从函数运行的作用域说起,所有在全局范围内定义的函数,变量都自动附加在一个全局系统变量window中,所以我们直接运行showColor,和使用window.showColor的效果是一样的。即使前面不加上window,运行环境也会帮我们加上。前面的window就是这个函数运行的作用域,this对象也就是指向这个作用域,所以this.color就等于window.color。

下面这个例子是改变了函数运行的作用域

<script type="text/javascript">

var color="red";

var o=new Object();

o.color="blue";

o.showColor=showColor;

function showColor(){

   alert(this.color);

}

</script>

通过将函数名称赋给引用类型o中的一个变量showColor(这个其实是一个指向函数定义的一个指针)。通过运行o.showColor()改变了函数运行的作用域,现在函数中的this不再指向window变量,而是指向的变量o,所以这儿this.color不再指向window.color,而是指向o.color。所以这儿显示的是blue。

下面这个例子就有点复杂了,因为它涉及到函数中的函数,先上例子

<script type="text/javascript">

var color="red";

var o=new Object();

o.color="blue";

o.showColor=showColor;

function showColor(){

  function message(){

     return this.color;

   }

   alert(message());

}

</script>

运行完o.showColor()的时候,发现显示的又是red值了。这个是因为所有定义的没有明确指定作用域的函数,都是附加在window变量中。也就是说,定义了一个函数,这个函数首先定义两个变量:this(window)和arguments。只有通过明确的指定函数所属对象(作用域)才能改变函数的作用域。所以上面的函数showColor的作用域是o,但是内部函数message的作用域又变成了window,所以这儿的值又变成了red。如何显示o对象中的color的值呢,稍微做一下变动,定义一个showColor作用域的变量,如下

<script type="text/javascript">

var color="red";

var o=new Object();

o.color="blue";

o.showColor=showColor;

function showColor(){

  var that=this;

  function message(){

     return that.color;

   }

   alert(message());

}

</script>

通过that变量访问o.color,现在又显示blue值了。

下面介绍一个apply和call这两个系统函数的用法,每一个函数都可以通过至少三种方式调用,如下面的例子:

<script type="text/javascript">

var color="red";

function showColor(){

   alert(this.color);

}

showColor(); //直接通过函数名调用

showColor.apply(window,null); //通过apply调用,第一个参数是作用域,第二个参数是一个arguments数组

showColor.call(window);  //通过call调用,第一个参数也是作用域,后面如果有参数,是一个参数列表,否则可以不写

</script>

上面例子中的三种调用方式都实现了同样的功能,后面两种方式都比较复杂。javascript作为一种成熟的语言,为什么会提供一些比较复杂的方式实现相同的功能呢?这个就和this变量有点关系了,因为apply和call的第一个参数指定的就是this变量的值。通过下面的例子我们可以有一个大略的了解

<script type="text/javascript">

var o1=new Object();

o1.color="blue";

var o2=new Object();

o2.color="blue";

function showColor(){

   alert(this.color);

}

showColor.apply(o1,null); //通过apply调用,第一个参数是作用域,第二个参数是一个arguments数组

showColor.apply(o2,null); 

</script>

我们定义了两个对象和一个函数,并且使用这一个函数显示两个对象中的color值,但是这两个对象中又没有相应的函数,这时apply或者call函数就作用了(这两个函数的功能是一样的,只不过传递参数的方式不太一样,apply是使用数组的方式传递参数,如func.apply(o,[param1,param2...]),call是func.call(o,param1,param2))。使用apply的第一个参数改变函数运行的作用域,这样就可以显示不同函数中的属性值了。上面的例子只是函数运行的部分,其中这两个函数最最重要的作用是通过改变函数的运行的作用域来实现继承。

 

JS中的call()方法和apply()方法用法总结

JacvaScript中的call()方法和apply()方法, 1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法。 2. 相同点:这两个方法的作用是一样的。都是在特定的...
  • ganyingxie123456
  • ganyingxie123456
  • 2017年04月27日 15:14
  • 12473

介绍call,callee,caller,apply的区别与应用

介绍call,callee,caller,apply的区别与应用
  • qq_30628821
  • qq_30628821
  • 2016年04月07日 09:57
  • 468

Js中apply与call的区别与用法

解析:apply与call是更改对象的内部指针,即改变对象的this指向的内容。 call与apply的第一个参数都是要传入给当前对象的对象,及函数内部的this。后面的参数都是传递给当前对象的参数。...
  • wangji5850
  • wangji5850
  • 2016年03月17日 12:00
  • 1504

JavaScript中bind、call、apply函数用法详解

在给我们项目组的其他程序介绍 js 的时候,我准备了很多的内容,但看起来效果不大,果然光讲还是不行的,必须动手。前几天有人问我关于代码里 call() 函数的用法,我让他去看书,这里推荐用js 写服务...
  • chenleixing
  • chenleixing
  • 2015年03月14日 14:14
  • 6183

js中call,apply和bind方法的区别和使用场景

详解js中的call,apply和bind函数
  • yaojxing
  • yaojxing
  • 2017年05月14日 12:09
  • 1527

js的call() ,apply() 两种方法的区别和用法,最白话文的解释,让枯燥滚粗!

背景:今天群里有 妹子(我就不指名道姓喽)说:百度了一圈calll()函数和apply()函数,感觉还是糊里糊涂然后群里热闹了,各种表情包,各种殷勤,你懂的!正好我前几天刚又重新翻了一遍 那本 600...
  • xllily_11
  • xllily_11
  • 2016年05月23日 13:17
  • 6779

JavaScript 中的 this 用法以及 call(apply) 的理解

想要深入了解 JavaScript 这门语言,一个必须掌握的知识点就是对 `this` 的理解。其中, `call` 和 `apply` 又与 `this` 有着密切的联系。趁现在有空,在网上看了一些...
  • gertYY
  • gertYY
  • 2017年02月13日 13:53
  • 2274

JavaScript中 apply/call 与面向对象语言中继承关系的联系和区别

apply是否可理解为类的继承?
  • sinat_27088253
  • sinat_27088253
  • 2016年10月24日 17:06
  • 618

call和apply的用法以及apply的一些妙用

简要介绍了apply和call的作用及一些巧妙用法。
  • steven_zj
  • steven_zj
  • 2016年11月07日 21:58
  • 715

深入理解函数内部原理(六)——函数的内部方法call、apply、bind

call和apply这两个方法都是打破了解析器在函数调用时创建执行环境时赋值this绑定的时候的内部规则,直接通过Function内置标准类型的prototype属性中的两个方法call和apply进...
  • wmaoshu
  • wmaoshu
  • 2017年03月08日 21:22
  • 843
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript中this,apply和call方法的使用
举报原因:
原因补充:

(最多只允许输入30个字)