JavaScript函数中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()
1
2
3
4
5
6
7
8
9

案例：为两个对象添加一个方法，可以打印自己的名字

方法一：

const obj3 = {
    name: "沙和尚",
    sayHello: function () {
        console.log(this.name)
    },
}
const obj4 = { 
    name: "唐僧",
    sayHello: function(){
        console.log(this.name)
    }
}

// 为两个对象添加一个方法，可以打印自己的名字
obj3.sayHello()
obj4.sayHello()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

方法二：

const sayHello = function(){
    console.log(this.name)
}

const obj3 = {
    name: "沙和尚",
    sayHello: sayHello
}
const obj4 = { 
    name: "唐僧",
    sayHello: sayHello
}

// 为两个对象添加一个方法，可以打印自己的名字
obj3.sayHello()
obj4.sayHello()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2 箭头函数的this

箭头函数：([参数]) => 返回值

例子：

• 无参箭头函数：() => 返回值

• 一个参数的：a => 返回值

• 多个参数的：(a, b) => 返回值

• 只有一个语句的函数：() => 返回值

• 只返回一个对象的函数：() => ({...})

• 有多行语句的函数：

  () => {
  	....    
  	return 返回值
  }
  1
  2
  3
  4

箭头函数没有自己的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()// 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34