函数中的this

函数的this

        <script>
            /*  
            this
                - 函数在执行时，JS解析器每次都会传递进一个隐含的参数
                - 这个参数就叫做 this
                - this会指向一个对象
                    - this所指向的对象会根据函数调用方式的不同而不同
                        1.以函数形式调用时，this指向的是window
                        2.以方法的形式调用时，this指向的是调用方法的对象
                        ...

                - 通过this可以在方法中引用调用方法的对象

                
        */

            function fn() {
                // console.log(this === window)
                console.log("fn打印", this)
            }

            const obj = { name: "孙悟空" }
            obj.test = fn

            const obj2 = { name: "猪八戒", test: fn }

            // fn()
            // window.fn()
            // obj.test() // {name:"孙悟空"}
            // obj2.test() // {name:"猪八戒", test:fn}

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

            // 为两个对象添加一个方法，可以打印自己的名字
            obj3.sayHello()
            obj4.sayHello()
        </script>

箭头函数的this

        <script>
            /* 
            箭头函数：
                ([参数]) => 返回值

            例子：
                无参箭头函数：() => 返回值
                一个参数的：a => 返回值
                多个参数的：(a, b) => 返回值

                只有一个语句的函数：() => 返回值
                只返回一个对象的函数：() => ({...})
                有多行语句的函数：() => {
                    ....    
                    return 返回值
                }

            箭头函数没有自己的this，它的this有外层作用域决定
            箭头函数的this和它的调用方式无关
        */

            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) // window
                    }
                    t()

                    const t2 = () => {
                        console.log("t2 -->", this) // obj
                    }

                    t2()
                }
            }

            // obj.fn() // obj
            // obj.fn2() // window

            obj.sayHello()
        </script>