首页 > Java资讯 > 正文

JavaScript面试总结：轻松搞定this问题

2019-12-09 16:25:57
2202次动力节点

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

79 拷贝.jpg

　　不同的环境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(.运算符优先级要高于())。