js中this的指向

最新推荐文章于 2021-09-13 20:10:33 发布

理个以哈呦

最新推荐文章于 2021-09-13 20:10:33 发布

阅读量312

点赞数

分类专栏： js 文章标签：函数对象

js 专栏收录该内容

79 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>深入理解This</title>
</head>
<body>
    <script>
        //它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
        //随着函数使用场合的不同，this的值会发生变化。
        //但是有一个总的原则，那就是this指的是，调用函数的那个对象。
        //demo1
        function demo1(){
            var test1="zyn";
            console.log(this.test1);//undefined
            console.log(this);//window
        }
        //调用
        demo1();
        //解析:
        //就是this指的是，调用函数的那个对象。
        //demo1函数是被window调用的，所以this就指向了window
        //this.zyn输出undefined因为this指向了window，
        //在window下没有test1属性(函数内部可以访问函数外部变量，反之不可(闭包除外));
        //调用方式 demo1();等价于 window.demo1();

        //demo2
        //字面向量创建函数
        var parent={
            test2:"zyn",
            fun:function(){
                console.log(this.test2);//zyn
                console.log(this);//o
            }
        }
        //调用
        // parent.fun();
        //解析
        //就是this指的是，调用函数的那个对象。(既调用fun函数的对象)
        //上面 点 调用方式看出 fun函数是通过parent调用的，所以this指向了parent
        //在parent也就是this下面存在变量test2变量，所以将其输出


        //demo3
        var demo3={
            test3:"xx",
            fun:{
                de:'zyn',
                func:function(){
                    console.log(this.de);//zyn
                    console.log(this.test3);//undefined
                }
            }
        }
        //调用
        demo3.fun.func();
        //解析
        //就是this指的是，调用函数的那个对象。(既调用func函数的对象)
        //上面 点 调用方式看出 func函数是通过 demo3.fun调用的，所以this指向了fun
        //在fun也就是this下面存在变量de变量，所以将其输出
        //调用方式 demo3.fun.func();等价于 window.demo3.fun.func();


            //demo5
        var demo5={
            test3:"xx",
            fun:{
                de:'zyn',
                func:function(){
                    console.log(this.de);//undefined
                    console.log(this);//window
                }
            }
        }
        //调用
        var exe=demo5.fun.func;
        exe();
        //解析
        //demo5与demo4,不同之处在于调用函数的方式
        //demo5调用方式分为两步
        //var exe=demo5.fun.func; 将func函数的执行权利赋值给了exe变量，
        //注意 因为var exe 相当与  window.exe exe处在window的作用域下面
        //通过exe来执行，this的指向就变成了window
        //调用方式  exe();等价于 window.exe();



        //demo6
        //构造函数
        function demo6(){
            this.test6="zyn";
        }
        //调用
        var demo6Faild=new demo6();
        console.log(demo6Faild.test6);//zyn
        //解析
        //因为用了new关键字就是创建一个对象实例
        //并且将对象实例赋值给demo6Faild，所以this指向了demo6Faild(相当于demo6)
        //在demo6和demo6Faild也就是this下面存在变量test6变量，所以输出zyn



                //demo7
        function demo7(){
            this.test7="zyn";
            return {};
        }
        var de6=new demo7();
        console.log(de6.test7);//undefined
        function demo7(){
            this.test7="zyn";
            return function() {};
        }
        console.log(de6.test7);//undefined

        function demo7(){
            this.test7="zyn";
            return 1;
        }
        console.log(de6.test7);//zyn

        function demo7(){
            this.test7="zyn";
            return undefined;
        }
        console.log(de6.test7);//zyn


        function demo7(){
            this.test7="zyn";
            return null;
        }
        console.log(de6.test7);//zyn
        //解析
        //如果返回值是一个对象，那么this指向的就是那个返回的对象，
        // 如果返回值不是一个对象那么this还是指向函数的实例。
    </script>
</body>
</html>