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 相关文章推荐
Javascript 表单之间的数据传递代码
Dec 04 Javascript
js 省地市级联选择
Feb 07 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
JS处理一些简单计算题
Feb 24 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 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 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
java解析json方法总结
2019/05/16 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
js兼容的placeholder属性详解
2013/08/18 Javascript
js中的this关键字详解
2013/09/25 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
python实现rest请求api示例
2014/04/22 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
python逆向入门教程
2018/01/15 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
Python解析多帧dicom数据详解
2020/01/13 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
组织鉴定材料
2014/06/02 职场文书
小升初自荐信范文
2015/03/05 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
Ajax异步刷新功能及简单案例
2021/11/20 Javascript