深入理解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中 声明时用"var"与不用"var"的区别
Apr 15 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
jquery实现网页定位导航
Aug 23 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
Vue.js实现的购物车功能详解
Jan 27 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 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 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
PHP微信支付开发实例
2016/06/22 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
javascript date格式化示例
2013/09/25 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
详解JavaScript修改注册表的方法
2020/01/05 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
python网络编程学习笔记(四):域名系统
2014/06/09 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
物理教育专业毕业生推荐信
2013/11/03 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
庆祝儿童节标语
2014/10/09 职场文书
高效课堂教学反思
2016/02/24 职场文书
财务年终工作总结大全
2019/06/20 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
Mysql事务索引知识汇总
2022/03/17 MySQL
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js