轻松搞定面试中this问题

449 阅读2分钟

什么是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()//输出?

avatar

第一个输出的my Object,第二个输出的是window,小伙伴们答对了么?

首先第一个很好解释,getName方法是obj调用的,所以根据使用场景3,方法谁调用,this执行谁。 关键是第二个,调用了getName后返回一个匿名函数,把这个函数的引用赋值给了fun,然后fun在window环境下被调用,所以根据场景2,此时的this为window(有小伙伴是不是想到闭包。。。,跟闭包一点关系都没有哈)

1.面试题二

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

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

avatar

第一个输出1,第二个输出3(.运算符优先级要高于()),恭喜你基本掌握了this的调用。

总结

其实我们在开发中,不会去写像面试那么绕的东西,但是没有办法,哈哈哈! 希望能对小伙伴有帮助,如果能帮到你一点点,请给小小的赞。
大家加油,爱你们的蓉华蛋糕哥。