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

雨点打透心脏的1/2处 2021-11-16 11:52 164阅读 0赞

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

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

**　　（1）this指向window**

**（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

情况二：传入参数，那么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、总结**

<table style="width:567px;"> 
 <thead> 
  <tr> 
   <th>调用形式</th> 
   <th align="left">this指向</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>普通函数</td> 
   <td align="left">window</td> 
  </tr> 
  <tr> 
   <td>构造函数</td> 
   <td align="left">实例化后的对象</td> 
  </tr> 
  <tr> 
   <td>对象的方法</td> 
   <td align="left">该对象</td> 
  </tr> 
  <tr> 
   <td>DOM节点</td> 
   <td align="left">该节点对象</td> 
  </tr> 
  <tr> 
   <td>call或者apply</td> 
   <td align="left">第一个参数</td> 
  </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/xxm980617/p/10888264.html