js this指向

快来打我* 2021-08-27 12:15 486阅读 0赞

this调用方法

1.作为普通函数调用

2.用apply call bind

3.作为对象方法被调用

5.在class方法中调用

6.箭头函数

<html>
    
    <head>
        <title>this作用域</title>
        <meta charset="utf-8">
        <style>
    
        </style>
    </head>
    
    <body>
        this调用方法<br>
        1.作为普通函数调用<br>
        2.用apply call bind<br>
        3.作为对象方法被调用<br>
        5.在calss方法中调用<br>
        6.箭头函数<br>
    
        <p>this取值是函数执行时确定而不是定义时确定</p>
    
    </body>
    
    </html>
    <script src="../js/jquery.min.js"></script>
    <script>
        //作为普通函数调用
        let b = 22
        function fn1() {
            let a = 11;
            console.log(this) //window
        }
        fn1();
    
        //call apply bind 可以改变this指向
        fn1.call({ x: 10 }) //x:10
        fn1.apply({ x: 20 }) //x:20
        const fn2 = fn1.bind({ y: 300 })
        fn2(); //y:300
    
        //作为对象
        const zhangsan = {
            name: "张三",
            sayHi() {
                //this 当前对象
                console.log(this)
            },
            wait() {
                setTimeout(function () {
                    //加上setTimeout 就是普通函数 指window
                    console.log(this)
                })
            },
            eat() {
                setTimeout(() => {
                    //箭头函数取他上级作用域的this
                    console.log(this)
                }, 1);
            }
    
        }
        zhangsan.sayHi() //当前 zhangsan 对象
        zhangsan.wait();//window (是 setTimeOut()函数触发的执行 不是zhangsan.)
        zhangsan.eat();//当前 zhangsan 对象
    
        //class 
        class Pepple {
            constructor(name) {
                //this当前实例
                this.name = name
            }
            sayHi() {
                console.log(this)
            }
        }
        let peo = new Pepple('wangwu')
        peo.sayHi();//当前实例
    
    
    </script>

箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有以下几点差异：

1、函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

2、不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

3、不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

4、不可以使用 new 命令，因为：

*  没有自己的 this，无法调用 call，apply。
 *  没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 \_\_proto\_\_