JS中的this指向

最新推荐文章于 2022-04-02 22:32:30 发布

山水猿

最新推荐文章于 2022-04-02 22:32:30 发布

阅读量269

点赞数 8

分类专栏：前端 javascript 文章标签： js javascript prototype html5 html

本文链接：https://blog.csdn.net/xiaobai1520774/article/details/104449967

版权

前端 javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

大家都知道，在面向对象编程中常常会用到this这个关键字。那么this代表什么，它的指向又是什么？下面就根据我所查阅到的一些资料和自己的理解说明一下js中的this指向问题。

this是什么？

this是在函数运行时，自动在函数内部生成的一个对象。随着函数的使用场景不同，this的值也会发生变化。但总的一个原则是this永远指向调用this所在的函数的对象。

this指向的4种情况

一、this指向事件的调用对象

<body>
    <button>输出</button>
<script>
    var btn = document.querySelector('button');
    function show(){
        console.log(this);
    }
    
    btn.onclick = show;
</script>
</body>

当我们点击页面上的输出按钮后，可以看到在控制台打印的是button这个按钮。这里可以说明，事件处理函数中的this指向的是绑定事件的那个对象。

二、this指向函数的调用对象。如果找不到调用对象，this指向widow

   <script>
        var obj = {
            say:function(){
                console.log(this);
            }
        }
        obj.say();
    </script>

<body>
    <button>输出</button>
<script>
    var btn = document.querySelector('button');
    function show(){
        console.log(this);
    }
    
    show();
    btn.onclick = function(){
        show();
    }
</script>
</body>

第一个实例中，obj.say()打印的是obj{}这个对象。所以say()在这种情况下say()中的this指向的是调用say的这个对象obj。
第二个示例，当我们进入页面，可以看到show()执行，打印的是window对象。当我们点击输出按钮时，打印的也是window对象。在这里，show()的实质是window.show()，只是show前面的Window可以省略。所以，this指向的是window，实质上也仍然是say()的调用对象。

三、this指向bind call apply传入的对象

<script>
    var name = '小红'
    var person1 = {
        name:'东东',
    }
    function show(){
        console.log(this.name);
    }
    show();//小红
    show.apply(person1);//东东
    show.call(person1);//东东
    show.bind(person1)();//东东
</script>

上面示例中，先声明了一个全面变量name：小红，然后又声明了一个person1的对象，这个对象里面也有name这个属性，值为东东。
当show（）执行时，根据我们第二点的描述show()直接调用，show（）里面的this对象指向window。所以打印了window对象中的小红。
然而apply()、call()、bind()这3个方法，会改变前面show()的this指向（指向传入的对象）。所以当show执行时，他们会打印person1对象中的东东。
注：apply()、call()，会改变前面对象的this指向并执行前面的方法。所以show.apply(person1)、show.call(person1)在改变完this指向后执行改变了this指向的show方法，所以打印东东。这两个方法都是能够改变this指向并执行函数。唯一区别是call后面传参数（eg: show.call(person1,pre1,pre2）用,隔开参数。apply则是以数组的方式传参（eg:show.apply(person1,[pre1,pre2]））
bind()方法会改变前面函数的this指向，并返回一个改变了this指向的新函数。所以show.bind(person1)只是改变了指向而已，需要show.bind(person1)()后面再接一个括号才执行改变了this指向的show方法。

四、构造函数和原型方法中的this指向实例对象

<script>
    function Dog(){
        console.log(this);
    }
    Dog();//window;
    var dog1 = new Dog();//Dog{}
    Dog.prototype.say = function(){//给Dog原型对象添加say方法
        console.log(this);
    }
    
    dog1.say();//Dog{}
</script>

这个例子中，Dog（）这样调用，符合我们第二点中找不到函数的调用对象，所以Dog中的this指向window对象。
然后后面的通过new操作符调用，打印的是Dog{}。证明：函数通过new操作符调用后，函数里面的this指向new出来的这个对象。
最后dog1.say()，打印的也是Dog{}这个对象。证明：添加在原型上的方法中的this也指向new出来的实例对象。