灵活的理解JavaScript中的this指向


Posted in Javascript onFebruary 25, 2016

this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要。首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题。

为什么要学习this?如果你学过函数式编程,面向对象编程,那你肯定知道干什么用的,如果你没有学过,那么暂时可以不用看这篇文章,当然如果你有兴趣也可以看看,毕竟这是js中必须要掌握的东西。

例子1:

function a(){
var user = "追梦子";
console.log(this.user); //undefined
console.log(this); //Window
}
a();

按照我们上面说的this最终指向的是调用它的对象,这里的函数a实际是被Window对象所点出来的,下面的代码就可以证明。

function a(){
var user = "追梦子";
console.log(this.user); //undefined
console.log(this);//Window
}
window.a();

和上面代码一样吧,其实alert也是window的一个属性,也是window点出来的。

例子2:

var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
o.fn();

这里的this指向的是对象o,因为你调用这个fn是通过o.fn()执行的,那自然指向就是对象o,这里再次强调一点,this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁调用的就指向谁,一定要搞清楚这个。

其实例子1和例子2说的并不够准确,下面这个例子就可以推翻上面的理论。

如果要彻底的搞懂this必须看接下来的几个例子

例子3:

var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
window.o.fn();

这段代码和上面的那段代码几乎是一样的,但是这里的this为什么不是指向window,如果按照上面的理论,最终this指向的是调用它的对象,这里先说个而外话,window是js中的全局对象,我们创建的变量实际上是给window添加属性,所以这里可以用window点o对象。

这里先不解释为什么上面的那段代码this为什么没有指向window,我们再来看一段代码。

var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //12
}
}
}
o.b.fn();

这里同样也是对象o点出来的,但是同样this并没有执行它,那你肯定会说我一开始说的那些不就都是错误的吗?其实也不是,只是一开始说的不准确,接下来我将补充一句话,我相信你就可以彻底的理解this的指向的问题。

 情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。

情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。

情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象,例子3可以证明,如果不相信,那么接下来我们继续看几个例子。

var o = {
a:10,
b:{
// a:12,
fn:function(){
console.log(this.a); //undefined
}
}
}
o.b.fn();

尽管对象b中没有属性a,这个this指向的也是对象b,因为this只会指向它的上一级对象,不管这个对象中有没有this要的东西。

还有一种比较特殊的情况,例子4:

var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j();

这里this指向的是window,是不是有些蒙了?其实是因为你没有理解一句话,这句话同样至关重要。

this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的,例子4中虽然函数fn是被对象b所引用,但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window,这和例子3是不一样的,例子3是直接执行了fn。

this讲来讲去其实就是那么一回事,只不过在不同的情况下指向的会有些不同,上面的总结每个地方都有些小错误,也不能说是错误,而是在不同环境下情况就会有不同,所以我也没有办法一次解释清楚,只能你慢慢地的去体会。

构造函数版this:

function Fn(){
this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子

这里之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向,将这个this指向对象a,为什么我说a是对象,因为用了new关键字就是创建一个对象实例,理解这句话可以想想我们的例子3,我们这里用变量a创建了一个Fn的实例(相当于复制了一份Fn到对象a里面),此时仅仅只是创建,并没有执行,而调用这个函数Fn的是对象a,那么this指向的自然是对象,那么为什么对象Fn中会有user,因为你已经复制了一份Fn函数到对象a中,用了new关键字就等同于复制了一份。

除了上面的这些以外,我们还可以自行改变this的指向,关于自行改变this的指向请看JavaScript中call,apply,bind方法的总结这篇文章,详细的说明了我们如何手动更改this的指向。

灵活的理解JavaScript中的this指向对我们的工作有很大的帮助,同时感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
JavaScript 图片预览效果 推荐
Dec 22 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
php中and 和 &&出坑指南
Jul 13 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 #Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 #Javascript
jQuery zTree加载树形菜单功能
Feb 25 #Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 #Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 #Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 #Javascript
利用jQuery中的ajax分页实现代码
Feb 25 #Javascript
You might like
PHP可逆加密/解密函数分享
2012/09/25 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
Python换行与不换行的输出实例
2020/02/19 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
结构工程个人自荐信范文
2013/11/30 职场文书
中华魂演讲稿
2014/05/13 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
质量承诺书怎么写
2014/05/24 职场文书
九华山导游词
2015/02/03 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers