前端学习(六)----js中的this指针问题（必看）

小天才阿展

已于 2022-04-05 16:09:08 修改

阅读量672

点赞数

文章标签：前端 javascript html5 es6

于 2022-03-30 18:42:20 首次发布

本文链接：https://blog.csdn.net/m0_63057828/article/details/123853680

版权

es5中this指向函数的对象

es6中this指向调用函数位置的上下文

自定义函数this指向window

在对象里的立即指向函数this同样指向window

    <script>
        var a = 0;

        function foo() {
            console.log(this);//window注意this是函数执行时的this
        }
        var obj = {
            a: 2,
            foo: foo
        }

        //obj.foo()  -->obj此时是obj调用函数指向obj

        var bar = obj.foo;
        bar()//此处相当于独立调用
    </script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="d1">jhjhjhj</div>
    <script>
        var obj = {
            print: function() {
                    console.log(this)
                } //es5 this指向函数所在对象 输出obj
        }
        obj.print()

        var obj = {
            print: function() {
                return function() {
                    console.log(this)
                }
            }
        }
        obj.print()() //obj的函数返回整个函数本身再调用这个函数输出window


        var obj1 = {
            demo: function() {
                var p = () => {
                    console.log(this)
                }
                p()
            }
        }
        obj1.demo() //es6的this指向调用函数位置的上下文 p（）在obj1内返回obj1

        var obj = {
            name: 'Azhan',
            func: function() {
                var that = this; //obj
                console.log(this.name); //es5this指向函数所在对象 故返回Azhan
                console.log(that.name); //that = this 同样返回Azhan
                (function() {
                    console.log(this) //此函数是键为fun函数内定义的函数 并自己调用 自己定义自己运行es5中一定指向window或这个function无键与其对应所以指向window
                    console.log(this.iiii) //其作用域上一层定义域中均无iiii所以返回undefined
                    console.log(that.name) //返回上一层定义域中的Azhan 此处that为obj
                    console.log(this.name) //输出空 此处this为window
                })()
            }
        }
        obj.func()


        var name = 'Azhan';

        function demo() {
            let name = 'zhou';
            let other = {
                name: 'an',
                fn: () => {
                    var name = 'zhan';
                    console.log(this.name)
                }
            }
            return other
        }
        demo().fn()
            //demo()返还一个other类其中es6的this指向调用函数的上下文 即为window 所以返回Azhan

        function foo(something) {
            this.a = something
        }
        var obj1 = {};
        var fn1 = foo.bind(obj1);
        fn1(2)
        var fn2 = new fn1(3);
        console.log(obj1)
        console.log(obj1.a) //2
        console.log(fn2.a) //3

        //监听器中的this
        var d1 = document.getElementById('d1');
        d1.addEventListener('click', function() {
            console.log(this) //es5中this指向调用函数的对象obj
        })
        d1.addEventListener('click', () => {
            console.log(this) //window 指向调用函数所在的上下文
        })
    </script>
</body>

</html>

阿里this面试题

    <script>
        var name = 222;
        var a = {
            name: 111,
            say: function() {
                console.log(this.name);
            },
        };

        var fun = a.say;
        fun(); //222   fun.call(window)
        a.say(); //111  a.say.call(a)

        var b = {
            name: 333,
            say: function(fun) {
                fun();
            },
        };

        b.say(a.say); //222
        b.say = a.say;
        b.say(); //333
    </script>