javascript对象---7 Function函数 this指针

时间 2019-11-15

标签 javascript 对象 function 函数指针栏目 JavaScript 繁體版

原文原文链接

this指针：this在js中很是灵活，通常在代码运行时基于函数的运行环境绑定的，大体分5钟状况windows

1. 全局环境中 this 表明全局环境（Window 对象）；浏览器

不包含在任何function以内就是全局环境，dom

2.在普通函数或对象中， this表明运行环境对应的对象( 能够理解为调用者)；this

var obj = {
              win : this
           }
           debuggerspa

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

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

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

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>