0


【JavaScript】this指向经典面试题(超详细)

在这里插入图片描述

文章目录

🍉前言

本篇文章主要写的是【JS中this指向面试题(超详细代码解读)】,面试遇到的经典问题不少,所以本文总结一写常见的分享给各位。
只要我们掌握了this的四个绑定规则,仔细的去慢慢分析一定没有问题。接下来为大家展示四个经典的面试题。

面试题参考文章:

  • 【Web前端面试】葵花宝典(2022版本)—— Vue篇
  • 【Web前端面试】葵花宝典(2022版本) —— React 篇
  • 【Web前端面试】葵花宝典(2022版本)—— CSS篇
  • 【Web前端面试】葵花宝典 (2022版本)—— JS篇(上)
  • 【Web前端面试】葵花宝典(2022版本)—— JS篇(下)
  • 【JavaScript】中this指向相关的经典面试题
  • 【JavaScript】作用域提升面试题(详解)

【面试专栏】—— 点击链接即可订阅面试专栏

由于先写代码然后再在代码块下面进行分析解释,怕xdm找不到对应的句子,所以直接就在代码块中,相应的句子后面给出了分析解释。下面的四个案例皆是如此,望见谅。

面试题一:

这道面试题非常简单,无非就是绕一下,希望把面试者绕晕:

var name ='window'// var name = 'window' 表示在window中name的值为 ’window‘var person ={name:'person',sayName:function(){
        console.log(this.name)}}functionsayName(){var sss = person.sayName;sss();// window  独立调用指向全局对象window

    person.sayName();// person  隐式调用(person.sayName)();// person  和上一句效果一样(person.sayName) 带小括号不带小括号没区别(b = person.sayName)()// window  间接引用 ,(b = person.sayName)的结果是一个值,并没有和person对象有联系,所以后面加一个()进行调用的时候,还是属于默认绑定(直接调用),this指向全局对象}sayName()

面试题二:

这道面试题比上一道更加绕一些,在对象内部进行了函数的声明:

var name ='window'var person1 ={name:'person1',foo1:function(){
        console.log(this.name)},foo2:()=>{
        console.log(this.name)},foo3:function(){returnfunction(){
            console.log(this.name)}},foo4:function(){return()=>{
            console.log(this.name)}}}var person2 ={name:'person2'}// 正题来咯

person1.foo1();// person1 (隐式绑定)
person1.foo1.call(person2);// person2 (call显示绑定person2,显示绑定优先级大于隐式绑定)

person1.foo2();// window (箭头函数不绑定作用域,找到上层作用域为全局window)
person1.foo2.call(person2);// window (箭头函数没有this,call()无效)

person1.foo3()();// window (person1.foo3()得到一个return的函数,再加上一个小括号属于独立调用指向全局对象window)
person1.foo3.call(person2)();// window (person1.foo3.call(person2)这句话得到返回值后,后面加小括号调用,还是属于独立调用 指向window) 
person1.foo3().call(person2);// person2 (最终调用return函数时,显示绑定上了person2)

person1.foo4()();// person1 (person1.foo4()这句话得到return后的函数为箭头函数进行调用,箭头函数中没有this向上一层作用域找,上层作用域为foo4,this指向person1)
person1.foo4.call(person2)();// person2 (上层作用域被显示绑定为person2 ,在箭头函数中找不到this后,向上层所用域找 就找到了之前被显示绑定的person2)
person1.foo4().call(person2);// person1 (person1.foo4()这句话得到return后的函数为箭头函数进行显示绑定person2,但箭头函数中没有this,显示绑定无效,向上一层作用域找,找到函数foo4,this指向person1)

面试题三:

第三题就更加绕了,学过构造函数的小伙伴应该不难看懂,没学过的也可以去学习一下:

var name ='window'functionPerson(name){this.name = name
    this.foo1=function(){
        console.log(this.name)}this.foo2=()=> console.log(this.name)this.foo3=function(){returnfunction(){
            console.log(this.name)}}this.foo4=function(){return()=>{ console.log(this.name)}}}var person1 =newPerson('person1')var person2 =newPerson('person2')

person1.foo1()// person1  (隐式绑定)
person1.foo1.call(person2)// person2 (显示绑定person2,显示绑定优先级高于person1.foo1的隐式绑定)

person1.foo2()// person1  (上层作用域中的this是person1函数)
person1.foo2.call(person2)// person1 (显示绑定在箭头函数中无效,所以结果还是上层作用域中的this是person1函数)

person1.foo3()()// window (person1.foo3()得到返回函数 加小括号进行直接调用 this指向全局作用域window)
person1.foo3.call(person2)()// window (person1.foo3.call(person2)得到返回函数后,独立函数调用指向全局)
person1.foo3().call(person2)// person2 (person1.foo3()得到返回函数后,显示绑定person2)

person1.foo4()()// person1 (箭头函数中没有this,向上一层作用域找 this指向person1)
person1.foo4.call(person2)()// person2 (person1.foo4.call(person2)显示绑定person2,得到返回的箭头函数后,向上一层作用域找,this指向person2)
person1.foo4().call(person2)// person1 (person1.foo4()得到返回箭头函数显示绑定person2无效,向上一层作用域找,this指向person1)

面试题四:

var name ='window'functionPerson(name){this.name = name
    this.obj ={name:'obj',// 此时foo1,foo2的上层作用域为obj对象foo1:function(){returnfunction(){
                console.log(this.name)}},foo2:function(){return()=>{
                console.log(this.name)}}}}var person1 =newPerson('person1')var person2 =newPerson('person2')

person1.obj.foo1()()// window  (person1.obj.foo1()得到返回函数后直接调用,this指向全局对象)
person1.obj.foo1.call(person2)()// window (还是直接调用,this指向全局对象)
person1.obj.foo1().call(person2)// person2 (person1.obj.foo1()这句话得到返回函数后,使用显示调用绑定person2,this指向person2)

person1.obj.foo2()()// obj (person1.obj.foo2()这句话得到返回函数后调用,但是箭头函数没有this,向上一层作用域找,上一层作用域为foo2函数,foo2是被obj对象调用的,所以this指向obj对象)
person1.obj.foo2.call(person2)()// person2 (person1.obj.foo2.call(person2)将foo2的上层作用域指向了person2,再进行调用的时候,上一层作用域就是person2)
person1.obj.foo2().call(person2)// obj (person1.obj.foo2()的到返回函数,使用显示绑定call无效,上一层作用域为foo2函数,foo2是被obj对象调用的,所以this指向obj对象)

这里可能产生一点有疑问的地方,首先说明在对象中是没有作用域的,

person1.obj.foo2()() 

这句,按照之前的理解,

person1.obj.foo2()

这句话得到返回函数后调用,但是箭头函数没有this,向上一层作用域找,因为obj对象是没有作用域的,按道理来讲this应该指向person1,但是foo2函数是被obj对象隐式绑定进行调用的,所以会指向obj对象。


不了解this的四种绑定规则或者this的指向问题的小伙伴,可以参考【JavaScript】this关键字的指向问题(五千字详解)和JavaScript中this四种绑定规则优先级比较与箭头函数中的this获取,有详细进行描述与举例说明。

🎃专栏分享:

 JavaScript相关面试题就更新到这里啦,相关 Web前端面试题 可以订阅专栏哦

🥰
专栏地址:《面试必看》


      名言警句:说能做的做说过的
     
    
   
   
    \textcolor{red} {名言警句:说能做的做说过的}
   
  
 名言警句:说能做的做说过的

      原创不易,还希望各位大佬支持一下
     
    
   
   
    \textcolor{blue}{原创不易,还希望各位大佬支持一下}
   
  
 原创不易,还希望各位大佬支持一下

👍

      点赞,你的认可是我创作的动力!
     
    
   
   
    \textcolor{green}{点赞,你的认可是我创作的动力!}
   
  
 点赞,你的认可是我创作的动力!

⭐️

      收藏,你的青睐是我努力的方向!
     
    
   
   
    \textcolor{green}{收藏,你的青睐是我努力的方向!}
   
  
 收藏,你的青睐是我努力的方向!

✏️

      评论,你的意见是我进步的财富!
     
    
   
   
    \textcolor{green}{评论,你的意见是我进步的财富!}
   
  
 评论,你的意见是我进步的财富!
标签: javascript

本文转载自: https://blog.csdn.net/qq_49002903/article/details/124520132
版权归原作者 不苒 所有, 如有侵权,请联系我们删除。

“【JavaScript】this指向经典面试题(超详细)”的评论:

还没有评论