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) 三种方法等效. ...
随机推荐
- 你的App为什么上不了TOP10?
App市场风起云涌.但是,却仅仅有少数几个App能成为"暴发户",很多其它的则沉淀在应用商店中无人问津. 在移动互联网时代.智能手机成为了中心. 手机之所以智能.就在于手机上 ...
- poj3311(状压dp)
题目连接:http://poj.org/problem?id=3311 题意:一个送披萨的,每次送外卖不超过10个地方,给你这些地方之间的时间,求送完外卖回到店里的总时间最小. 分析:跑一遍Floyd ...
- hdu3811(状态压缩dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3811 题目大意:给定1~N个数,求出至少满足一个条件的排列总数.M个条件如下:Ai位置的数为Bi 分析 ...
- Replace - with an en dash character (–, –) ?
这个安卓开发过程中eclipse的提示,新浪网友给出这个解决方法:http://blog.sina.com.cn/s/blog_5ea8670101015dgk.html 太笨了. 看看stacko ...
- redis的分布式解决方式--codis (转)
codis是豌豆荚开源的分布式server.眼下处于稳定阶段. 原文地址:https://github.com/wandoulabs/codis/blob/master/doc/tutorial_zh ...
- MySQLdb 连接Mysql 数据库出错解决
#coding=utf-8 import MySQLdb if __name__ == "__main__": db = MySQLdb.connect(host=<sp ...
- 从后台绑定数据到ligerui 的comboBox下拉框组件
这次来记录一下ligerUI的comboBox下拉框组件,ligerUI的API里也有相关描写叙述,上面都是前台写死数据,然后显示在组件中,我这次要说的是将后台的数据绑定到下拉框组件中,废话不多说. ...
- osx下快捷键相应符号
2张图展示mac下相应的按键符号: 很多其它文章请前往小胖轩.
- AJAX POST请求中參数以form data和request payload形式在servlet中的获取方式
HTTP请求中,假设是get请求,那么表单參数以name=value&name1=value1的形式附到url的后面,假设是post请求,那么表单參数是在请求体中,也是以name=value& ...
- SDL2源码分析8:视频显示总结
===================================================== SDL源码分析系列文章列表: SDL2源码分析1:初始化(SDL_Init()) SDL2源 ...