前端面试题之对this的理解

简介: 前端面试题之对this的理解

this 是一个在运行时才进行绑定的引用,在不同的情况下它可能会被绑定不同的对象。


默认绑定 (指向window的情况) (函数调用模式 fn() )


默认情况下,this 会被绑定到全局对象上,比如在浏览器环境中就为window对象,在node.js环境下为global对象。

message = "Hello"; 
function test () { 
  console.log(this.message); 
}
test()  // "Hello"


隐式绑定 (谁调用, this指向谁) (方法调用模式 obj.fn() )


如果函数的调用是从对象上发起时,则该函数中的 this 会被自动隐式绑定为对象:

function test() {
    console.log(this.message); 
}
let obj = {
  message: "hello,海海,
  test: test
}
obj.test()  //  "hello,海海"


显式绑定 (又叫做硬绑定) (上下文调用模式, 想让this指向谁, this就指向谁)


硬绑定 => call apply bind


可以显式的进行绑定:

function test() {
    console.log(this.message); 
}
let obj1 = {
  message: "你好海海"
}
let obj2 = {
  message: "你好呀海海"
}
test.bind(obj1)()  //  "你好海海"
test.bind(obj2)()  //  "你好呀海海"
————————————————
版权声明:本文为CSDN博主「海海呐」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_56344602/article/details/120555942


new 绑定 (构造函数模式)


另外,在使用 new 创建对象时也会进行 this 绑定


当使用 new 调用构造函数时,会创建一个新的对象并将该对象绑定到构造函数的 this 上:

function Greeting(message) {
    this.message = message;
}
var obj = new Greeting("hello,海海")
obj.message // "hello,海海"
相关文章
|
2月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
6天前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
2月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
2月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
37 2
|
2月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
29 0
|
2月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
2月前
|
存储 JavaScript 前端开发
|
2月前
|
Web App开发 存储 缓存
|
2月前
|
前端开发 容器
前端面试热门问题--浮动和清除浮动(CSS)
前端面试热门问题--浮动和清除浮动(CSS)
|
3月前
|
缓存 前端开发 JavaScript
高级前端常见的面试题?
【7月更文挑战第11天】 **高级前端面试聚焦候选人的技术深度、项目实战、问题解决及技术趋势洞察。涉及React/Vue生命周期、Redux/Vuex状态管理、Webpack优化、HTTP/HTTPS安全、性能提升策略、PWA、GraphQL、WebAssembly、安全性议题及项目管理。通过回答,展现候选人技术广度与应对复杂场景的能力。**
71 1
下一篇
无影云桌面