前端经典面试题 | this相关问题

简介: 前端经典面试题 | this相关问题

一、回答点

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.

相关文章
|
1月前
|
存储 前端开发 JavaScript
前端面试题23-34
通过对 Promise 和 ECMAScript6 的深入理解,可以更好地应对现代 JavaScript 开发中的复杂异步操作和新特性,提升代码质量和开发效率。
21 2
|
3天前
|
缓存 前端开发 JavaScript
高级前端常见的面试题?
【7月更文挑战第11天】 **高级前端面试聚焦候选人的技术深度、项目实战、问题解决及技术趋势洞察。涉及React/Vue生命周期、Redux/Vuex状态管理、Webpack优化、HTTP/HTTPS安全、性能提升策略、PWA、GraphQL、WebAssembly、安全性议题及项目管理。通过回答,展现候选人技术广度与应对复杂场景的能力。**
13 1
|
4天前
|
移动开发 前端开发 JavaScript
前端常见的面试题都有那些?
【7月更文挑战第10天】 前端面试涵盖HTML5新特性、CSS盒模型、JS事件传播、Vue的双向绑定、React生命周期、性能优化策略、浏览器解析流程及安全知识等。例如,HTML5新增video/audio元素、CSS选择器优先级计算、闭包功能、async/await处理异步、Vue通过Object.defineProperty实现数据绑定、React组件生命周期的关键阶段、前端优化如CDN和资源压缩,以及浏览器如何构建渲染树。面试还可能涉及XSS/CSRF防护和框架选择考量。准备面试需全面理解基础概念并结合实践经验。
8 0
|
28天前
|
存储 缓存 监控
2024春招小红书前端面试题分享
2024春招小红书前端面试题分享
53 3
|
1月前
|
前端开发 JavaScript 虚拟化
前端面试题12-22
ES6(ECMAScript 2015)是 JavaScript 的重要版本,引入了许多新特性和语法,提升了语言的功能和可用性。ES6 的主要特性包括箭头函数、类、模板字符串、解构赋值、默认参数、Promise、模块化、Generator 函数、async 函数、Proxy 和 Reflect 等。这些特性不仅简化了代码的编写和维护,还为开发者提供了更多的编程范式和工具。了解和掌握 ES6 的特性是现代 JavaScript 开发的必备技能。
12 1
|
13天前
|
JavaScript 前端开发
JS进阶篇(前端面试题整合)(三)
JS进阶篇(前端面试题整合)(三)
13 0
|
18天前
|
Web App开发 存储 前端开发
技术心得记录:前端面试题汇总
技术心得记录:前端面试题汇总
|
28天前
|
算法 前端开发 安全
面试官:前端加密怎么做?这,这,这不是后端的活儿吗?
前端加密技术概述: 前端加密主要用来保护数据在传输过程中的安全,但因浏览器环境开放性,仅能提供有限的安全性,真正安全策略需结合服务器端加密和安全协议。
|
18天前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
|
18天前
|
前端开发 安全 NoSQL
技术笔记:Security前端页面配置
技术笔记:Security前端页面配置