JS call与apply
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的更多相关文章
- JS 的 call apply bind 方法
js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[, [,.argN]]]] ...
- JS Call()与Apply()
JS Call()与Apply() ECMAScript规范给所有函数都定义了Call()与apply()两个方法,call与apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是thi ...
- 深入理解js中的apply、call、bind
概述 js中的apply,call都是为了改变某个函数运行时的上下文环境而存在的,即改变函数内部的this指向. apply() apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作 ...
- 如何用 js 实现一个 apply 函数
如何用 js 实现一个 apply 函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen ...
- js巧用apply方法实现数组最值以及合并
尽管js的apply方法在平常的使用中并不多见,但是在某些地方使用的还是很有帮助性的,这里就和大家说两个比较实用的例子:1.数组最大最小值 求数组中的最大最小值,js有相应的方法:Math.min() ...
- js call与apply方法
js中所有函数都默认定义了Call()与apply()两个方法,call与apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是this的值,剩余的参数是需要传递给函数的值,call与a ...
- js call()和apply()
一.call()和apply(),实例如下: function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } a ...
- js: this,call,apply,bind 总结
对js中的一些基本的很重要的概念做一些总结,对进一步学习js很重. 一.this JavaScript 中的 this 总是指向一个对象,而具体指向那个对象是在运行时基于函数的执行环境动态绑定的,而非 ...
- js call与apply的区别-Tom
.apply和.call方法是在函数原型中定义的两个方法(因此所有的函数都可以访问它)允许去手动设置函数调用的this值,他们用接受 的第一个参数作为this值,this 在调用的作用域中使用.这两个 ...
- js中的apply和call API
借用网上的一个例子: fun.call(this,arg1,arg2,arg3) fun.apply(this,arguments) this.fun(arg1,arg2,arg3) 三种方法等效. ...
随机推荐
- 分享3一个博客HTML5模板
1.材类别:半透明 博客html模板 个人博客 半透明html5博客主题,半透明,博客,博客html模板,个人博客,html5,灰色,半透明html5博客主题是一款适合用于个人博客主题,风格非常不错. ...
- HTML5:footer定位(底部+居中)的探讨+div图片居中问题
初学HTML+CSS布局,尝试自己写一个百度首页,可是footer的定位遇到麻烦而且百度没有好的解决方法,在此记录下逐步的过程.记录之,备忘. 初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指 ...
- C#如何在钉钉开发平台
C#如何在钉钉开发平台中创建部门 钉钉是阿里巴巴专为中小企业和团队打造的沟通.协同的多端平台,钉钉开放平台旨在为企业提供更为丰富的办公协同解决方案.通过钉钉开放平台,企业或第三方合作伙伴可以帮助企 ...
- web框架之Spring-MVC环境搭建(转)
spring框架jar包 1.下载spring源包spring地址:http://www.springsource.org/download我下的是spring-framework-3.1.0.REL ...
- Python每隔一秒钟打印当地时间
import threading,time global t def sayHello(): print time.strftime('%Y-%m-%d %H:%M:%S',time.localtim ...
- 添加PDF文件对照度的粗浅原理,及方法
上边这张照片不是异形,而是著名的鹦鹉螺.下边这张照片,是送给研究生同学的毕业纪念,向龙同学帮我激光雕刻的. 近期的照片在[http://www.douban.com/photos/album/13 ...
- 开源 免费 java CMS - FreeCMS1.9 会员组管理
项目地址:http://www.freeteam.cn/ 会员组管理 会员组分为两种,一级是经验会员组,一种是特殊会员组. 经验会员组的会员会依据经验自己主动变更,特殊会员组不会自己主动变更,须要管理 ...
- 图片预览插件 fancyBox
今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox. 它除了能够展示图片之外,还能够展示 flash.iframe 内容.html 文本以及 ajax 调用.我们能够通过 css ...
- VS2008--无法找到“XXX.exe”的调试信息,或者调试信息不匹配
------解决方案----- 1. 关闭掉Visual Studio 实例. 2. 找到解决方案下的.suo文件并删除之. 3. 重新启动Visual Studio,或者直接双击.sln文件打开 4 ...
- bash,bg,bind,break,builtin,caller,compgen, complete,compopt,continue,declare,dirs,disown,enable,eval,exec,expo
bash,bg,bind,break,builtin,caller,compgen, complete,compopt,continue,declare,dirs,disown,enable,eval ...