高级之路篇二十三：this总结

总之一句话：谁调用，this就指向谁。

1. 普通函数中
2. 构造函数中
3. 箭头函数中
4. 原型链上的this
5. getter、setter中
6. 定时器回调函数中
7. 作为对象方法中
8. dom事件处理函数中
9. 内联事件函数中
10. 在Function构造器中

1、普通函数中：

• 非严格模式下指向全局window
• 严格模式下undefined

 

2、构造函数中：

• 指向实例对象

 

3、箭头函数中：

• 箭头函数本身没有this，函数体中的this继承于所在作用域的this

 

4、原型链上的this：

• 指向调用该方法的对象

 

5、getter、setter中：

• 指向被设置或获取的目标对象

 

6、定时器的回调函数中：

• 无论是否严格模式，任何作用域下，都指向全局window

方式一：
setTimeout(function(){console.log(this)}, 0);


方式二：
var a = {
    b(){
        setTimeout(function(){console.log(this)}, 0)
    }
}
a.b();


方式三：
var q = {q : function(){console.log(this)}};
var a = {b: function(){
	setTimeout(q.q, 0);
}}
a.b();

运行结果：

 

7、作为对象方法中：

• 指向调用该方法的对象  

var a = {
    b(){
        console.log(this)
    }
}

a.b()

运行结果：

 

8、dom事件处理函数中：

• 指向触发事件的元素

//html
<div id="test"></div>

//js:
var fun = function(){
    console.log(this)
}

var elm = document.getElementById("test");

elm.addEventListener('click', fun, false);

 

9、内联事件函数中：

• 外层指向当前dom节点
• 函数中的函数指向全局window 

//html
<div onclick="console.log(this)"></div>



//html
<div onclick="console.log(this); var a = function(){console.log(this); a(); }"></div>

   

10、在function构造器中：

• 无论是否严格模式，任何作用域下，都指向全局window

  var a = {
  	b: function(){
          var f = new Function('console.log(this)');
          f();
      }
  }
  
  a.b();

  运行结果：