this
是 JavaScript 中的一個(gè)關(guān)鍵字。它用在對(duì)象的方法中萨惑。 this 總是指向調(diào)用該方法的對(duì)象捐康。
一、使用this指針
1咒钟、在對(duì)象中使用this
var man = "劉德華";
var obj = {
woman: "范冰冰",
test: function () {
// 1吹由、輸出值為"undefined"
console.log(this.man);
// 2若未、輸出值為“范冰冰”
console.log(this.woman);
}
};
// 3朱嘴、輸出值為“劉德華”
console.log(this.man);
obj.test();
(1)使用var關(guān)鍵字定義的變量默認(rèn)掛載在window對(duì)象下,而this又默認(rèn)指向window對(duì)象粗合,因此3中的this.man輸出“劉德華”萍嬉。
(2)根據(jù)this的定義,this將永遠(yuǎn)指向調(diào)用其方法的對(duì)象隙疚。因此在執(zhí)行obj對(duì)象下的test方法時(shí)壤追,因obj對(duì)象下并沒有man屬性所以輸出"undefined",而woman屬性包含在obj對(duì)象下所以輸出“范冰冰”供屉。
2行冰、在原型(Prototype)或構(gòu)造函數(shù)(Constructor)中使用this
var Obj = function () {
this.name2 = "Fan bingbing";
};
Obj.prototype = {
name: "范冰冰",
test2: function () {
console.log(this.name);
console.log(this.name2);
}
};
var obj2 = new Obj();
obj2.test2();
當(dāng)我們使用new關(guān)鍵字去實(shí)例化一個(gè)新對(duì)象的時(shí)候,this會(huì)指向原型或構(gòu)造函數(shù)所在的對(duì)象伶丐。此示例中的this會(huì)指向Obj對(duì)象
二悼做、改變this指向(JavaScript三劍客:bind()、call()哗魂、apply())
1肛走、使用call改變this指向
var test = function () {
console.log(this.name);```````
};
var person = {
name: "Fan bingbing"
};
test.call(person);
此示例通過call方法將this指針綁定到person對(duì)象上,因此輸出“Fan bingbing”录别。
2朽色、使用apply改變this指向
var test = function () {
console.log(this.name);
};
var person = {
name: "Fan bingbing"
};
test.apply(person);
此示例通過call方法將this指針綁定到person對(duì)象上邻吞,因此輸出“Fan bingbing”。
3葫男、使用bind改變this指向
var test = function () {
console.log(this.name);
};
var person = {
name: "Fan bingbing"
};
test.bind(person)();
此示例通過call方法將this指針綁定到person對(duì)象上抱冷,因此輸出“Fan bingbing”。
三腾誉、ES6中的this指針
1徘层、箭頭函數(shù)中的this
var man = "劉德華";
var obj = {
woman: "范冰冰",
test: () => {
// 1、輸出值為"undefined"
console.log(this.man);
// 2利职、輸出值為“范冰冰”
console.log(this.woman);
}
};
// 3趣效、輸出值為“劉德華”
console.log(this.man);
obj.test();
1、
var
關(guān)鍵字定義的變量默認(rèn)掛載于window對(duì)象上猪贪,this又默認(rèn)指向window對(duì)象跷敬,所以3中輸出“劉德華”。
2热押、obj對(duì)象的test方法是一個(gè)箭頭函數(shù)西傀,其能夠輸出this.man的值卻無法輸出this.woman的值,表明箭頭函數(shù)并不改變this指針指向桶癣。
2拥褂、class中的this
var man = "劉德華";
class Person {
woman = "范冰冰";
test() {
console.log(this.man);
console.log(this.woman);
}
static test2() {
console.log(this);
console.log(this.man);
console.log(this.woman);
}
}
var p = new Person();
Person.test2();
p.test();
1、在Class中牙寞,this指針將指向其自身饺鹃,而當(dāng)實(shí)例化之后this將指向其實(shí)例,所以輸出“范冰冰”而無法輸出"劉德華"