首先,用一句话解释this,就是:指向执行当前函数的对象。

当前执行,理解一下,也就是说this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定。this到底指向谁?this的最终指向的是那个调用它的对象(虽然在绝大多数情况下这样理解不会出问题,但实际上是不准确的)。

1.默认执行

例子1:

        function fn(){
var user = "admin";
console.log(this.user); //undefined
console.log(this); //window(非严格模式下)
}
fn();

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

        function fn(){
var user = "admin";
console.log(this.user); //undefined()
console.log(this); //window(非严格模式下)
}
window.fn();

2.通过对象执行:

例子2:

        var obj = {
user:"admin",
fn:function(){
console.log(this.user); //admin
}
}
obj.fn();

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

3.推翻理论:

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

        var obj = {
user:"admin",
fn:function(){
console.log(this.user); //admin
}
}
window.obj.fn();

这段代码和上面的那段代码几乎是一样的,但是这里的this为什么不是指向window,如果按照上面的理论,最终this指向的是调用它的对象

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

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

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

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

还有一种比较特殊的情况:

例子4:

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

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

this讲来讲去其实就是那么一回事,只是在不同环境下情况就会有不同,所以我也没有办法一次解释清楚,只能慢慢地的去体会。

彻底弄懂JS中的this的更多相关文章

  1. JavaScript中的this详解(彻底弄懂js中的this用法)!

    要想学好js,那么其中那些特别令人混淆迷惑的知识点,就一定要弄清楚.this关键字就是其中让初学者比较迷惑的知识点之一,不过灵活运用this可以提升代码的性能和复用性,那么今天我就和大家一起来了解th ...

  2. 让你弄懂js中的闭包

    目录 闭包 闭包如何产生 闭包是什么 常见的闭包 闭包的作用 闭包的生命周期 闭包的应用 闭包的缺点 内存泄露 内存溢出 闭包面试题 闭包 之前在我执行上下文执行上下文栈这篇文章中,出现了这样一个题目 ...

  3. js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获

    js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...

  4. 彻底弄懂AngularJS中的transclusion

    点击查看AngularJS系列目录 彻底弄懂AngularJS中的transclusion AngularJS中指令的重要性是不言而喻的,指令让我们可以创建自己的HTML标记,它将自定义元素变成了一个 ...

  5. 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  6. 让你彻底搞懂JS中复杂运算符==

    让你彻底搞懂JS中复杂运算符== 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读了ECMA ...

  7. 一文弄懂神经网络中的反向传播法——BackPropagation【转】

    本文转载自:https://www.cnblogs.com/charlotte77/p/5629865.html 一文弄懂神经网络中的反向传播法——BackPropagation   最近在看深度学习 ...

  8. 【转】彻底弄懂Java中的equals()方法以及与"=="的区别

    彻底弄懂Java中的equals()方法以及与"=="的区别 一.问题描述:今天在用Java实现需求的时候,发现equals()和“==”的功能傻傻分不清,导致结果产生巨大的偏差. ...

  9. 彻底搞懂 JS 中 this 机制

    彻底搞懂 JS 中 this 机制 摘要:本文属于原创,欢迎转载,转载请保留出处:https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规 ...

随机推荐

  1. python之loggin模块与第三方模块

    目录 logging模块详解 第三方模块 openpyxl模块 logging模块详解 主要组成部分 logger对象,用于产生日志 # 第一步,创建logger对象 logger = logging ...

  2. 用t-SNE进行流形学习(digits数据集)

    流行学习算法: 是一类用于可视化的算法,它允许进行更复杂的映射,通常也可以给出更好的可视化. t-SNE算法是其中一种. PCA是用于变换数据的首选方法,也可以进行可视化,但它的性质(先旋转然后减少方 ...

  3. Kafka到底有多高可靠?(RNG NB)

    在聊Kafka高可靠之前,先在评论区来波RNG NB好不好! 什么叫可靠性? 大家都知道,系统架构有三高:「高性能.高并发和高可用」,三者的重要性不言而喻. 对于任意系统,想要同时满足三高都是一件非常 ...

  4. 前端3JS2

    内容概要 运算符 流程控制 三元运算符 函数 自定义对象 内置对象 JSON对象 正则对象 内容详情 运算符

  5. 【Linux系列】-Linux中用shell脚本从SFTP服务器下载文件

    银企直连的电子回单接口中,部分银行使用sftp服务作为文件服务器,通常只保留N天的文件内容,企业未在规定的时间范围下载文件之后就不能下载了,那么有一个自动下载的脚本岂不美滋滋. Linux安装SFTP ...

  6. 一文澄清网上对 ConcurrentHashMap 的一个流传甚广的误解!

    大家好,我是坤哥 上周我在极客时间某个课程看到某个讲师在讨论 ConcurrentHashMap(以下简称 CHM)是强一致性还是弱一致性时,提到这么一段话 这个解释网上也是流传甚广,那么到底对不对呢 ...

  7. 在Visual Studio 2019中使用scanf报错C4996解决办法

    错误警告信息 错误C4996 'scanf': This function or variable may be unsafe. Consider using scanf_s instead. To ...

  8. [二进制漏洞]栈(Stack)溢出漏洞 Linux篇

    目录 [二进制漏洞]栈(Stack)溢出漏洞 Linux篇 前言 堆栈 堆栈(Stack)概念 堆栈数据存储方式 函数调用 函数调用C语言代码 函数调用过程GDB调试 函数Call返回原理 函数栈帧 ...

  9. mysql中innodb和myisam区别

    前言 InnoDB和MyISAM是很多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,5.7之后就不一样了. 1.事务和外键 ● InnoDB具有事务,支持4个事务隔离级别,回滚,崩溃修 ...

  10. gnet: 一个轻量级且高性能的 Go 网络框架 使用笔记

    一个偶然的机会接触到了golang,被它的高并发传说所吸引,就开始学这门语言,越学感觉越有意思^_^ 注册了博客园这么多年,第一次写东西,年纪大了,脑子不好使了,就得写下来,记下来,为了自己以后查阅, ...