前端面试题之对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天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
54 5
|
2天前
|
设计模式 前端开发 算法
No210.精选前端面试题,享受每天的挑战和学习
No210.精选前端面试题,享受每天的挑战和学习
No210.精选前端面试题,享受每天的挑战和学习
|
2天前
|
消息中间件 缓存 前端开发
No209.精选前端面试题,享受每天的挑战和学习
No209.精选前端面试题,享受每天的挑战和学习
No209.精选前端面试题,享受每天的挑战和学习
|
2天前
|
前端开发 JavaScript Java
No208.精选前端面试题,享受每天的挑战和学习
No208.精选前端面试题,享受每天的挑战和学习
No208.精选前端面试题,享受每天的挑战和学习
|
2天前
|
前端开发 JavaScript
【Web 前端】说一下this指向?
【4月更文挑战第22天】【Web 前端】说一下this指向?
|
2天前
|
存储 缓存 监控
2024年春招小红书前端实习面试题分享
春招已经拉开帷幕啦! 春招的拉开,意味着新一轮的求职大战已经打响,希望每位求职者都能充分准备,以最佳的状态迎接挑战,找到心仪的工作,开启职业生涯的新篇章。祝愿每位求职者都能收获满满,前程似锦!
84 3
|
2天前
|
前端开发 数据可视化 安全
2024金三银四必看前端面试题!简答版精品!
2024金三银四必看前端面试题!2w字精品!简答版 金三银四黄金期来了 想要跳槽的小伙伴快来看啊
101 3
|
2天前
|
前端开发 JavaScript 网络架构
前端this指向详解
前端this指向详解
31 0
|
2天前
|
存储 前端开发 JavaScript
前端面试:如何实现并发请求数量控制?
前端面试:如何实现并发请求数量控制?
101 0
|
9月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
100 0