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 相关文章推荐
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 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
PHP开发负载均衡指南
2010/07/17 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
深入PHP变量存储的详解
2013/06/13 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
深入了解Django View(视图系统)
2019/07/23 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
Python-for循环的内部机制
2020/06/12 Python
什么是python的自省
2020/06/21 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
求职信内容考虑哪几点
2013/10/05 职场文书
司机检讨书
2014/02/13 职场文书
给领导的检讨书
2014/02/16 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL