Javascript的this用法


Posted in Javascript onJanuary 16, 2017

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 相关文章推荐
一个js封装的不错的选项卡效果代码
Feb 15 Javascript
用js做一个小游戏平台 (一)
Dec 29 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
jQuery向webApi提交post json数据
Jan 16 #Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 #Javascript
jQuery插件扩展操作入门示例
Jan 16 #Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 #Javascript
js实现带缓动动画的导航栏效果
Jan 16 #Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 #Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 #Javascript
You might like
php在线生成ico文件的代码
2007/10/09 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
php中Ctype函数用法详解
2014/12/09 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
Web服务器框架 Tornado简介
2014/07/16 Python
Python之list对应元素求和的方法
2018/06/28 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
十佳大学生事迹材料
2014/01/29 职场文书
军训 自我鉴定
2014/02/03 职场文书
微笑服务演讲稿
2014/05/13 职场文书
债务纠纷委托书
2014/08/30 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL