[转]js之this,call,apply用法
(一)关于this
首先关于this我想说一句话,这句话记住了this的用法你也就差不多都能明白了:this指的是当前函数的对象。这句话可能比较绕,我会举出很多例子和这句话呼应的!(看下文)
1.首先看下面这段代码, 定义一个函数,弹下this,
- function doSomething(){
- alert(this);
- }
- doSomething();
那么这个 [Object Window], 到底是什么呢?看看下面的代码
- function doSomething(){
- alert(this===window);
- }
- doSomething();
看到弹出了true, 也就是说在这种正常情况下,this其实就是window
所以,我们定义了一个全局的变量的时候,可以
var test="Tony";
也可以
window["test"]="Tony";
下面这个例子,进一步说明,正常情况下,函数里的this就是window
- var test="Tony";
- function doSomething(){
- alert(this.test); //弹出 "Tony";
- alert(window.test); //弹出 "Tony";
- }
- doSomething();
第一次呼应:通过以上几个例子,我想可以说这几个例子中得this指的就是他当前函数doSomething()的Window对象。那顾名思义this.test自然就等于window.test了。事实也是如此。
2.我再举一个闭包的例子,但是在这里我不会解释什么是闭包,只是讲this的用法,明天我会学习闭包,今天就先当他是一个未知数,来学习this的一个工具。
看这个例子:
- var name ="The Window"; //创建了一个全局变量name
- var object = { //又创建了一个对象(创建对象的方法有很多种)
- name:"My Object", //创建了一个name属性(属性就是引用非函数)
- doSomething:function(){ //创建了一个doSomething方法(方法就是引用了函数)
- return function(){ //这个doSomething方法返回一个匿名函数
- return this.name; //这个匿名函数又返回this.name
- };
- }
- };
- alert(object.doSomething()());
- //由于这个doSomething方法返回的一个函数,所以这样就可以调用这个函数了
这段代码的主要解释我都注在了后面,主要想说的就是:这段代码返回的结果是"The Window",而不是我所预期的"My Object",前面不是说了吗? this指的是当前函数的对象, 可是在这里为什么就不是呢?其实就是因为闭包的特性,由于这个匿名函数构成了一个闭包,所以他所保存的就是整个变量对象也就是Window对象。这里先不说为什么,明天学闭包的时候我还会用这个例子的,这里就先接受下来。
那么如何做才能让结果返回"My Object"呢?还是那句话this指的是当前函数的对象,那么问题就简单了,也就是让this放在doSomething方法里,而不是那个匿名函数里不就可以了吗?修改代码如下:
- var name ="The Window";
- var object = {
- name:"My Object",
- doSomething:function(){
- var abc = this ;
- return function(){
- return abc.name;
- };
- }
- };
- alert(object.doSomething()());
第二次呼应:现在再看代码红色部分做的修改,this是不是指的是当前doSomething()函数的object对象了?那再输出结果自然就是"My Object"了。
通过这两次呼应,是不是感觉已经对this有了一定的了解呢,其实this用到的地方还很多,以后还会慢慢讲到,比如在jQuery中this依然指的是当前函数的对象。
(二)关于call
1.如果我们调用函数的时候,想让函数里的 this 代表别的对象,而不是当前函数的对象。有什么办法呢?那就只好使用call和apply了(对于我这种初学者,这两个东西太恶心了)
通常我们调用函数,都是直接采用以下形式调用
[调用] 函数名(); //doSomething();
其实我们还可以采用其它方法, 比如 call 这个单词,就是调用的意思,我们这里要用到它。
还是以doSomething函数为例:
中文:函数名.调用();
英文:doSomething.call();
代码如下:
- var test="Tony";
- function doSomething(){
- alert(this.test); //弹出 "Tony";
- }
- doSomething(); // [调用] doSomething();
- doSomething.call(); // 函数.调用()
现在我们只是做了函数的调用,还没有改变this那么怎么改变 this 呢?这个时候call就要发挥威力了。
本来doSomething函数里的this表示的是 window ,我们执行下面这句。
doSomething.call(某个对象);
这个时候doSomething里的this就变成了"某个对象",看下面的例子:
- var test="Tony";
- var myobj={
- test : "Tom"
- };
- function doSomething(){
- alert(this.test);
- }
- toolmao.call(); // 弹出 window.test ,即 "Tony"
- toolmao.call(myobj); // 这个时候,doSomething函数里的this指向 myobj,
- //所以弹出的是 myobj.test 即 "Tom"
2.那如果里面有参数呢?看代码
- var test="Tony";
- var myobj={
- test : "Tom"
- };
- function doSomething(name, age){
- alert(this.test + ":" + name + age);
- }
- doSomething("Tony",23);//普通调用 结果Tony:Tony23
- doSomething.call(myobj,"Tony",23);//call调用结果Tom:Tony23
上面代码,我们可以看出,相比普通调用, call 只是多了一个用来指定this的参数,call 干什么用的?就是干这个用的!!现在有体会了吧?
(三)关于apply
都知道call的用法了,apply其实是一个意思。只不过是调用参数的形式不一样罢了。
call是一个一个调用参数,而apply是调用一个数组。还是用上面相同的例子:
- var test="Tony";
- var myobj={
- test : "Tom"
- };
- function doSomething(name, age){
- alert(this.test + ":" + name + age);
- }
- doSomething("Tony",23);//普通调用 结果Tony:Tony23
- doSomething.call(myobj,"Tony",23);//call调用结果Tom:Tony23
- doSomething.apply(object,["Tony",23]);//apply调用 结果与call相同
[转]js之this,call,apply用法的更多相关文章
- js中call与apply用法
call和apply,它们的作用都是将函数绑定到另外一个对象上去运行 两者的格式和参数定义: call( thisArg [,arg1,arg2,… ] ); // 参数列表,arg1,arg2,.. ...
- JS中call、apply的用法说明
JS Call()与Apply()的区别 ECMAScript规范给所有函数都定义了Call()与apply()两个方法,call与apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是 ...
- 使用JS简单实现一下apply、call和bind方法
使用JS简单实现一下apply.call和bind方法 1.方法介绍 apply.call和bind都是系统提供给我们的内置方法,每个函数都可以使用这三种方法,是因为apply.call和bind都实 ...
- Join 和 apply 用法
TSQL中的join语句共有五种类型,left join,right join,inner join,full join,cross join 为了描述方便,解释一个名词"保留表" ...
- 原生JS:Function对象(apply、call、bind)详解
Function对象(apply.call.bind) 原创文章,转摘请注明出处:苏福:http://www.cnblogs.com/susufufu/p/5850180.html 本文参考MDN做的 ...
- JS里设定延时:js中SetInterval与setTimeout用法
js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操 ...
- js继承之call,apply和prototype随谈
在js中,call,apply和prototype都可以实现对象的继承,下面我们看一个例子: function FatherObj1() { this.sayhello = "I am jo ...
- python中的filter、map、reduce、apply用法
1. filter 功能: filter的功能是过滤掉序列中不符合函数条件的元素,当序列中要删减的元素可以用某些函数描述时,就应该想起filter函数. 调用: filter(function,seq ...
- js replace 与replaceall实例用法详解
这篇文章介绍了js replace 与replaceall实例用法详解,有需要的朋友可以参考一下stringObj.replace(rgExp, replaceText) 参数 stringObj 必 ...
随机推荐
- netty系列之:在netty中使用protobuf协议
目录 简介 定义protobuf 定义handler 设置ChannelPipeline 构建client和server端并运行 总结 简介 netty中有很多适配不同协议的编码工具,对于流行的goo ...
- SpringBoot请求日期参数异常(Failed-to-convert-value-of-type-'java-lang-String'-
问题 Failed to convert value of type 'java.lang.String' to required type 'java.util.Date'; nested exce ...
- mysql查询附近门店
mysql 查询一个地点(经纬度) 附近N公里内的数据.(根据一个地点的经纬度查询这个地点方圆几公里内的数据)1.创建测试表 CREATE TABLE `location` ( `id` int(10 ...
- web.xml中自定义Listener
Listener可以监听容器中某一执行动作,并根据其要求做出相应的响应. 常用的Web事件的监听接口如下: ServletContextListener:用于监听Web的启动及关闭 ServletCo ...
- blog.mzywucai.club停站
考研,不经营了,两台服务器也关了:blog.mzywucai.club也关了,就让它沉了吧!以后做个更好的?
- 【C语言】第2章 算法 — 程序的灵魂
第2章 算法 - 程序的灵魂 一个程序主要包括以下两方面的信息: 对数据的描述.在程序中要指定用到哪些数据以及这些数据的类型和数据的组织形式 也就是数据结构(data structure) 对操作的描 ...
- 实例说明C++的virtual function的作用以及内部工作机制初探
C++为何要引入virtual function? 来看一个基类的实现: 1 class CBase 2 { 3 public: 4 CBase(int id) : m_nId(id), m_pBas ...
- MySQL之连接查询和子查询
多表连接的基本语法 多表连接,就是将几张表拼接为一张表,然后进行查询 select 字段1, 字段2, ... from 表1 {inner|lift|right} join 表2 on 连接条件; ...
- 设置 ajax 同步获取数据
问题 在处理DataTable的render进行列表渲染的时候发现通过ajax发送请求,返回的值并不正确. {"data":"id","render& ...
- 最详尽的 JS 原型与原型链终极详解(1)(2)(3)===转载
转载===方便以后复习 原文网址:https://www.jianshu.com/p/dee9f8b14771 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为 ...