js(面试第2天)_谈谈对this的理解

1、说明：this对象在运行时基于函数的执行环境绑定的：在全局函数中，this等于window,当函数被作为某个对象的方法调用时，this等于那个对象，不过匿名函数的执行环境具有全局性，因此this通常指向window

 

2、下面是几种常见的情况

　　（1）this指向window

<script type="text/javascript">
//在全局变量中定义的函数this指向window
        var a = 123
        function test(){
            console.log(this)
        }
        test()//winndow
</script>

　　（2）在构造函数中this指向实例化对象

　　情况一：

  var a = 'window';
        function test(){
       
            alert(this.a);
        }
        test();  //window---------这里调用全局中的函数，自然是指向window

        var t = new test();  //---------这里是将test（）作为一个构造函数，
        alert(t.a);// undefined undefined 

　　情况二：

var a = 'window';
        function test(){
            this.a = a;   //window赋给当前构造函数的属性a
            alert(this.a);
        }
        test();  //window
        var t = new test();
        alert(t.a);//window window

　　（3）对象中的this就是指向当前对象，节点也是对象，

 var obj = {

             name:'xxm',
             age:18,
             sayHi:function(){
                 alert(this.name)
             }
         }
        obj.sayHi()//xxm --------this指向当前对象

　　（4）注意匿名函数的this对象指向window

 var name = "This window"
        var obj = {
            name:"my obj",
            getNameFun:function(){
                return function(){//这是匿名函数
                    return this.name
                }
            }
        }

        alert(obj.getNameFun()())//调用匿名函数---window

　  解决：

 var name = "This window"
        var obj = {
            name:"my obj",
            getNameFun:function(){
                var that = this
                return function(){//这是匿名函数
                    return that.name
                }
            }
        }

        alert(obj.getNameFun()())//调用匿名函数---window

 

　

（5）call()和apply()方法可以改变this的指向

　　情况一：apply和call方法中如果没有传入参数,或者是传入的是null,那么调用该方法的函数对象中的this就是默认的window

<script type="text/javascript">
         function f1(x,y) {
         console.log("结果是:"+(x+y)+this);
          return "10000";
        }
          f1(10,20);//函数的调用

          f1.apply(null,[100,200]);
          f1.call(null,100,200);
    </script>

 

　　情况二：传入参数，那么this就是当前传入的对象

function f1(x,y) {
     console.log("这个函数是window对象的一个方法:"+(x+y)+this.sex);
   }
   window.f1(10,20);//---------30 undefined
   //obj是一个对象
   var obj={
      age:10,
     sex:"男"
        
        };

    window.f1.apply(obj,[10,20]);// 30-男
    window.f1.call(obj,10,20);//30-男
    console.dir(obj);
    </script>

3、总结

调用形式	this指向
普通函数	window
构造函数	实例化后的对象
对象的方法	该对象
DOM节点	该节点对象
call或者apply	第一个参数