JavaScript中this指向问题,暴力理解终极方法

Stella981
• 阅读 327

前言:前端面试题总有问this是谁?对于java程序员来说,this很好理解,就是当前对象本身。对于js来说,this就是传说中的当前运行环境,其实理论知识一大把,但是很多程序员看到有些写法还是会懵逼,比如dom.onclick事件里调用事件里自己的方法,为啥指向的是window对象?

先看看下面的代码:

var obj = {
 bb: function () {
     console.info(this);
     var aa=function(){
        console.info(this);
     }
     //写法三
     aa();
  }
};

var bb = obj.bb;
// 写法一
obj.bb();
// 写法二
bb();

其实很简单,就是通过哪个对象访问的方法,this就指向哪个对象。写法二中bb()缺省就是window对象的方法,不管bb()在哪里调用都一样,window.bb()也就是调用当前作用域里的bb方法。所以写法三也是window.aa(),即使aa()是在bb()里调用的。

注意:首先感谢下面评论,ES6的箭头函数是特例,箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。这是箭头函数封装之后的结果,按照JS的this原理,箭头函数中调用的方法肯定是通过window对象调用来实现的。

以上是我个人的总结,详细请看阮一峰大神的博客

http://www.ruanyifeng.com/blog/2018/06/javascript-this.html

博客:https://my.oschina.net/wangnian

点赞
收藏
评论区
推荐文章
徐小夕 徐小夕
3年前
javascript正则深入以及10个非常有意思的正则实战
前言熟悉我的朋友可能会知道,我一向是不写热点的。为什么不写呢?是因为我不关注热点吗?其实也不是。有些事件我还是很关注的,也确实有不少想法和观点。但我一直奉行一个原则,就是:要做有生命力的内容。对于前端工程师来说,正则表达式也许是javascript语言中最晦涩难懂的,但是也往往是最简洁的.工作中遇到的很多问题,诸如搜索,查找,高亮关键字等都可以
九路 九路
3年前
【干货】Javascript千面之变幻莫测的this指向
相信很多前端人对“this”的指向是很懵逼的,因为this的指向总是变幻莫测,在不同的调用环境中,它的指向总是各不相同。在面试中,this也是经常考的必考题之一,很多前端老鸟经常会在this这里掉坑。接下来,看笔者来一层一层的揭开this指向的面纱。1.事件调用环境中的this指向<divclass"b
Wesley13 Wesley13
2年前
java中多态的实现机制
多态的概念:  简单来说就是事物在运行过程中存在的不同状态,即父类或接口定义的引用变量指向子类或具体实现类的实例对象。程序调用方法在运行期才进行动态绑定,而不是引用变量的类型中定义的方法。多态存在的前提:1、存在继承关系,子类继承父类;2、子类重写父类的方法;3、父类引用指向子类对象。具体实例:1、定义一个父类:Animal
Easter79 Easter79
2年前
this到底指向啥?看完这篇就知道了!
JS中的this是一个老生常谈的问题了,因为它并不是一个确定的值,在不同情况下有不同的指向,所以也经常使人困惑。本篇文章会谈谈我自己对this的理解。this到底是啥其实this就是一个指针,它指示的就是当前的一个执行环境,可以用来对当前执行环境进行一些操作。因为它指示的是执行环境,所以在定义这个变量时,其实是不知道它真正的值的,只
Stella981 Stella981
2年前
ES6中的super
对象方法中的super原型对于javascript来说非常重要,甚至可以说是javascript中最为重要的知识点。然而,很多人一看到原型就懵逼。ES5我们可以使用Object.getPrototypeOf()来返回原型对象,使用Object.setPrototypeOf()来设置原型对象。看下面的例子:letpe
Stella981 Stella981
2年前
Babel总结
什么是babel?babel是一个JavaScript编译器。Babel是一个工具链,主要用于将ECMAScript2015代码转换为向后兼容的旧浏览器或环境中JavaScript版本。注解:传统的编译是指转化成可执行的代码,也就是二进制代码。但是对于前端来说,因为JS是解释性语言,对于浏览器或者Node来说就是可执行的代码。
Stella981 Stella981
2年前
JS 中的this指向问题和call、apply、bind的区别
this的指向问题一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window。functiona(){console.log(this);//输出函数a中的this对象}functionb(){};varc{name:"call"}
Stella981 Stella981
2年前
JavaScript 里的奇葩知识.....
对于经验丰富的老前端来说,什么代码没见过,但是就是有有些很神奇的代码,是永远都不会出现在业务代码里的,这些就是今天来跟大家讲的奇葩代码知识!1Function.prototype 竟然是个函数类型。而自定义函数的原型却是对象类型。typeof Function.prototype  'function
Stella981 Stella981
2年前
React(5)
绑定函数事件在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要将事件处理函数运行时的this指向当前组件实例。run(){  alert('我是一个run方法')}<buttononClick{this.run}执行方法</button //方法
Stella981 Stella981
2年前
JavaScript函数式编程,“香”吗?
总说函数是JavaScript的一等公民,很多人就问了,它凭什么?其实凭的就是对于JS这种没有明确归类的“多范式语言”,函数式编程拥有着天然的优势。在JS里,函数本身就被视作对象,可以有属性,能作为参数传给函数,也能作为函数的返回结果,十分便利。而这种特性对于代码日益庞大,业务逻辑逐渐复杂的前端来说称得上是至关重要。