深入理解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 相关文章推荐
JS 时间显示效果代码
Aug 23 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
elementui实现预览图片组件二次封装
Dec 29 Javascript
JavaScript设计模式之原型模式详情
Jun 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
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
php源码的安装方法和实例
2019/09/26 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
js快速排序的实现代码
2013/12/08 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
Python中pygame安装方法图文详解
2015/11/11 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
UML设计模式笔试题
2014/06/07 面试题
婚前协议书怎么写
2014/04/15 职场文书
国防教育标语
2014/10/08 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
春秋淹城导游词
2015/02/11 职场文书
庆七一活动简报
2015/07/20 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript