严格模式下的this指向

之前写了一个，普通模式下的this指向，如果大家有不理解的可以看一看this的指向_刘依铭的博客-CSDN博客this的指向在不同的位置是不同的，但是，在学习过程中，this的指向问题一直是初学者的困扰，因为情况是多种多样的，通过短暂的记忆可能很快就忘却了，本篇文章将介绍一下如何理解着记忆，而不是'死记硬背'。1....https://blog.csdn.net/weixin_64105376/article/details/123279511?spm=1001.2014.3001.5501

本篇文章，为大家解释的是严格模式下的this指向。如果小伙伴们还没有学习react可以跳过引言部分，直接看正文部分

一、引言

我自己是为什么突然想起这个问题的哪？是因为我最近在学习react，我不理解为什么react类组件中的函数不可以用普通函数的写法，而是用箭头函数的方式，我们在各个网站上看到的大多是以下这种代码。

 class Da extends React.Component{
            a=()=>{
                console.log(this);
              //Da {props: {…}, context: {…}, refs: {…}, updater: {…}, a: ƒ, …}
            }
            render(){
				return(
					<div>
						<button onClick={this.a}></button>
						
					</div>
				)
			}
        }
  ReactDOM.render(<Da />,document.getElementById('root'))

但是你是否有认真的思考过为什么react中大多使用箭头函数吗？我先来告诉你们原因，就是因为this的指向问题，上面这段代码输出的this自然而然的我们都认为它指向的是Da组件的实例对象，事实也正是如此。但是我们再看下面这段代码。

<script type="text/babel">
         class Da extends React.Component{
            a(){
                console.log(this);

            }
            render(){
				return(
					<div>
						<button onClick={this.a}></button>
						
					</div>
				)
			}
        }
  ReactDOM.render(<Da />,document.getElementById('root'))
    </script>

这里面的输出this就是undefined，那这是为什么哪？接下来就引出我们本篇文章的主角了，因为在类中的函数默认帮我们开启了严格模式，所以按照严格模式下的规则，普通函数中的this指向的就是undefined，但是箭头函数就不一样了，箭头函数没有自己的指向，它所指向的是外层函数的this，也就是Da实例对象。

二、正文

1.在严格模式下，普通的this指向，指向的是window

 <script>
         'use strict'
        console.log(this);
 </script>
//Window {window: Window, self: Window, document: document, name: '', location: Location, …}

2.在严格模式下，函数中的this指向，指向的是undefined

  <script> 
 'use strict'
     
   function name(params) {
            console.log(this);
        }
   name()
</script>
//undefined

3.对象中的this，指向的实例出来的对象

 <script>
            'use strict'
     
        let a={
            name:'122',
            fn(){
                console.log(this);
            }
        }
       a.fn()
    </script>
//{name: '122', fn: ƒ}

4.构造函数中的this,指向的是实例出来的对象

 <script>
     'use strict'
         
    function name(a) {
           this.a=a
           console.log(this);
       }
       var p=new name(1)
</script>
//name {a: 1}

五、事件中的对象this，指向的是触发该事件的对象

  <div id="root" style="width: 100px;height: 100px;border: 1px solid pink;"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script>
       var root=document.querySelector('#root')
       root.onclick=function(){
           console.log(this);
       }
    </script>
//<div id="root" style="width: 100px;height: 100px;border: 1px solid pink;"></div>

六、定时器中的this，指向的是window

  <script>
        'use strict'
      setTimeout(function(){
        console.log(this);
      },1000)
    </script>
//Window {window: Window, self: Window, document: document, name: '', location: Location, …}

好啦，我要介绍的就是这么多，如果有错误或者缺漏的希望大家及时补充