this指向及箭头函数

this 指向问题：一般情况下this的最终指向的是那个调用它的对象。

1、全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）

// 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
console.log(this);  //window

function fn() {
	console.log(this);  //window
}
window.fn();
window.setTimeout(function() {
	console.log(this);  //window
}, 1000);

2、方法调用中谁调用，则this指向谁

// 方法调用中谁调用this指向谁
var o = {
	sayHi: function() {
    	console.log(this); // this指向的是 o 这个对象
	}
}
o.sayHi();

var btn = document.querySelector('button');
btn.onclick = function() {
	console.log(this); // this指向的是btn这个按钮对象
}

btn.addEventListener('click', function() {
	console.log(this); // this指向的是btn这个按钮对象
})

3、构造函数中this指向构造函数的实例

// 构造函数中this指向构造函数的实例
function Fun() {
	console.log(this); // this 指向的是fun 实例对象
}
var fun = new Fun();

ES6中的箭头函数：
const ccc = (参数列表) => { }
const ccc = () => { }

1.参数问题:

// 1.1.放入两个及以上参数
const sum = (num1, num2) => {
  return num1 + num2
}

// 1.2.放入一个参数，可以省略括号
// const power = (num) => { }
const power = num => {
  return num * num
}

// 1.3.没有参数，括号不能省略
const show = () => {
  console.log('Hello');
}

2.函数内代码量问题：

//2.1.函数代码块中有多行代码时
const test = () => {
  // 1.打印Hello World
  console.log('Hello World');
  // 2.打印Hello Vuejs
  console.log('Hello Vuejs');
}
// 2.2.函数代码块中只有一行代码
// const mul = (num1, num2) => {
//   return num1 + num2
// }
const mul = (num1, num2) => num1 * num2 // 这种写法，不用写return，因为它有返回值返回
// 因此引申出另一种情况：原代码中没有return的情况
// const demo = () => {
//   console.log('Hello Demo'); // 没有return
// }
const demo = () => console.log('Hello Demo')
console.log(demo()); // Hello Demo  undefined
// 调用demo()时，会打印 Hello Demo
// 箭头函数这种写法会有返回值，但是log是没有返回值的，所以返回给demo()函数的是undefined
// 最终打印demo()时会打印出 Hello Demo  undefined

3.箭头函数的this指向问题：
问题：箭头函数中的this是如何查找的了?
答案：向外层作用域一层层地查找this，直到有this的定义。

setTimeout(function () {
  console.log(this);  // window
}, 1000)
  
setTimeout(() => {
  console.log(this);  // window
}, 1000)

const obj = {
  aaa() {
	setTimeout(function () {
      console.log(this); // window
    })
    
    setTimeout(() => {
      console.log(this); // obj对象，aaa()函数作用域中，this指向的是obj
    })

	console.log(this); // obj
  }
}

测试：

const obj = {
  aaa() {
	setTimeout(function () {
	  console.log(this) // window
      setTimeout(function () {
        console.log(this); // window
      })
	  setTimeout(() => {
        console.log(this); // window
      })
    })

    setTimeout(() => {
      console.log(this); // obj
      setTimeout(function () {
        console.log(this); // window
      })
	  setTimeout(() => {
        console.log(this); // obj
      })
    })
  }
}