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 相关文章推荐
JavaScript基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
详解实现vue的数据响应式原理
Jan 20 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数组
2006/10/09 PHP
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
php 读取文件乱码问题
2010/02/20 PHP
php 高效率写法 推荐
2010/02/21 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
javascript 实现map集合
2015/04/03 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
浅析vue深复制
2018/01/29 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
介绍Python中内置的itertools模块
2015/04/29 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
如何用Python合并lmdb文件
2018/07/02 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
如何在django中实现分页功能
2020/04/22 Python
scrapy-splash简单使用详解
2021/02/21 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
安全标准化汇报材料
2014/02/03 职场文书
2014财务年度工作总结
2014/11/11 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python
OpenFeign实现远程调用
2022/08/14 Java/Android