Acticle 22:从指向（this）看JavaScript之一：this的几种基本指向

最新推荐文章于 2024-07-30 10:56:44 发布

颜洁

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量363

点赞数

分类专栏： js面向对象大杂烩文章标签： javascript

本文链接：https://blog.csdn.net/amytun_yu/article/details/76026430

版权

js面向对象大杂烩专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>this运用</title>
        <script type="text/javascript">

                //js 的指向：即目标方向、所对的方位
                /*

                 * this是什么？其实它本身是一种指向。
                 * this指向可以分为以下几种情况
                 * !！普通调用，this指向调用者
                 * !!call/apply 调用，this指向当前thisArg参数
                 * !!箭头函数，this指向为当前函数的this指向
                 * 
                 * */


                //1.普通调用
                //通俗的讲：就是谁调用，则this便指向谁。
                //这里又大致分为几种情况
                /*

                 * 1.1对象方法的调用
                 * 即某方法为某对象上的一个属性的属性，正常情况当该方法被调用的时候，this的指向则是挂载该方法的对象。
                 * 
                 * */


                var obj = {
                    a:'this is obj',
                    test:function(){
                        console.log(this.a);
                    }
                }

                obj.test();
                //打印出 this is obj

                /*

                 * 1.2“单纯” 函数调用
                 * 即该函数为自己独立的函数，而不是挂载到对象上的属性（window除外），也不会被当成构造函数来使用，而仅仅是当函数来使用，此时的this指向则是window对象。
                 * */

                var a = "this is window";
                function test(){
                    console.log(this.a);
                }
                test();//打印出this is window

                //上面的代码等同于
                window.a = 'this a window';
                window.test = function test(){
                    console.log(this.a);
                    //此时是window为调用者，即this会指向window
                }
                window.test();


                /*

                 * 1.3 构造函数调用
                 * 即该函数被当成构造函数来调用，此时的this指向该构造函数的实例对象。我们来看一个例子，属于第二种情况的例子
                 * 
                 * */

                function test(){
                    this.a = 'this a test001';
                    console.log(this.a);
                    console.log(this);
                }

                test();

                //分别打印出：
                //this is test001
                //Window {}
                //此时的this的确指向window对象 ，但是换种形式，将其换成构造函数来调用，结果会如何

                function Test(){
                    this.a = 'this is test002';
                    console.log(this.a);
                    console.log(this);
                }
                var test2 = new Test();
                //分别打印出：
                //this is test002 
                //Test{a:'this is test002'}
                //此时的this的确指向了该构造函数的实例对象


        </script>
    </head>
    <body>
    </body>
</html>

运行结果如图片所示：
这里写图片描述

文章参照于：https://zhuanlan.zhihu.com/p/28058983?ref=myread

后面的会持续更新。。O(∩_∩)O哈哈哈~

颜洁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Acticle 22:从指向（this）看JavaScript之一：this的几种基本指向

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>this运用</title> <script type="text/javascript"> //js 的指向：即目标方向、所对的方位 /*
复制链接

扫一扫

专栏目录