Day-19　This

this 可说是 JavaScript中最复杂的概念，它是一个内部物件，代表函式（function）执行时所属的物件。

this 指向的值通常是「呼叫函式的物件」。随着呼叫的物件不同，执行（如console.log）结果也会不同。

本篇汇整 this 各大规则，做为其他说明资源之补充。

规则：有没有用 new

用new会建立空物件。印出整齐的变数参数。
不加new会印出global。

function hello() {
	this.name = "13"
	this.age = 18
	console.log(this);
}

new hello() //hello()

规则：是否使用「严格模式」

• 以　“use strict” 开启严格模式
• 原本this判定为globe会改判undefine
  • 可写在文件最上方或function最上方。
  • 因引用外部function频繁，不建议开启。

function hello() {
	"use strict"
	console.log(this);
}

hello()

规则：谁呼叫，谁就是 this

例: 此时hello() 相当於 global.hello()，所以接第3条

function hello() {
	console.log(this) //global
}

hello()

若确定是谁(变数)呼叫(this)，可用this取代变数名称：

const hero = {
	name: "Keaton"
	attack: function() {
		console.log("hi, " + hero.name);
		console.log("hi, " + this.name);
		// console.log(this)
	}
}

hero.attack()

规则：前面没有人，this -> global

没有人呼叫sayMyName()，故印出global全域变数
但若”悟空”改为let宣告，就抓不到global，改印出undefined

var name = "蝙蝠侠"

function sayMyName() {
	var name = "罗宾"
	console.log(this.name);
}

sayMyName() //印出"蝙蝠侠"

规则：是否有使用 Call / Apply / Bind（高阶函式）

Call绑定

不会创造function。可以额外带参数。
例：三个参数各给一个console.log

function attack(xx, yy, zz) {
	console.log(xx);
	console.log(yy);
	console.log(zz);
	console.log(`${this.name} 使用绝招 ${this.action}`);
}

const hero = {
	name: "蝙蝠侠",
	action: "钞能力",
}

attack.call(hero, 1, 2, 3)

Apply绑定

不会创造function。可以额外带参数，但须为物件（阵列 [1, 2, 3, 4, 5]）。

Bind绑定

回传新function，改变this的指向：

const function.bind(hero)　//将this指向hero变数

heroAttack() //印出"蝙蝠侠 使用绝招 钞能力"

呼叫新function时可带参数：

const function.bind(hero)　//将this指向hero变数

heroAttack(1, 2, 3)