新浪博客

JS基础知识整理-------this的指向问题

2023-05-22 10:25阅读:
首先要知道,什么是this? 在函数执行时,JS解析器每次都会传递进一个隐含参数,这个参数就叫this.
this会指向一个对象,this所指向的对象会根据函数调用方式的不同而不同
以函数的形式调用时,this指向的是window
以方法的形式调用时,this指向的是调用方法的对象
通过this可以在方法中引用调用方法的对象
console.log(this) // 指向window
function fn() {
console.log(this)
}
fn() // 指向window fn() ==== window.fn()
const obj = {name:'测试'}
obj.test = fn
obj.test() // 指向obj
const obj1 = {
name: '小呆',
sayHello:function(){
console.log(this)
}
}
obj1.sayHello() // 指向obj1

下面说说箭头函数中的this问题
这个比较特殊,因为箭头函数没有自己的this,它的this由外层的作用域决定
function fn() {
console.log(this)
}
const fn2 = () => {
console.log(this)
}
fn() // 指向window
fn2() // 指向window
const obj = {
name: '测试',
fn:fn, // 指向obj
fn2:fn2, // 指向window
sayHello(){
console.log(this) // 指向obj
function subFn(){
console.log(this)
}
subFn() // 指向window
const subFn1 = () => {
console.log(this)
}
subFn1() // 指向obj
}
}
obj.fn() // 指向obj
obj.fn2() // 指向window
obj.sayHello()
下面是一个箭头函数的例题:
var name = '小呆'
function fn(val){
setTimeout(()=>{
console.log(this.name)
},500)
}
fn({name:'小瓜'})
// 这里要说一下,fn({name:'小瓜'}) ,虽然加了传参,但是,箭头函数,
是没有this的,由它的外层作用域决定,所以,fn({name:'小瓜'}),
最后打印的name,是小呆。
// 如果,想打印,传参的name:小瓜,可以使用call,apply,bind
fn.call({name:'小瓜'}) // 这里打印的就是小瓜了

我的更多文章

下载客户端阅读体验更佳

APP专享