JavaScript中关于this的指向

annschan

已于 2022-01-19 20:01:26 修改

阅读量398

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2022-01-19 19:58:07 首次发布

本文链接：https://blog.csdn.net/m0_62407740/article/details/122588321

版权

一、全局中的this，

浏览器环境下，this指向window。

console.log(this);//window

二、普通函数中的this

1.严格模式下，普通函数中的this，是undefined。

 'use strict'
       function foo(){
          function bar(){
              console.log(this);//undefined
          }
          bar();
       }
       foo();

2.非严格模式下，全局中的普通函数以及函数内的普通函数，this均指window。

 function foo() {
     function bar() {
          console.log(this);//window
           }
            bar();
        }
    foo();

三、对象中的this

指向的是调用该方法的对象，即对象本身。

let student={
          say(){
               console.log(this);//Object
            }
        }
 student.say();

四、事件方法中的this。

始终指向绑定该事件的事件源。

此处this与event.target区别：event.target指的是触发事件的元素。

<body>
    <div class="box">
        <div class="child"></div>
    </div>
    <button id="btn">按我</button>
    <script>
        document.querySelector(".box").addEventListener('click',function(e){
            console.log('this',this);//box
            console.log('e.target',e.target);//触发元素
        })
        document.querySelector("#btn").addEventListener('click',function(){
            console.log(this); //btn
        })
    </script>
</body>

五、箭头函数中的this。

箭头函数无this，如果要在箭头函数中找this，this指向其所在的父级函数的this。

 let obj = {
             foo() {
                 return () => {
                    console.log(this);//{foo: ƒ}
                }
            }
        }
obj.foo()()

六、构造函数中的this

构造函数中的this，始终指向的是new出来的实例对象。

 function Teacher(name, age, lesson) {
            console.log('teacher', this);//Teacher{ }
            this.name = name;
            this.age = age;
            this.lession = lesson;
   }
       
 let t1 = new Teacher("ann", 23, "JS");

annschan

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中关于this的指向

一、全局中的this，浏览器环境下，this指向window。console.log(this);//window二、普通函数中的this1.严格模式下，普通函数中的this，是undefined。 'use strict' function foo(){ function bar(){ console.log(this);//undefined } bar(); }
复制链接

扫一扫