this的指向

this指向

全局作用域或一般函数

全局作用域或者普通函数中 this 指向全局对象 window。

//直接打印
console.log(this) //window

//function声明函数
function bar () {console.log(this)}
bar() //window

//function声明函数赋给变量
var bar = function () {console.log(this)}
bar() //window

//自执行函数
(function () {console.log(this)})(); //window

方法调用

方法调用中谁调用 this 指向谁

//对象方法调用
var person = {
  run: function () {console.log(this)}
}
person.run() // person

//事件绑定
var btn = document.querySelector("button")
btn.onclick = function () {
  console.log(this) // btn
}
//事件监听
var btn = document.querySelector("button")
btn.addEventListener('click', function () {
  console.log(this) //btn
})

箭头函数

箭头函数中指向外层作用域的 this

1. 箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this

2. 箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。

var obj = {
  one() {
    console.log(this);
  },
  two: () => {
    console.log(this);
  }
}

obj.one() // {one: ƒ, two: ƒ}
obj.two() // window

构造函数

构造函数中的this指向创建出来的实例

//不使用new指向window
function Person(name) {
  console.log(this) // window
  this.name = name;
}
Person('inwe')
//使用new
function Person(name) {
  this.name = name
  console.log(this) //people
  self = this
}
var people = new Person('iwen')
console.log(self === people) //true
//这里new改变了this指向，将this由window指向Person的实例对象people

严格模式

在严格模式下，在事件处理函数中，this指向触发事件的目标对象。

//全局作用域中的this
"use strict";
console.log(this===window);//true

//全局作用域中函数中的this
"use strict";			
function foo(){
	console.log(this===window);
}
foo();//false
window.foo();//true

拓展：this绑定优先级

如果在某个调用位置应用了多条规则，如何确定哪条规则生效？
显式绑定 > 隐式绑定 > 默认绑定
new绑定 > 隐式绑定 > 默认绑定

 obj.foo.call(obj2); // this指向obj2 显式绑定比隐式绑定优先级高。
   new obj.foo(); // this指向new新创建的对象 new绑定比隐式绑定优先级高。