函数中的this
1 普通函数的this
- 函数在执行时,JS解析器每次都会传递进一个隐含的参数,这个参数就叫做
this
- this会指向一个对象
- this所指向的对象会根据函数调用方式的不同而不同
-
1.以函数形式调用时,this指向的是window
-
2.以方法的形式调用时,this指向的是调用方法的对象
-
但实际上都是指向调用的对象,以函数方式调用的时候默认调用的对象是window
-
- this所指向的对象会根据函数调用方式的不同而不同
- 通过this可以在方法中引用调用方法的对象
function fn() {
// console.log(this === window)
console.log("fn打印", this)
}
fn() // 就相当于 window.fn()
const obj = { name: "孙悟空" }
obj.test = fn
obj.test()
案例:为两个对象添加一个方法,可以打印自己的名字
方法一:
const obj3 = {
name: "沙和尚",
sayHello: function () {
console.log(this.name)
},
}
const obj4 = {
name: "唐僧",
sayHello: function(){
console.log(this.name)
}
}
// 为两个对象添加一个方法,可以打印自己的名字
obj3.sayHello()
obj4.sayHello()
方法二:
const sayHello = function(){
console.log(this.name)
}
const obj3 = {
name: "沙和尚",
sayHello: sayHello
}
const obj4 = {
name: "唐僧",
sayHello: sayHello
}
// 为两个对象添加一个方法,可以打印自己的名字
obj3.sayHello()
obj4.sayHello()
2 箭头函数的this
箭头函数:([参数]) => 返回值
例子:
-
无参箭头函数:
() => 返回值
-
一个参数的:
a => 返回值
-
多个参数的:
(a, b) => 返回值
-
只有一个语句的函数:
() => 返回值
-
只返回一个对象的函数:
() => ({...})
-
有多行语句的函数:
() => { .... return 返回值 }
箭头函数没有自己的this,它的this由外层作用域决定,箭头函数的this和它的调用方式无关,外面的this是谁,它就是,如果在最外层,那么它的this就是window
function fn() {
console.log("fn -->", this)
}
const fn2 = () => {
console.log("fn2 -->", this) // 总是window
}
fn() // window
fn2() // window
const obj = {
name:"孙悟空",
fn, // fn:fn的简写
fn2,
sayHello(){
console.log(this.name)
function t(){
console.log("t -->", this)
}
t() // window
const t2 = () => {
console.log("t2 -->", this)
}
t2() // obj
}
}
obj.fn() // obj
obj.fn2() // window
obj.sayHello()//