JS面向对象之this

JS面向对象之this

1、this说明

    在js中提供了this。this的中文意思是这，用来指向一个对象。比如说这函数对象，这个window对象，这个obj等等。在js中，因为一些原因，我们需要指向一个对象，例如，使用全局变量给几个按钮绑定单击事件，但按钮的单击事件函数是一个回调函数，当按钮单击后事件才发生，此时的变量已经变化完毕，按钮[i]既是undefined值，是会报错的，因此，我们就需要用this来指向那个单击事件发生时绑定单击事件的按钮对象，下面是代码

在这段代码中，我获取了所有的button按钮，然后分别给他们安装了单击事件，因为全局变量i在按钮绑定的回调事件发生之前已经走到了最大值，所以无法给按钮成功绑定上单击事件，所以需要用到this，指向的就是那个绑定单击事件的那个对象
var btns = document.querySelectorAll('button')

for (var i = 0; i < btns.length; i++) {
            
            btns[i].onclick=function(){

                for (var j = 0; j < btns.length; j++) {
                    btns[j].style.color = ""
                    btns[j].style.backgroundColor = ""
                }

                this.style.color = "red"
                this.style.backgroundColor = "green"
            }
        }

2、this的具体指向

   1、在全局作用域中，this指向window对象，window对象是顶级对象，document也是它的孩子。
   2、在普通方法中，this也指向window对象
   3、对象调用方法时，this指向的就是那个调用方法的对象，在下面我会进行举例
   
    1、全局作用域
        console.log(this);
   
    2、普通函数使用
        function fun() {
            console.log(this);
        }
        fun()
        
    以上输出的都是window对象
    
     3、对象调用方法,this就指向这个对象
        
        var btn = document.querySelector('button')
      
        btn.onclick = function () {

            console.log(this);
        }
      这里的this就是btn这个按钮对象，因为是按钮对象在调用这个单击方法。
      
      4、对象调用方法
      var a=5
        
        function fun() {

            console.log(this.a);

        }
    //   对象调用方法，this就指向这个对象
       

        var obj = {
            a:2,
            fun: function(){
                fun()
            }
        }

        // 对象.属性值:  obj.属性
        // 对象方法的使用:obj.fun()
        
        obj.fun()

   在这里使用obj去调用fun方法，这个this同样的指向的是obj

3、this的一些规则

   为了大家更好的认识到this。会提供一些规则来认识到在运行环境中，this到底指向谁，也会认识到我们可以通过这个this对那个指向对象进行属性的读写操作。

1、圆括号直接调用对象，该对象指向window   
2、对象打点调用函数，上下是对象是对象     对象.方法名
3、从数组中枚举出函数圆括号运行，this是数组  数组[index]()
4、延时器、定时器调用的函数this指向window
5、事件监听，this是绑定监听的这个元素。
6、补充：不端在规则里面，但应该了解
   函数的apply方法和call方法指向
   函数.call()、函数.call():是在执行函数
   但如果在括号里面传入对象，那么就可以将对象作为执行传给函数，     this就指向该对象
再补充（call和apply的区别）
   ps：当函数有参数需要进行传递的时候，call方法可以直接写入参数，但apply方法必须是把参数写成数组的形式

//规则1
       //  函数被定义在obj里面
        // 通过变量获得直接用变量调用，指向的是window
        var obj = {
   
            a: 6,
            fun: function () {
   
                console.log(this.a);
            }
        }

        var a=3

        var f=obj.fun
        
        f() 

//规则2
   
//  对象打点调用函数，this指向这个对象
         var obj = {
   
            a: 6,
            fun: function () {
   
                console.log(this.a);
            }
        }

        var a=3

    
        obj.fun()

//规则3
  var arr=[3,4,5,8,9,fn]
        function fn(){
   
            console.log(this[0]);

        }

        arr[5]()

//规则4
  setInterval(function(){
   
            console.log(this);
         },2000) var obj = {
   
            a: 3,
            fun: function () {
   
                setTimeout(function () {
   
                    console.log(this.a);
                }, 2000)
            }
        }
        var  a=5
        obj.fun()

//结果是5，因为延时器方法指向的this是window

//规则5
   var btn = document.querySelector('button')
        // 回头再调用的函数
        
        btn.onclick = function () {
   

            console.log(this);
        }

//补充
   function fun() {
   

          alert(this);
        // console.log(fun);

        }


        // 调用函数对象的call方法
        // fun.call()

    

        // fun.apply()
        // 都是让函数执行


        // 改变this指向，传入的是哪个对象，这个对象就会成为函数执行时的this
        // var obj = {}

        // 正则对象，对象，日期对象、数组对象都可以
  


        fun.apply()

//call和apply的区别
  var  a=5
        var obj={