javascript对象---7 Function函数 this指针
javascript对象---7 Function函数 this指针
奋斗的小芋头 发表于1年前
javascript对象---7 Function函数 this指针
  • 发表于 1年前
  • 阅读 5
  • 收藏 1
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

this指针 :this在js中非常灵活,一般在代码运行时基于函数的运行环境绑定的,大致分5钟情况

1. 全局环境中 this 代表全局环境 (Window 对象);

不包含在任何function之内就是 全局环境,

<script>
        //在 Chrom浏览器中,在程序当中没有对this的 调用,那么在当前执行环境中,没有this指针
        //在function之外的 在调试台 查看this 直接获取window对象

             var that = this ;
        </script>

2.在普通函数或对象中, this代表运行环境对应的对象( 可以理解为调用者);

 var obj = {
                 win : this 
             }
             debugger

在调试台 查看 obj .win :window ------- this指window对象

查看调用者----obj的调用者为最外侧的 window对象

 var obj = {
                 win : this,
                 
                 sayHello :function(){
                     var that = this ;       //此时that指的是调用它的 Obj
                     debugger
                 }
             }
             obj.sayHello()

例2:

function outer(){
                var that = this;  // window对象
                debugger;
                inner();
                function inner(){
                    var that = this;  // window对象
                    debugger;
                }
            }
            outer();  //在 windows 层级调用outer() 所以 第一个that指 window对象
            //继续向下执行,调用inner 此时  第二个that 指的还是 window对象
            //在window环境下调用 outer(),在代码体执行情况下顺便调用 inner(),所以还是 window触发 
        //window 触发outer() ---》 outer()触发 inner(),整个执行的最终环境还是window对象

例3:

    function outer(){  //函数也是一个对象
            
        }
        
        //上一种创建方法中 outer()是无法访问 inner()
        //给函数对象outer扩展一个函数
        outer.inner=function(){
            var that = this;        //this指针指向 outer对象
            debugger;
        }
        outer.inner()

 

3.在普通匿名函数中, this代表 window 对象。

//匿名函数 1. 在一个小括号内定义   ,定义后函数存在在内存中,但无法通过名字调用函数--- 一般操作是定义后直接调用, 在预加载时检测不到,在运行时检测  ------创建后面加()调用

匿名函数执行完会清掉内存
        (function(){
            var that = this;  
//this 永远为window对象


        }) (); //调用

 

匿名函数的使用场景 :对于Js来说能区分作用域的只有function 

<script>

for(var i=0 ;i<3; i++) {      //这里 声明的 var i  为全局变量 ,全局变量在内存中不会被清除掉,只要网页不关闭,就会越执行越多,内存占用越来越多 ------
 

 }
     console.log(i);

</script>

>为了在程序执行后就将内存清除掉

1.执行后会弹栈等待垃圾回收 但 bb()作为全局变量仍会占内存

    function bb(){
            for(var i=0 ;i<3; i++) {
                
            }
        console.log(i);
        }

较好的解决方式 --用匿名函数解决


        (function(){
            for(var i=0 ;i<3; i++) {
                
            }
        })

alert( i ) ;---- i is not defined // 执行完已经清除

匿名函数的好处,可以替代不需要的全局变量,从而省略内存。匿名函数的 this 永远是 window

4.在构造函数中, this 代表当前调用构造函数创建的  对象  new出来的新对象

 

new Fun的执行过程

1.创建了一个空对象 obj

2.空对象的原型链(_proto_ )指向了函数对象prototype对象。

3.修改函数对象的this指针为新创建的对象引用  ---代表新创建对象的内存

4.执行函数体

在事件绑定事件处理函数时, this 代表触发事件的 dom对象

1.绑定方式1

function clickButton(){
            that = this;   //this = window对象
        }
        </script>
    </head>
    <body>
        <input type="button" value="aniniu" onclick="clickButton()">
    </body>

2.绑定事件2

    function clickButton(){
            that = this;  //this == input
            debuggers
        }
        </script>
    </head>
    <body>
        <input type="button" value="aniniu"  id= "but">
        <script>
            document.getElementById("but"). addEventListener ("click",clickButton())

//当前按钮对象绑定,所以 this是当前按钮对象。
        </script>
    </body>

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 79
码字总数 129412
×
奋斗的小芋头
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: