JS的call与apply

call和apply是JS中比较重要的两个方法, 一般在框架和组件设计中用的较多,比如jQuery Code。 那么这两个方法是做什么的呢,下面我们通过代码来了解:

1 function f(){
2 console.log(this.name);
3 }
4
5 var obj = {};
6 obj.name = "obj";
7
8 f.call(obj); //obj

f()中输出了this.name, 这里的this指的是函数在运行时的调用者(关于JS中的this,请参考:JS作用域和this关键字),因此f()输出的结果取决于调用它的对象。

obj 是javascript中的一个普通对象,obj.name = "obj"; 是在obj上添加了一个属性name,并赋值"obj"。  一般情况下,只有obj能访问自己的属性name,f为何能访问到obj.name呢?

call方法的作用就体现在这里:

f.call(obj) 翻译成白话文就是:在obj对象的执行空间调用f(), 相当于obj.f() ,此时f中的this指的就是obj, this.name相当于obj.name,所以输出"obj"。

这是对call方法最简单的解释。

call还有个兄弟apply, apply 和 call 唯一的区别是传递参数形式不同,call(obj,args..) 可以传递一个参数列表, apply(obj,args[]) 只能传递一个Array参数。

当然,这兄弟俩还有其他作用,那就是JS中的继承。

JS中没有诸如Java、C#等高级语言中的extend 关键字,因此JS中没有继承的概念,如果一定要继承的话,call和apply可以实现这个功能:

 1 function Animal(name,weight){
2 this.name = name;
3 this.weight = weight;
4 }
5
6 function Cat(){
7 Animal.call(this,'cat','50');
8 //Animal.apply(this,['cat','50']);
9
10 this.say = function(){
11 console.log("I am " + this.name+",my weight is " + this.weight);
12 }
13 }
14
15 var cat = new Cat();
16 cat.say();//I am cat,my weight is 50

从输出结果看,Cat 确实继承了Animal中的属性, 继承的关键在于 Animal.call(this,'cat','50') 这句话!

翻译成白话文就是:在执行Cat()时,先在其调用对象this的执行空间调用Animal(),相当于this.Animal()。this.Animal()执行完以后,this上就产生了name和weight属性,而say方法的调用者也是this,因此say()中访问的this.name就是Animal中的name属性。所以输出的是Animal的属性值。

var cat = new Cat();

这句话执行之后,this就是cat, cat.say() 就相当于this.say() 。

JS call与apply的更多相关文章

  1. JS 的 call apply bind 方法

    js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[,   [,.argN]]]] ...

  2. JS Call()与Apply()

    JS Call()与Apply() ECMAScript规范给所有函数都定义了Call()与apply()两个方法,call与apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是thi ...

  3. 深入理解js中的apply、call、bind

    概述 js中的apply,call都是为了改变某个函数运行时的上下文环境而存在的,即改变函数内部的this指向. apply() apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作 ...

  4. 如何用 js 实现一个 apply 函数

    如何用 js 实现一个 apply 函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen ...

  5. js巧用apply方法实现数组最值以及合并

    尽管js的apply方法在平常的使用中并不多见,但是在某些地方使用的还是很有帮助性的,这里就和大家说两个比较实用的例子:1.数组最大最小值 求数组中的最大最小值,js有相应的方法:Math.min() ...

  6. js call与apply方法

    js中所有函数都默认定义了Call()与apply()两个方法,call与apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是this的值,剩余的参数是需要传递给函数的值,call与a ...

  7. js call()和apply()

    一.call()和apply(),实例如下: function add(a,b) {     alert(a+b); } function sub(a,b) {     alert(a-b); } a ...

  8. js: this,call,apply,bind 总结

    对js中的一些基本的很重要的概念做一些总结,对进一步学习js很重. 一.this JavaScript 中的 this 总是指向一个对象,而具体指向那个对象是在运行时基于函数的执行环境动态绑定的,而非 ...

  9. js call与apply的区别-Tom

    .apply和.call方法是在函数原型中定义的两个方法(因此所有的函数都可以访问它)允许去手动设置函数调用的this值,他们用接受 的第一个参数作为this值,this 在调用的作用域中使用.这两个 ...

  10. js中的apply和call API

    借用网上的一个例子: fun.call(this,arg1,arg2,arg3) fun.apply(this,arguments) this.fun(arg1,arg2,arg3) 三种方法等效. ...

随机推荐

  1. 你的App为什么上不了TOP10?

     App市场风起云涌.但是,却仅仅有少数几个App能成为"暴发户",很多其它的则沉淀在应用商店中无人问津. 在移动互联网时代.智能手机成为了中心. 手机之所以智能.就在于手机上 ...

  2. poj3311(状压dp)

    题目连接:http://poj.org/problem?id=3311 题意:一个送披萨的,每次送外卖不超过10个地方,给你这些地方之间的时间,求送完外卖回到店里的总时间最小. 分析:跑一遍Floyd ...

  3. hdu3811(状态压缩dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3811 题目大意:给定1~N个数,求出至少满足一个条件的排列总数.M个条件如下:Ai位置的数为Bi 分析 ...

  4. Replace - with an en dash character (–, –) ?

    这个安卓开发过程中eclipse的提示,新浪网友给出这个解决方法:http://blog.sina.com.cn/s/blog_5ea8670101015dgk.html  太笨了. 看看stacko ...

  5. redis的分布式解决方式--codis (转)

    codis是豌豆荚开源的分布式server.眼下处于稳定阶段. 原文地址:https://github.com/wandoulabs/codis/blob/master/doc/tutorial_zh ...

  6. MySQLdb 连接Mysql 数据库出错解决

      #coding=utf-8 import MySQLdb if __name__ == "__main__": db = MySQLdb.connect(host=<sp ...

  7. 从后台绑定数据到ligerui 的comboBox下拉框组件

    这次来记录一下ligerUI的comboBox下拉框组件,ligerUI的API里也有相关描写叙述,上面都是前台写死数据,然后显示在组件中,我这次要说的是将后台的数据绑定到下拉框组件中,废话不多说. ...

  8. osx下快捷键相应符号

    2张图展示mac下相应的按键符号: 很多其它文章请前往小胖轩.

  9. AJAX POST请求中參数以form data和request payload形式在servlet中的获取方式

    HTTP请求中,假设是get请求,那么表单參数以name=value&name1=value1的形式附到url的后面,假设是post请求,那么表单參数是在请求体中,也是以name=value& ...

  10. SDL2源码分析8:视频显示总结

    ===================================================== SDL源码分析系列文章列表: SDL2源码分析1:初始化(SDL_Init()) SDL2源 ...