什么是this扶欣？
JavaScript中函數(shù)的this對(duì)象是函數(shù)在執(zhí)行時(shí)所處的作用域仗考，是關(guān)鍵字音同，它比較靈活，只有在執(zhí)行的時(shí)候知道它指向了誰秃嗜！
5種指向
1权均，指向 window對(duì)象即全局對(duì)象
在全局作用域下，this指向全局對(duì)象锅锨。在瀏覽器中全局對(duì)象就是window對(duì)象
function test(){
console.log(this);
}
test(); //window
2叽赊，指向最近的對(duì)象或聲明的對(duì)象
當(dāng)this關(guān)鍵字在一個(gè)聲明對(duì)象內(nèi)部使用，其值會(huì)被綁定到調(diào)用該this的函數(shù)的最近的父對(duì)象
var person = {
first: 'John',
last: 'Smith',
full: function() {
console.log(this.first + ' ' + this.last);
},
personTwo: {
first: 'Allison',
last: 'Jones',
full: function() {
console.log(this.first + ' ' + this.last);
}
}
};
person.full(); // John Smith
person.personTwo.full(); // Allison Jones
3必搞，new 實(shí)例化時(shí)指向?qū)嵗瘜?duì)象
當(dāng)使用new關(guān)鍵字構(gòu)建一個(gè)新的對(duì)象必指，this會(huì)綁定到這個(gè)新對(duì)象
function Animal(name){
this.name = name;
console.log(this.name);
}
var cat = new Animal('cat');
4，call/apply/bind指向第一個(gè)參數(shù)對(duì)象
function add(c, d) {
console.log(this.a + this.b + c + d);
}
add(3,4); //
// 延伸一下
a + b + 2 // error a/b 未定義 會(huì)報(bào)錯(cuò)
//this.a + this.b + 2 // NaN 恕洲，undefined 則不會(huì)報(bào)錯(cuò)
//說明 undefined + 2 == NaN
var ten = {a: 1, b: 2}
add.call(ten, 3, 4) //10
add.apply(ten, [3, 4]) //10
// bind 場景
var small = {
a: 1,
go: function(b,c,d){
console.log(this.a+b+c+d);
}
}
var large = {
a: 100
}
var bindTest = small.go.bind(large, 1, 2, 3)
bindTest()
// 還有一種寫法
var bindTest = small.go.bind(large, 1) //已知部分參數(shù)
bindTest(2, 3) //剩余參數(shù)追加
small.go.bind(large, 1)(2,3)
5塔橡，es6中箭頭函數(shù)中的this對(duì)象
定義到對(duì)象屬性方法中，指向window
定義在原型鏈上的this霜第，指向window
定義在構(gòu)造函數(shù)中葛家，會(huì)報(bào)錯(cuò)
定義在事件函數(shù)中，指向window
let names = 'window-names'
const obj = {
name: 'es6',
say: () => {
console.log(this === window)
console.log(this.names)
}
}
obj.say() //true
// 原型鏈上
Cat.prototype.sayName = () => {
console.log(this === window)
return this.name
}
const cat = new Cat('mm');
cat.sayName()
// true this為window
// "" window.name 為空
// 解決方法 ===> sayName 更改成普通函數(shù)
function Cat(name) {
this.name = name;
}
Cat.prototype.sayName = function () {
console.log(this === ff)
return this.name
}
const ff = new Cat('ff');
ff.sayName();
// 事件函數(shù) 箭頭函數(shù)在聲明的時(shí)候就綁定了它的上下文環(huán)境泌类，要?jiǎng)討B(tài)改變上下文是不可能的癞谒。
const button = document.getElementById('mngb');
button.addEventListener('click', ()=> {
console.log(this === window) // true
this.innerHTML = 'clicked button'
})
// 其實(shí)我們是要this執(zhí)行被點(diǎn)擊的button
// 解決方法 --> 回調(diào)函數(shù)用普通函數(shù)
const button = document.getElementById('mngb');
button.addEventListener('click', function(e){
console.log(this === button)
console.log(e.target)
this.innerHTML = 'clicked button'
})
