js中的this关键字详解


Posted in Javascript onSeptember 25, 2013

this是Javascript语言的一个关键字。
它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如,

function test(){ 


this.x = 1; 

}

随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

下面分四种情况,详细讨论this的用法。

情况一:纯粹的函数调用

这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。

请看下面这段代码,它的运行结果是1。

function test(){ 


this.x = 1; 


alert(this.x); 

} 

test(); // 1

为了证明this就是全局对象,我对代码做一些改变:
var x = 1; 

function test(){ 


alert(this.x); 

} 

test(); // 1

运行结果还是1。再变一下:
var x = 1; 

function test(){ 


this.x = 0; 

} 

test(); 

alert(x); //0

情况二:作为对象方法的调用

函数还可以作为某个对象的方法调用,这时this就指这个上级对象。

function test(){ 


alert(this.x); 

} 

var o = {}; 

o.x = 1; 

o.m = test; 

o.m(); // 1

情况三 作为构造函数调用

所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。

function test(){ 


this.x = 1; 

} 

var o = new test(); 

alert(o.x); // 1

运行结果为1。为了表明这时this不是全局对象,我对代码做一些改变:
var x = 2; 

function test(){ 


this.x = 1; 

} 

var o = new test(); 

alert(x); //2

运行结果为2,表明全局变量x的值根本没变。

情况四 apply调用

apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。

var x = 0; 

function test(){ 


alert(this.x); 

} 

var o={}; 

o.x = 1; 

o.m = test; 

o.m.apply(); //0

apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。

如果把最后一行代码修改为 

o.m.apply(o); //1

运行结果就变成了1,证明了这时this代表的是对象o
Javascript 相关文章推荐
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
vue组件入门知识全梳理
Sep 21 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 #Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 #Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 #Javascript
JS 实现导航栏悬停效果(续)
Sep 24 #Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 #Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 #Javascript
基于jquery实现的省市区级联无ajax
Sep 24 #Javascript
You might like
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
php无序树实现方法
2015/07/28 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
python进程类subprocess的一些操作方法例子
2014/11/22 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
python 列表降维的实例讲解
2018/06/28 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
python 实现屏幕录制示例
2019/12/23 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
python各种excel写入方式的速度对比
2020/11/10 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
文科教师毕业的自我评价
2014/01/16 职场文书
预防煤气中毒方案
2014/06/16 职场文书
通信工程求职信
2014/07/16 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
MySQL kill不掉线程的原因
2021/05/07 MySQL