JavaScript中this的指向问题

最新推荐文章于 2022-10-28 20:52:56 发布

转载最新推荐文章于 2022-10-28 20:52:56 发布 · 217 阅读

本文详细解析了JavaScript中this关键字的不同应用场景及其指向的变化规律，包括纯函数、对象方法、构造函数、内部函数、call/apply调用及事件绑定等情况。

this是面向对象语言中一个重要的关键字，理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要。而javascript的this又有区别于Java、C#等纯面向对象的语言，这使得this更加扑朔迷离，让人迷惑。
this使用到的情况：

1. 纯函数
2. 对象方法调用
3. 使用new调用构造函数
4. 内部函数
5. 使用call / apply
6.事件绑定

1. 纯函数

var name = 'this is window';  //定义window的name属性 
function getName(){ 
       console.log(this);    //控制台输出: Window  //this指向的是全局对象--window对象 
       console.log(this.name);  //控制台输出: this is window  / 
} 
getName();

运行结果分析：纯函数中的this均指向了全局对象，即window。

2. 对象方法调用

var name = 'this is window';  //定义window的name属性,看this.name是否会调用到 
var testObj = { 
    name:'this is testObj', 
    getName:function(){ 
        console.log(this);  //控制台输出:testObj   //this指向的是testObj对象 
        console.log(this.name);  //控制台输出: this is testObj 
    } 
} 
testObj.getName();

运行结果分析：被调用方法中this均指向了调用该方法的对象。

3. 使用new调用构造函数

function getObj(){ 
    console.log(this);    //控制台输出: getObj{}  //this指向的新创建的getObj对象 
} 
new getObj();

运行结果分析：new 构造函数中的this指向新生成的对象。

4. 内部函数

var name = "this is window";  //定义window的name属性,看this.name是否会调用到 
var testObj = { 
    name : "this is testObj", 
    getName:function(){ 
        //var self = this;   //临时保存this对象 
        var handle = function(){ 
            console.log(this);   //控制台输出: Window  //this指向的是全局对象--window对象 
            console.log(this.name);  //控制台输出: this is window   
            //console.log(self);  //这样可以获取到的this即指向testObj对象 
        } 
        handle(); 
    } 
} 
testObj.getName();

运行结果分析：内部函数中的this仍然指向的是全局对象，即window。这里普遍被认为是JavaScript语言的设计错误，因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来，一般约定为that或者self，如上述代码所示。

5. 使用call / apply

var name = 'this is window';  //定义window的name属性,看this.name是否会调用到 
var testObj1 = { 
    name : 'this is testObj1', 
    getName:function(){ 
        console.log(this);   //控制台输出: testObj2  //this指向的是testObj2对象 
        console.log(this.name);  //控制台输出: this is testObj2   
    } 
} 

var testObj2 = { 
    name: 'this is testObj2' 
} 

testObj1.getName.apply(testObj2); 
testObj1.getName.call(testObj2);

Note：apply和call类似，只是两者的第2个参数不同：
[1] call( thisArg [，arg1，arg2，… ] );  // 第2个参数使用参数列表：arg1，arg2，...
[2] apply(thisArg [，argArray] );    //第2个参数使用参数数组：argArray
运行结果分析：使用call / apply  的函数里面的this指向绑定的对象。

6. 事件绑定
事件方法中的this应该是最容易让人产生疑惑的地方，大部分的出错都源于此。

//页面Element上进行绑定 
  <script type="text/javascript"> 
     function btClick(){ 
        console.log(this);  //控制台输出: Window  //this指向的是全局对象--window对象 
    } 
  </script> 
  <body> 
    <button id="btn" onclick="btClick();" >点击</button> 
  </body> 
//js中绑定方式（1） 
  <body> 
    <button id="btn">点击</button> 
  </body> 
  <script type="text/javascript"> 
     function btClick(){ 
        console.log(this);  //控制台输出:<button id="btn">点击</button>  //this指向的是Element按钮对象 
     } 

     document.getElementById("btn").onclick = btClick; 
     document.getElementById("btn").onclick();   //默认点击
  </script> 

//js中绑定方式（2） 
<body> 
   <button id="btn">点击</button> 
 </body> 
 <script type="text/javascript"> 
    document.getElementById("btn").onclick = function(){ 
     console.log(this);  //控制台输出:<button id="btn">点击</button>  //this指向的是Element按钮对象 
    } 
    document.getElementById("btn").onclick(); 
 </script> 

//js中绑定方式（3） 
<body> 
   <button id="btn">点击</button> 
 </body> 
 <script type="text/javascript"> 
    function btClick(){ 
        console.log(this);   
     } 

    document.getElementById("btn").addEventListener('click',btClick); //控制台输出:<button id="btn">点击</button>  //this指向的是Element按钮对象把函数(方法)用在事件处理的时候。 
    document.getElementById("btn").attachEvent('onclick',btClick);  //IE使用,控制台输出: Window  //this指向的是全局对象--window对象 
 </script>

运行结果分析：以上2种常用事件绑定方法，在页面Element上的进行事件绑定（onclick="btClick();"），this指向的是全局对象；而在js中进行绑定，除了attachEvent绑定的事件方法（this指向的是全局对象）外，this指向的是绑定事件的Elment元素。