this 指向 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <style>
    </style>
</head>
<body>
    <div class="box">
        <button id="btn">click</button><br> 
        <button onclick="console.log(this)">clickthis</button><br> <!--  this指向button自身 -->
        <button onclick="(function(){console.log(this)})()">clickwindow</button><!--  this指向window -->
    </div>
    <script>
     
        // "use strict"
        function sayHi(){
            console.log(1111,this)
        }
        //sayHi()//独立函数 严格模式undefined 非严格模式window
        let user = {
            uname: 'John',
            sayHi()
            {
                console.log(this.uname)
            },
            sayHi2: ()=>
            {
                console.log(this.uname)
            },
            sayHi3(){
                function innerSayHi(){
                    console.log('inner',this.uname)
                }
                const innerSayHi2=()=>{
                    console.log('inner2',this.uname)
                }
                setTimeout(innerSayHi2,1000)
                setTimeout(()=>{
                    console.log('setTimeout2',this.uname)//this user john
                },1000)
                innerSayHi();//this window undefined
                //innerSayHi2();//this user john
            }
        }
        var aa=user.sayHi
        window.aa()//const aa=user.sayHi 报错  var aa=user.sayHi undefined 
        user.sayHi2() //箭头函数的this指向window undefined
        user.sayHi3();
        const btn=document.getElementById('btn');
        btn.onclick=function(){
            console.log(this,this.id) //btn
        }
        // btn.onclick=()=>{
        //     console.log(this,this.id) //window
        // }
        //call apply bind 显式改变this指向 new 隐性改变this指向  setTimeout 内普通函数 this指向window 箭头函数 this指向外部this
　　　　 // 普通函数this不是定义时确定的，是调用时确定的  箭头函数this需定义时确认的 继承外部作用域this 2、普通函数可以改变this 箭头函数不可以 3、普通函数有自己的this取决于调用方式 箭头函数没有自己this取决外部作用域this




        const students={
            names:['john','tom','lucy'],
            className:'三年级',
            showName(){
                // this.names.forEach(function(name){
                //     console.log(this.className,name)
                // },this)
                this.names.forEach((name)=>{
                    console.log(this.className,name)
                })
            }
        }
        students.showName()







　　




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




 







            

            
posted @ 
2026-04-24 10:45 
howhy 
阅读(3) 
评论(0) 
 
收藏 
举报