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页面顶部卷动广告效果
Dec 01 Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
Vue实现6位数密码效果
Aug 18 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截取指定2个字符之间字符串的方法
2015/04/15 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
新手入门常用代码集锦
2007/01/11 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
JavaScript中的比较操作符>、=、
2014/12/31 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
Vue.use源码分析
2017/04/22 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
Angular4 反向代理Details实践
2018/05/30 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
python的依赖管理的实现
2019/05/14 Python
python匿名函数用法实例分析
2019/08/03 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
django ORM之values和annotate使用详解
2020/05/19 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
播音主持专业个人自我评价
2014/01/09 职场文书
学习张林森心得体会
2014/09/10 职场文书
2015年母亲节寄语
2015/03/23 职场文书
门球健将观后感
2015/06/16 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书