JavaScript中this讲解

JavaScript中this讲解

在JavaScript中一般这样理解this：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。

1.普通函数调用 this 指向 window

<Script>
	 function person() {  // 函数也是window对象下面的 
         this.name = "xl";
         console.log(this);
         console.log(this.name);
       }

       person(); //输出  
       window.person();
       console.log(window.name);
</Script>

2. 作为方法来调用

在对象本身 this指向 本身

 var name="XL";// window
       var person={
             name:"xl",
            showName:function(){
                 console.log(this.name);//person
             }
         }
         person.showName();  //输出
       这里是person对象调用showName方法，很显然this关键字是指向person对象的，所以会输出name

         var personA={
             name:"xl",
            showName:function(){
                 console.log(this.name); //
             }
         }
         var personB={
           name:"XL",
            sayName:personA.showName // 没执行拿函数，执行拿结果
         }

         personB.sayName();  //输出 XL 1  xl 2
      //虽然showName方法是在personA这个对象中定义，
      // 但是调用的时候却是在personB这个对象中调用，因此this对象指向 personB

3.作为构造函数来调用

 function  Person(name){
           this.name=name;//this --->window   构造函数 在实例化中 this --->实例对象 personB
        }
        var personA=Person("xl"); // 给window对象 添加个属性 赋值为 x1

   		 console.log(Person.name); // 输出   undefined 2
 		   console.log(window.name);//输出    x1 2



      // //上面代码没有进行new操作，相当于window对象调用Person("xl")方法，
      // // 那么this指向window对象，并进行赋值操作window.name="xl".

       var personB = new Person("xl"); // 实例化 构造函数 得到实例对象
         console.log(personB.name);// 输出

       var personA = new Person("Xl"); 
         console.log(personA.name);// 输出

4函数作为数组的一个元素，通过数组下标调用的：this指向这个数组
（数组下标调用）

  var myname = "我是window的name";
 function myobj(){
     var myname = "发挥不广泛";
     console.log(this);
     console.log(this.myname);
     console.log(this[0].myname);//打印数组第0个元素myname属性
 }
 var myarr = [{myname:"我是myarr[0]的name"},myobj];//新建以数组对象
 myarr.myname = "我是myarr的name";//为数组对象添加myname属性
 myarr[1]();//数组下标方式调用函数

5call/apply方法的调用

call/apply方法最大的作用就是能改变this关键字的指向

 //对象冒充
         var obj = {
           name_1: ""
         }
         function a(){
           this.name_1 = "zhangsan";
           obj.name_1 = "zhangsan"
         }
        // // a();
        // //1 . this的作用域 对象  
        // //2 . 是给函数传参
         a.apply(obj);
         console.log(obj.name_1);
         console.log(window.name_1);

6谁触发事件 this就指向谁

  bt.onclick = function(){
          // this  --- > bt 
        }
        var name="XL";
        var Person={
            name:"xl",
            showName:function(){
                console.log(this.name);
            }
        }
        Person.showName.call(); 

      这里call方法里面的第一个参数为空，默认指向window。
      虽然showName方法定义在Person对象里面，但是使用call方法后，
        将showName方法里面的this指向了window。因此最后会输出"XL";
        function FruitA(n1,n2){
            this.n1=n1;
            this.n2=n2;
            this.change=function(x,y){
                this.n1=x;
                this.n2=y;
            }
        };

        var fruitA=new FruitA("cheery","banana");

        var FruitB={
            n1:"apple",
            n2:"orange"
        };

        fruitA.change.call(FruitB,"pear","peach");

        fruitA.change.apply(FruitB,["pear","peach"]);
      

        console.log(FruitB.n1); //输出 
        console.log(FruitB.n2);// 输出

7.Eval函数 该函数执行的时候，this绑定到当前作用域的对象上 eval函数时将普通字符当作js代码使用

    var name="XL";
         var person={
             name:"xl",
             showName:function(){
                 eval("console.log(this.name)");
            }
         }

        person.showName();  //    

        boxObj.onclick = function(){
              // this ---- >   boxObj
        }

         var a=person.showName;
         var a = function(){
                 this  -- >window
           eval("console.log(this.name)");
         }
        a();  //输出   XL

8箭头函数

 	  //es6里面this指向固定化，始终指向外部对象，因为箭头函数没有this,
      // 因此它自身不能进行new实例化,同时也不能使用call, apply, bind等方法来改变this的指向

         function Timer() {
             this.seconds = 0;
             setInterval( () => this.seconds ++, 1000);//this继承父级作用域
         }

         var timer = new Timer();

         setTimeout( () => console.log(timer.seconds), 3100);

       3
       在构造函数内部的setInterval()内的回调函数，this始终指向实例化的对象，
          并获取实例化对象的seconds的属性,每1s这个属性的值都会增加1。
          否则最后在3s后执行setTimeOut()函数执行后输出的是0