前端经典面试题 | this相关问题
创始人
2024-01-17 23:28:58

🖥️ 前端经典面试题专栏:this相关问题
🧑‍💼 个人简介:一个不甘平庸的平凡人🍬

✨ 个人主页:CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️


目录

一、回答点

二、深入回答

this的优先级

特殊this指向

        1 ) 箭头函数:

        2 ) 数组方法

        3 ) 立即执行函数

        4 ) 定时器


一、回答点

this的指向 优先级 特殊this指向 ...

this的绑定规则有哪几种? 默认绑定、隐式绑定、显式绑定、new绑定

默认绑定:独⽴函数调⽤,函数没有被绑定到某个对象上进⾏调⽤

隐式绑定:通过某个对象发起的函数调⽤,在调⽤对象内部有⼀个对函数的引⽤

显式绑定(apply/call/bind):明确this指向的对象,第⼀个参数相同并要求传⼊⼀个对象

new绑定:

        1) 创建⼀个全新对象

        2 ) 新对象被执⾏prototype链接

        3 ) 新对象绑定到函数调⽤的this

        4 ) 如果函数没有返回其他对象,表达式会返回这个对象

二、深入回答

this的优先级

        new 绑定 > 显示绑定 > 隐式绑定 > 默认绑定

特殊this指向

        1 ) 箭头函数:

                箭头函数会根据其声明的地方来决定 this

const fo = {fn:function(){setTimeout(function) {console.log(this)}}
}
console.log(fo.fn())
// window

        this出现在定时器中的回调函数内,因此this指向window对象.如果需要this指向fo这个对象,可以用箭头函数

const fo = {fn:function() {settimeout(()=>{console.log(this)})}
}
console.log(fo.fn())
// {fn:f}

需要注意:箭头函数的this绑定是无法通过call apply bind方法修改.因为箭头函数没有构造函数constructor,所以也不可以使用new进行调用,不能作为构造函数.

        2 ) 数组方法

在属性arr的forEach回调函数中的this 指向什么?

var obj = {arr:[1]
}
obj.arr.forEach(function(){console.log(this)
})
// forEach方法如下:
Array.forEach(function(currentVal,index,arr),thisVal)
// currentVal => 当前元素,必选
// index => 索引值,可选
// arr => 当前元素所属数组对象,可选
// thisVal => 传递给函数的值 一般用this值,如果为空 会把undefined传递给this值.

        输出:全局对象

                这里可以看出来,只传递了一个值,第二个值未传递,默认为undefined,所以输出 全局对象

        除了forEach方法外,还有其他的方法函数需要传递,可以查看Mdn文档.

        3 ) 立即执行函数

立即执行函数 => 定义后立即调用的函数 为 立即执行函数

var name = "coderhing"
var obj = {name:"coder",sayHello:function(){console.log(this.name)},hello:function(){(function(ch) {ch()})(this.sayHello)}
}
obj.hello()
// 输出 coderhing

        输出为coderhing,是window.name的值.立即执行函数是匿名函数,可以直接调用,而不是通过属性访问(obj.fn)的形式来给它指定一个对象,所以它的this是确定的,就是默认的全局对象window

        4 ) 定时器

setTimeout和setInterval中函数的this指向规则是一样的

var name = "coderhing"
var obj = {name:"coder",hello:function(){setTimeout(function() {console.log(this.name)})}
}
obj.hello()
// 输出 coderhing

this.name是在obj.hello()被调用的,结果输出 window.name , 定时器 都是在全局作用域下实现的.

无论是setTimeout和setInterval里传入的函数,都会首先被交到全局对象手里.因此,函数中的this值 指向 window.

相关内容

热门资讯

埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
苁蓉的食用方法 鲜苁蓉的吃法有... 肉苁蓉号称“温而不热,补而不峻,暖而不燥,滑而不泄,故有从容之名。”历来也是传统药食同源的滋补佳品。...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
脚上的穴位图 脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用,包括头部穴位图、胸部穴位图、背部穴位图、胳...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
阳澄湖在哪里哪个省的 阳澄湖是... 点击题目下方苏州生活指南有用 有趣 有态度近期的阳澄湖度很高,3月24日,央视二套《第一时间》直播连...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...