深入理解js中this的用法


Posted in Javascript onMay 28, 2016

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

1、纯粹函数调用。

function test() {  
  this.x = 1;  
  alert(x);
}

test();

其实这里的this就是全局变量。看下面的例子就能很好的理解其实this就是全局对象Global。其实这里的this就是全局变量。看下面的例子就能很好的理解其实this就是全局对象Global。

var x = 1;
function test() {
  alert(this.x);
}
test();//1

var x = 1;
function test() {
  this.x = 0;
}
test();
alert(x);//0

2、作为方法调用,那么this就是指这个上级对象。

function test() {
  alert(this.x);
}

var o = {};
o.x = 1;
o.m = test;
o.m(); //1

3、作为构造函数调用。所谓构造函数,就是生成一个新的对象。这时,这个this就是指这个对象。

function test() {  
   this.x = 1;
}
var o = new test();
alert(o.x);//1

4、apply调用

var x = 0;
function test() {
  alert(this.x);
}

var o = {};
o.x = 1;
o.m = test;
o.m.apply(); //0
o.m.apply(o);//1

当apply没有参数时,表示为全局对象。所以值为0。

以上这篇深入理解js中this的用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript URL锚点取值方法
Feb 25 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
关于function类中定义变量this的简单说明
May 28 #Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 #Javascript
动态更新highcharts数据的实现方法
May 28 #Javascript
不同js异步函数同步的实现方法
May 28 #Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 #Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 #Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 #Javascript
You might like
如何使用PHP中的字符串函数
2006/11/24 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
Nodejs之http的表单提交
2017/07/07 NodeJs
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
2020/12/19 Vue.js
Python3基础之条件与循环控制实例解析
2014/08/13 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
python实现矩阵乘法的方法
2015/06/28 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
在Python中移动目录结构的方法
2016/01/31 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
python为什么会环境变量设置不成功
2020/06/23 Python
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
简历的自我评价
2014/02/03 职场文书
开学季活动策划方案
2014/02/28 职场文书
委托证明模板
2014/09/16 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
小学作文之描写天气
2019/08/15 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS