JavaScript中的this关键字使用详解


Posted in Javascript onAugust 14, 2015

 和其它许多面向对象的语言一样,JavaScript 中也有 this 关键字,this 在函数中用来指向调用此方法的对象。实际编程中要判断 this 到底指向谁,一般可遵循以下原则:

  •     如果该函数被 Function.call 或者 Function.apply 调用,那么 this 指向 call/apply 的第一个参数,如果参数是 null 或者 undefined,this 则指向全局对象(在浏览器中的话,全局对象就是 window 对象)。
  •     如果该函数被 Function.bind 调用,那么 this 将指向 bind 的第一个参数(方法被创建时)。
  •     如果该函数被一个对象作为方法调用,那么 this 指向这个对象。
  •     如果该函数只是光溜溜的作为函数被调用,不附属于任何对象,那么 this 指向全局变量 window。

函数

首先,让我们看看”函数”:

function introduce() {
   alert("Hello, I am Laruence\r\n");
}

对于,这个函数, this关键字指向谁呢?

定义在全局的函数, 函数的所有者就是当前页面, 也就是window对象.

这也就是为什么, 我把函数用引号引起来. 因为定义在全局的函数, 其实也就是window对象的一个方法.

所以,我们即可用通过函数名直接调用, 也可用通过window.方法名来调用, 这个时候, 方法中的this关键字指向它的所有者:window对象.

如果, 我们查看window的introduce属性, 就会得到:

var name = "I am Laruence";
function introduce() {
   alert(this.name);
}
alert(window.introduce);
/**
* output:
* function introduce() {
* alert(this.name);
* }
*/

看了上面的代码, 也许你就会想到既然, 全局函数是window对象的方法, 全局变量是window对象的属性(Javasript作用域中已有述及), 那么,在全局函数中就可用通过this关键字来访问全局变量吧?

答案是肯定的, 如果调用introduce函数, 你就会认识我是Laruence.

事件处理函数

也许, 对于this关键字的迷惑, 绝大部分原因是来自把函数(方法)用在事件处理的时候.

<input id="name" type="text" name="name" value="Laruence" />

比如, 我们现在需要在点击”name”输入框的时候, 显示出name输入框的value. 那么, 可用写下如下代码:

function showValue() {
   alert(this.value);
}
document.getElementById('name').onclick = showValue;

上面的代码, 运行正常, 但是why? 不是说函数的this指针永远指向函数所有者么? 不是说全局变量的所有者是window对象么?

呵呵, 如果你能想到这个问题, 那说明你在认真的看我的文章, 否则,,我建议你从头看起, 否则看完了,你还是迷糊~

恩, 对, 对于上面的代码, showValue是定义在了全局对象, 那么看来问题只能发生在onclick事件绑定的时候了.

我们知道, 在Js中一切都是对象, 函数和方法也都是对象的属性, 只不过函数有可执行的内部属性. 所以, 对于上面的代码, 在对onclick绑定处理器的时候, 其实是对id为name的输入框Dom对象的onclick属性赋值.

也就是说, 我们把函数showValue Copy 给了name输入框对象的onclick属性. 如果我们查看此时的onclick:

function showValue() {
   alert(this.value);
}
document.getElementById('name').onclick = showValue;
alert(document.getElementById('name').onclick);
/**
* output
* function showValue() {
* alert(this.value);
* }
*/

所以, 当事件触发的时候, 就会去调用name输入框的onclick方法, 这个时候,this关键字自然就指向的是name输入框了.

但是, 迷惑的事情就来了, 比如下面这种写法:

function showValue() {
   alert(this.value);
}
<input id="name" type="text" name="name" value="Laruence" onclick="showValue()"/>

就无法正常运行, 这又是为什么呢?

恩, 因为这个时候, 并不是赋值, 而是引用.

如果我们注意俩种onclick的写法, 你会发现, 对于之前的方法, 我们使用的是:

dom.onclick = showvalue; //没有调用符

而对于刚才的方法:

onclick = "showvalue()" //有调用符

这个也能侧面的反映出俩者的区别:对于前者,是赋值, 而对于后者是引用. 如果我们这个时候查看输入框的onclick属性,我们得到:

alert(dom.onclick);
/**
* output:
* function onclick() {
*  showValue();
* }
*/

看到区别了么? 也就懂得为什么了吧?

讲到这里, 有一个很有趣的例子 ,大家可以在IE下试试:

<img src="xxx" onerror="alert(1);} function hi() { alert(2); " />

改变this的指向

那, 既然我们已经知道为什么了, 那怎么才能让this指向我们想要指的地方呢?

对于上面的事件处理函数来说, 我们可以有如下几种写法:

dom.onclick = showValue();
dom.onclick = function() { alert(this.value) ;}
<input onclick="alert(this.value);" /> //想想刚才我们的引用,是如何把这句嵌入的.
dom.addEventListener(dom, showValue, false); //ff only

而对于不是事件处理函数的场合, 我们可以使用apply, 或者call, 来改变this关键字的指向.

比如:

var laruence = {
   name : 'laruence',
   age : 26,
   position : 'Senior PHP Engineer',
   company : 'Baidu.inc'
};
 
function introduce() {
   alert(this.name);
}
 
introduce.call(laruence);

函数被 Function.call 调用的例子:

var myObject = {
  sayHello : function() {
    console.log('Hi! My name is ' + this.myName);
  },

  myName : 'Rebecca'
};

var secondObject = {
  myName : 'Colin'
};

myObject.sayHello();         // logs 'Hi! My name is Rebecca'
myObject.sayHello.call(secondObject); // logs 'Hi! My name is Colin'

函数被 Function.call 调用过的例子:

var myName = 'the global object',

  sayHello = function () {
    console.log('Hi! My name is ' + this.myName);
  },

  myObject = {
    myName : 'Rebecca'
  };

var myObjectHello = sayHello.bind(myObject);

sayHello();    // logs 'Hi! My name is the global object'
myObjectHello(); // logs 'Hi! My name is Rebecca'

函数被对象调用的例子:

var myName = 'the global object',

  sayHello = function() {
    console.log('Hi! My name is ' + this.myName);
  },

  myObject = {
    myName : 'Rebecca'
  },

  secondObject = {
    myName : 'Colin'
  };

myObject.sayHello = sayHello;
secondObject.sayHello = sayHello;

sayHello();        // logs 'Hi! My name is the global object'
myObject.sayHello();   // logs 'Hi! My name is Rebecca'
secondObject.sayHello(); // logs 'Hi! My name is Colin'

在调用一个很深的命名空间中函数的时候,我们通常会缓存一个变量指向那个要调用的函数,以减少代码量。但是这样做会改变函数中 this 的值,最终执行错误的操作。例如:

var myNamespace = {
  myObject : {
    sayHello : function() {
      console.log('Hi! My name is ' + this.myName);
    },

    myName : 'Rebecca'
  }
};

var hello = myNamespace.myObject.sayHello;

hello(); // logs 'Hi! My name is undefined'

所以,要缓存变量以节省代码量的话,正确的做法是只节省到调用那个函数的对象为止:

var myNamespace = {
  myObject : {
    sayHello : function() {
      console.log('Hi! My name is ' + this.myName);
    },

    myName : 'Rebecca'
  }
};

var obj = myNamespace.myObject;

obj.sayHello(); // logs 'Hi! My name is Rebecca'

总之,有一个大原则:谁调用了那个函数,this 就指向谁。

Javascript 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
微信小程序实现聊天室功能
Jun 14 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 #Javascript
JavaScript变量的作用域全解析
Aug 14 #Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 #Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 #Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 #Javascript
js实现人才网站职位选择功能的方法
Aug 14 #Javascript
jQuery入门基础知识学习指南
Aug 14 #Javascript
You might like
PHP6 mysql连接方式说明
2009/02/09 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
利用php生成验证码
2017/02/23 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
javascript表单验证大全
2015/08/12 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
Python教程之全局变量用法
2016/06/27 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
应届生会计电算化求职信
2013/10/03 职场文书
应届生程序员求职信
2013/11/05 职场文书
毕业生的求职信范文分享
2013/12/04 职场文书
小学生差生评语
2014/12/29 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
社区敬老月活动总结
2015/05/07 职场文书
西游降魔篇观后感
2015/06/15 职场文书
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技