js中this指向问题

最新推荐文章于 2024-11-08 16:09:18 发布

A &......

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量72

点赞数

分类专栏： this指向问题01 文章标签： javascript

本文链接：https://blog.csdn.net/m0_47531829/article/details/116792544

版权

this指向问题01 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中this的四种常见指向：普通函数中的window、构造函数中的实例对象、对象方法中的当前对象以及事件处理程序中的事件源。通过示例代码展示了每种情况下的this用法，帮助理解this在不同上下文中的行为。

摘要由CSDN通过智能技术生成

在这里插入图片描述

总结一下this指向问题：总结一下从学习js基础和js-api阶段所遇到的js指向问题。简单的来记，就是谁调用this就指向谁；

<body>
    <button>点击我</button>
    <script>
        // 1.1普通函数中，this指向的就是window
        function fun1() { //函数的声明
            console.log(this);
        }
        fun1();
        var fun2 = function() { //函数表达式
            console.log(this);
        }
        fun2();


        // 1.2 在构造函数中，this指向的是实例化对象；
        function Person(name = 'zs', age = 18) {
            this.name = name;
            this.age = age;
            this.say = function() {
                console.log('我会说话');
            }
            console.log(this);   //Person {name: "zs", age: 18, say: ƒ}
        }
        var per1 = new Person(); //实例化对象
        per1.name = 'zq';
        per1.age = 23;
        per1.say();


        // 1.3 在对象函数中，this指向当前的对象
        var obj = {
            name: 'zs',
            age: 15,
            say: function() {
                console.log('说话');
                console.log(this);   //
            }

        }
        obj.say();



        // 1.4  事件函数中，this指向事件源；
        // 事件组成三要素：事件源；事件类型：事件的触发方式；实践处理程序；
        var btn = document.querySelector('button');
        btn.onclick = function() {
            console.log(1111);
            console.log(this); //<button>点击我</button>
        }
    </script>
</body>