文章目录

• 函数中的this
• • 1 普通函数的this
  • 2 箭头函数的this

函数中的this

1 普通函数的this

• 函数在执行时，JS解析器每次都会传递进一个隐含的参数，这个参数就叫做 this
• this会指向一个对象
  • this所指向的对象会根据函数调用方式的不同而不同

    • 1.以函数形式调用时，this指向的是window

    • 2.以方法的形式调用时，this指向的是调用方法的对象

    • 但实际上都是指向调用的对象，以函数方式调用的时候默认调用的对象是window

• 通过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() // windowconst obj = {name:"孙悟空",fn, // fn:fn的简写fn2,sayHello(){console.log(this.name)function t(){console.log("t -->", this)}t() // windowconst t2 = () => {console.log("t2 -->", this)}t2() // obj}
}obj.fn() // obj
obj.fn2() // windowobj.sayHello()//