js call 以及apply
举个例子吧;
var aHello = {
name : "hello",
showName : function(){
console.log(this.name);
//console.log(this.tagName);
}
}
document.querySelector('a').onclick = aHello.showName;
这个时候因为【对象aHello】的方法showName被【对象document.querySelector('a')】引用,所以showName内的this就不指向【aHello】了,指向【对象document.querySelector('a')】,可以去掉注释进行验证。
但是我们的需求是,点击a的时候就显示aHello的名称。
这个时候该怎么做呢?
方法一:在onclick的时候改用匿名函数,匿名函数内再调用 【对象aHello】的方法;
如:
var aHello = {
name : "hello",
showName : function(){
console.log(this.name);
}
}
document.querySelector('a').onclick = function(){
aHello.showName();
}
ok!开心的解决了;
然而,是不是觉得太怂了。我们来衍生一下第二种方法,然后再说bind和call和apply的区别;
方法二:因为引用, onclick改变了【对象aHello】showName内this的指向。所以我们必须在【引用】的时候对showName方法进行重新绑定新的指向;
如:
var aHello = {
name : "hello",
showName : function(){
console.log(this.name);
}
}
document.querySelector('a').onclick = aHello.showName.bind(aHello);
恩!高大上,不用写太多代码。
接下来讲一下bind和apply、call的区别;
首先这些方法多属于【原型prototype】的方法。
题主的老师 可能没听过【引用】与【调用】所以用了一个临时与永久的概念来讲解,做技术,最好不要听老师的......
还用前面例子来讲(随便举的主要区分区别,大家别挑刺);
var aHello = {
name : "hello",
setYourAge : function(name,age){
console.log(name);
console.log(age);
}
}
document.querySelector('a').onclick = aHello.setYourAge.call(aHello,'王佳欣',25);
这个时候你可以看到打开页面,浏览器控制台就会马上输出 “王佳欣”,“25”;
然后,你再点击的时候,根本不会,再输出的;ok,这就是 【调用】含义;
call和apply是调用对象方法的意思;也就是说下面的3句代码其实实现是一样的;
aHello.setYourAge.call(aHello,'王佳欣',25);
aHello.setYourAge.apply(aHello,['王佳欣',25]);
aHello.setYourAge('王佳欣',25);
既然可以直接调用干嘛还要call、apply方法呢,我先说一下call、apply 和bind的区别吧;
var aHello = {
name : "hello",
setYourAge : function(name,age){
console.log(name);
console.log(age);
}
}
document.querySelector('a').onclick = aHello.setYourAge.bind(aHello,'王佳欣',25);
bind的作用是【引用】,这个时候你打开浏览器控制台不会有输出。你点击a 标签的后,才会有输出,点一次,输出一次。
粗暴一点说,这就是区别马上【调用】和【引用】的区别。
上面我们说到,下面三局代码实现是一样的。那么call、apply有什么作用呢?
aHello.setYourAge.call(aHello,'王佳欣',25);
aHello.setYourAge.apply(aHello,['王佳欣',25]);
aHello.setYourAge('王佳欣',25);
call、apply有什么作用
大家开发中是不是有这样的需求(我总是喜欢用需求来作为入口)
我们经常会在我们项目中做一些通用的对象,这些对象用来处理我们的一些通用的过程。比如:通用验证方法;(注:很多人喜欢用 继承的基础类 来作为例子.....我一时想不到好的继承例子,就用通用类的例子吧!)
/*通用验证对象*/
var validator = {
validateName : function(){
console.log(this.name);
},
validateAge : function(){
console.log(this.age)
}
//.....
}
大家可以看到我们的 【通用对象validator】内,是没有定义属性(name、age)的。
这个时候比如我们有两个对象需要验证;
/*对象kobe*/
var kobe = {
name : 'kobe bryant',
age : -1
}
/*对象 allen*/
var allen = {
name : 'allen iverson',
age : 10
}
那我们调用验证的时候就需要用到call或者apply了
如:
var isKobeAgeValid = validator.call(kobe);
var isAllenAgeValid = validator.call(allen);
额!差不多了了.....
链接:http://www.zhihu.com/question/20289071/answer/93261557
来源:知乎
著作权归作者所有,转载请联系作者获得授权。
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) 三种方法等效. ...
随机推荐
- Python底层socket库
Python底层socket库将Unix关于网络通信的系统调用对象化处理,是底层函数的高级封装,socket()函数返回一个套接字,它的方法实现了各种套接字系统调用.read与write与Python ...
- 【组合数学】 02 - Möbius反演公式
计数问题种类繁多,为了避免陷入漫无目的烧脑运动,我们先需要关注一些常用方法和结论.数学的抽象性和通用性是我们一直推崇的,从诸多特殊问题中发现一般性的方法,也总会让人兴奋和慨叹.一般教材多是以排列组合开 ...
- Visual Studio+TFS--强大的项目管理工具
一.前言 微软的Visual Studio非常强大,可以无缝结合Git或自家的TFS(Team Foundation Server),进行项目管理非常方便,从需求分析.开发.测试.维护,几乎可以贯穿软 ...
- pstools使用教程
pstools是sysinternals开发的一个功能强大的nt/2k远程管理工具包. 官方网址为http://www.sysinternals.com/ 下载地址为http://www.sysint ...
- IIS7.5 伪静态 脚本映射 配置方法
首先,是IIS7.0的配置,由于Windows Server 2008操作系统默认的IIS版本为7.0,我们知道,IIS7.0与IIS6.0 核心注意的地方:先要将应用池设置为集成模式,修改OK后,再 ...
- 各公司年资金归集汇总sql
select bd_accid.accidcode, bd_accid.accidname, -- fts_voucher_b.interestdate, -- fts_voucher_b.summa ...
- Linux命令(22)find的使用
在linux下面工作,有些命令能够大大提高效率. 比如说find命令,他哥俩可以算是必会的linux命令,几乎每天都要用到他们. find命令 find命令的一般形式 find命令的常用选项及实例 f ...
- windows 下编译log4cxx(x64)
参考链接 http://blog.csdn.net/hnu_zxc/article/details/7786060 http://blog.chinaunix.net/uid-20384806-id- ...
- 怎样把excel的数据导入到sqlserver2000数据库中
在做程序的时候有时需要把excel数据导入到sqlserver2000中,以前没从外部导入过数据,今天刚做了一下导入数据,感觉还是蛮简单的,没做过之前还想着多么的复杂呢,下面就来分享一下我是如何把ex ...
- 尚学堂Spring视频教程(七):AOP XML
此处省略N个字.... 直接看下面 推荐链接: Spring Aop实例之xml配置