面试干货|轻松搞定面试中的this问题

知了堂姐

2024-07-08 17:22:16

0次

文章来源：蛋糕哥哥

如果大家接触到的编程语言足够多，
就会发现几乎在大部分编程语言里边都有this关键字，
恐怕最难理解的要属于JavaScript中的this了。
不同的环境this不同，不同的对象this不同。

你曾经有没有被面试中的this问题难倒过？
今天知了堂的蛋糕哥哥给大家带来this的面试干货，
结合案例让你轻松解决面试中的this问题。

什么是this

this是js的一个关键字，它指代的是一个对象的引用。
当一个函数被调用时，会创建一个执行上下文，此执行上下文会记录这个函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。而this就是记录这个函数在哪里被调用的，在哪里被调用，这个函数里的this就指向谁。所以，this指向取决于函数的调用方式。

this关键字的作用

this 提供了一种更优雅的方式来隐式“传递”一个对象引用，代码设计将更利于复用。
总结简单的话：this返回的当前函数被调用的那个对象。

this的使用场景

1.全局使用 this === window（严格模式下IIFEthis为undefined）
2.函数当中在全局调用这个fn() this === window
3.在方法当中使用 this === 调用当前这个函数的所在的对象
4.构造函数，this指向的是 new 创建出来的实例对象
5.通过 bind，call，apply 操作符来显示的设置 this的指向
6.ES6的箭头函数，没有自己的this，父作用域的this

常见面试题分享

1.面试题一
    var name = "window"

    var obj = {
        name:"my Object",
        getName:function(){
            console.log(this.name);
            return function(){
                return this.name
            }
        }
    }

var fun = obj.getName(); //输出?
fun()//输出?

答案：第一个输出的my Object，第二个输出的是window，小伙伴们答对了么？
详解：
首先第一个很好解释，getName方法是obj调用的，所以根据使用场景3，方法谁调用，this执行谁。关键是第二个，调用了getName后返回一个匿名函数，把这个函数的引用赋值给了fun，然后fun在window环境下被调用，所以根据场景2，此时的this为window（有小伙伴是不是想到闭包呢？跟闭包一点关系都没有哟~）


    var x = 3;
var foo = {
  x: 2,
  baz: {
    x: 1,
    bar: function() {
      return this.x;
    }
  }
}


var go = foo.baz.bar;
    foo.baz.bar()//输出？
    go()//输出？

答案：第一个输出1，第二个输出3（.运算符优先级要高于（））。
恭喜你基本掌握了this的调用。

其实在开发中，并不会去写像面试那么绕的东西。面试题是为了更深入的洞悉应聘者的掌握情况，所以也有很大的参考意义！希望能对小伙伴的面试有帮助，如果能帮到你一点点，请给小小的赞。大家加油。
——爱你们的知了堂蛋糕哥哥。

上一篇：月薪5k vs 10k ，多半是因为忽略了这些秋招小心机

下一篇：学员故事|学习真累，我快崩溃了