深入理解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 相关文章推荐
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
JS如何把字符串转换成json
Feb 21 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
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
php抓取页面与代码解析 推荐
2010/07/23 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
vue计算属性computed的使用方法示例
2019/03/13 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
python返回昨天日期的方法
2015/05/13 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
Python 面试中 8 个必考问题
2018/11/16 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
香港交友网站:be2香港
2018/07/22 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
教学实验楼管理制度
2014/02/01 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
岗位明星事迹材料
2014/05/18 职场文书
消防安全宣传口号
2014/06/10 职场文书