深入理解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 相关文章推荐
JsDom 编程小结
Aug 09 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
javascript中new关键字详解
Dec 14 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
js实现上传图片及时预览
May 07 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 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 MessagePack介绍
2013/10/06 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
canvas实现钟表效果
2017/02/13 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
详解用python写一个抽奖程序
2019/05/10 Python
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
高三家长寄语
2014/04/03 职场文书
施工协议书范本
2014/04/22 职场文书
超市创业计划书
2014/04/24 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
保护校园环境倡议书
2015/04/28 职场文书
2016中秋节广告语
2016/01/28 职场文书
浅谈Python中的正则表达式
2021/06/28 Python
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技