当前位置:首页 » 《随便一记》 » 正文

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

22 人参与  2022年08月05日 08:33  分类 : 《随便一记》  评论

点击全文阅读


在这里插入图片描述

文章目录

?前言面试题一:面试题二:面试题三:面试题四: ?专栏分享:

?前言

本篇文章主要写的是【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)    }}function sayName () {    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 () {        return function () {            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'function Person (name) {    this.name = name    this.foo1 = function () {        console.log(this.name)    }    this.foo2 = () => console.log(this.name)    this.foo3 = function () {        return function () {            console.log(this.name)        }    }    this.foo4 = function () {        return () => { console.log(this.name) }    }}var person1 = new Person('person1')var person2 = new Person('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'function Person (name) {    this.name = name    this.obj = {        name: 'obj',        // 此时foo1,foo2的上层作用域为obj对象        foo1: function () {            return function () {                console.log(this.name)            }        },        foo2: function () {            return () => {                console.log(this.name)            }        }    }}var person1 = new Person('person1')var person2 = new Person('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}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/44060.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 男友霸道给我开黑卡,转头却骂我是捞女最新章节_肖年顾客黑卡热文_小说后续在线阅读_无删减免费完结_
  • 他在回忆尽头全集_贺南舟许清梨叶絮完结txt_小说后续在线阅读_无删减免费完结_
  • 旅游结婚那天未婚夫另娶女秘书,我让他们一无所有连载_老公迎宾超长版_小说后续在线阅读_无删减免费完结_
  • 完结文异界修仙我的直播间能打赏核弹列表_完结文异界修仙我的直播间能打赏核弹(江流年沈红菱)
  • 全书浏览陪弟弟混骑行圈,离婚你哭什么?(韩星河柳千雪)_陪弟弟混骑行圈,离婚你哭什么?(韩星河柳千雪)全书结局
  • 老公出轨我助攻虐心反转_秦绍卿卿阿溪后续加长_小说后续在线阅读_无删减免费完结_
  • 替老婆坐牢出狱那天,我被送去斗兽场精校文本_许言沈宇郑子番茄热门_小说后续在线阅读_无删减免费完结_
  • 沐巍澜温溪:结局+番外(爱如一刹花火)电子书畅享阅读无广告
  • 傅凌川林柚续集(傅凌川林柚)章节前文+全书阅读(替嫁燃婚:小祖宗嘴硬腰软)最新连载
  • 资助生把导盲犬做成火锅后,我家杀疯了!列表_资助生把导盲犬做成火锅后,我家杀疯了!(陈米雪波波)
  • 沈瑾钰林沐橙豪门废妻浴火复仇续集(豪门废妻浴火复仇)章节在线阅读最近章节
  • 明明图分手费,我怎么就入赘了?(顾池柳如烟),明明图分手费,我怎么就入赘了?

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1