灵活的理解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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
VsCode插件整理(小结)
Sep 14 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 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 CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
浅析js封装和作用域
2013/07/09 Javascript
浅析javascript 定时器
2014/12/23 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
详解Vue方法与事件
2017/03/09 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
详解Django中的form库的使用
2015/07/18 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
广告设计专业自荐信范文
2013/11/14 职场文书
消防安全责任书范本
2014/04/15 职场文书
代理词怎么写
2015/05/25 职场文书
寒假生活随笔
2015/08/15 职场文书
小学语文新课改心得体会
2016/01/22 职场文书