JavaScript中的this到底是什么(一)


Posted in Javascript onDecember 09, 2015

对于常年使用C++,C#,Java等这些面向对象语言的程序员来说,几乎天天都和this打交道。在这些语言里,this含义非常明确,就是指向当前的对象实例,我们用起来也是相当的放心。然而,到了JavaScript这个动态语言里,this的写法没变,但是其含义却大大地不同了,下面用实例说明,使用浏览器为Firefox14.0.1.

首先,Hello World o(^?^)o

本人从刚开始自学javascript这门灵活的编程语言到现在,也有一年多的时间了。

在这一年多的时间里,这门语言所带给我的不仅是高额的工作回报,还有很多意想不到的惊喜,让我这样一个艺术生领略编程的魅力。

从今天开始,准备每周一更我的博客,不止是分享,更是勉励自己。

OK,我们进入今天的主题,今天我们来谈谈javascript里面一个比较特殊的对象:this

接触过其他面向对象的编程语言(如:java,C,C++等)的小伙伴们可能对this非常熟悉。

不过它在javascript当中为什么会经常性的给我们造成很多麻烦呢?

我们先来说说他与其他编程语言的不同

在javascript里面,this是一个特殊的对象,它不像其他编程语言那样,是存储在实例中的值,直接指向此实例。

而是作为一个单独的指针,在不同的情况之下,指向不同的位置,这也是为什么我们会将它搞混的原因。

下面我们来看下,它在不同情况下分别是怎样一种形态

 1.在全局作用域时:

这个是最好理解的,即在全局作用域下this指向window,也就是在全局作用域下,this与window是等价的:

console.log(this === window); //true

 另外,由于在此时,this等价于window,所以我们在全局作用域声明的变量也会指向this:

var x = 1;
console.log(this.x);//1
console.log(window.x);//1

当然,我们还有另一种声明变量的方法:

x = 0;
function setNum(){
x = 1;
};
console.log(this.x);//0
setNum();
console.log(this.x);//1

当声明变量时不使用 var 或者 let的话 此时相当于给全局的this添加或者改变属性值

看起来还是很简单的,不就是个等价于window的对象么。

当然,如果仅仅是这样,this或许根本就没有存在的必要了。

而this最让人头疼的部分就是它在不同的作用域下,它的形态也是截然不同的

 2.当在函数中时:

 到这里时,this的陷阱已经渐渐显露出来了

 这里为什么说是当在函数中而不是局部作用域时,要讲这个,首先我们要清楚function是什么

在javascript中,function作为js中的一个特殊对象:函数,是有着不同的形态的

我们通常看到的:

function set(){
  var x = 0;
};

在这一形态下,其内部的this是与全局作用域时一样,直接指向window,所以其形态 依然等价于window。

var x = 0;
function num(){
  this.x = 1;
}
console.log(this.x);//0
num();
console.log(this.x);//1

 这里就是经常容易犯得错误,很多人觉得,当this已经在一个function之中时,其目前所处位置为当前的局部作用域,所以目前指向的应该是此函数 

但是,如果你将这个函数实例化(new)之后,此函数将生成一个全新的环境,此时在此实例中的this也会随之发生变化,它将指向所在实例。

num = "0";
function setThis(){
  this.num = "1";
}
console.log(this.num);//"0"
new setThis();
console.log(this.num);//"0"
console.log(new setThis().num);//1

这是因为,当实例化之后,此函数变成了一个实例对象,而其内部的this也自然而然的指向了此实例对象,如同一开始的this是指向window的对象一样指向了它所在的实例

另外,在我们写javascript的时候,我们通常还会有一种调用函数的方法,即为元素绑定事件,比如button.addEventListener(‘click', fn, false)等,如果在fn里面需要使用到this的话,那么此时this指向事件处理元素,也就是button

注意:this作为关键字,你是无法复写它的。

不知不觉,写的也好多了,其实this还有更多的形态,比如prototype,比如在html中,比如在dom事件处理程序里,由于篇幅过长,这里就不再继续进行敖述,下回我会讲到在prototype中的this

this在我的理解中作为一个指针,相应的它在prototype原型链中会有更重要的地位,不过不在我们今天的范围之内,暂不做过多的解释

以后基本会每周一更吧,作为javascript的新手,也希望写的东西可以跟更多人分享,更希望从大家的思想中总结更多的经验!

关于JavaScript中的this到底是什么(一),每周一都会给大家更新的,作为javascript的新手,希望写的东西可以和身边的朋友分享,更希望互相交流学习经验。谢谢!

Javascript 相关文章推荐
jQuery表格行换色的三种实现方法
Jun 27 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 #Javascript
完美实现bootstrap分页查询
Dec 09 #Javascript
JavaScript脚本库编写的方法
Dec 09 #Javascript
js省市联动效果完整实例代码
Dec 09 #Javascript
JavaScript知识点整理
Dec 09 #Javascript
js实现跨域访问的三种方法
Dec 09 #Javascript
详解js跨域原理以及2种解决方案
Dec 09 #Javascript
You might like
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
php中cookie的作用域
2008/03/27 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
python 生成不重复的随机数的代码
2011/05/15 Python
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
Python实现Linux监控的方法
2019/05/16 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
制定岗位职责的原则
2013/11/08 职场文书
文秘专业应届生求职信范文
2013/11/14 职场文书
大学生村官任职感言
2014/01/09 职场文书
校园之星获奖感言
2014/01/29 职场文书
求职信范文怎么写
2014/01/29 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
讲座新闻稿
2015/07/18 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL