this
this是js中的一個關(guān)鍵字卜壕，函數(shù)運行時自動生成的一個內(nèi)部對象铣揉，只能在函數(shù)內(nèi)部使用抄罕。我們要討論的是 this 的指向屁药。
this就是函數(shù)運行時自動生成的一個內(nèi)部對象
this的指向不是在創(chuàng)建時就決定了寒瓦，而是由執(zhí)行環(huán)境決定的情屹。
下面介紹一下幾種情況下，this的指向
1杂腰、全局環(huán)境
全局環(huán)境下垃你，this就代表window對象。（針對web 應用來講）
var name = 'zhar';
function say(){
console.log(this.name);//zhar
}
say();
同樣喂很，在 setTimeout 或 setInterval 這樣的延時函數(shù)中調(diào)用也屬于全局對象
var name = 'zhar';
setTimeout(function(){
console.log(this.name);//zhar
},0);
2惜颇、對象環(huán)境
對象環(huán)境指向?qū)ο蟆?/p>
var obj = {
name : "zhar",
say : function(){
console.log(this.name);//zhar
}
}
obj.say();
下面舉兩個經(jīng)典的例子：
var name = 'tom';
var obj = {
name : "zhar",
say : function(){
console.log(this.name);
}
}
var fun = obj.say;
fun();//輸出 ?//tom-->fun定義在全局環(huán)境下，即window.fun()
//再次說明了this的指向是由運行時的執(zhí)行環(huán)境來決定的
var name = 'tom';
var obj = {
name : "zhar",
say : function(){
return function(){
console.log(this.name);
}
}
}
obj.say()();//輸出 少辣？//tom
3凌摄、構(gòu)造函數(shù)環(huán)境
構(gòu)造函數(shù)中的this 會指向創(chuàng)建出來的實例對象，使用new 調(diào)用構(gòu)造函數(shù)時漓帅，會先創(chuàng)建出一個空對象锨亏，然后用call函數(shù)把構(gòu)造函數(shù)中的this指針修改為指向這個空對象。執(zhí)行完環(huán)境后煎殷，空對象也就有了相關(guān)的屬性，然后將對象返回出去腿箩，所以說就不用我們自己手動返回啦~
function Person() {
this.name = 'zhar';
}
var p = new Person();
console.log(p.name);
綜合以上豪直，構(gòu)造函數(shù)不需要返回值，如果我們指定一個返回值時珠移，this的指向?qū)l(fā)生變化
function Person() {
this.name = 'zhar';
return {};
}
var p = new Person();
console.log(p.name);//undefined
//--------------------------------------
function Person() {
this.name = 'zhar';
return {name:'tom'};
}
var p = new Person();
console.log(p.name);//tom 如果構(gòu)造函數(shù)返回對象(Object,Array,Function)弓乙，那 this 將指向這個對象，其它基礎類型則不受影響
//--------------------------------------
function Person() {
this.name = 'zhar';
return 1;//number string boolean 等
}
var p = new Person();
console.log(p.name);//zhar
所以钧惧，如無必要我們通常不要設置構(gòu)造函數(shù)的返回值
4暇韧、事件對象
在 DOM 事件中使用 this，this 指向了觸發(fā)事件的 DOM 元素本身
li.onclick = function(){
console.log(this.innerHTML);
}
總結(jié)下來就是一句話：是誰調(diào)用的浓瞪，this就指向誰
下面介紹一下如何來修改this 的指向
1懈玻、可以使用局部變量來代替this指針
var name = "zhar";
var obj = {
name : "zhar",
say : function(){
var _this = this;//使用一個變量指向 this
setTimeout(function(){
console.log(_this.name);
},0);
}
}
obj.say();
該方法為非常常用的一個方法
2、使用call 或 apply 方法
首先說明一下乾颁，call也是函數(shù)調(diào)用的一種形式涂乌，可以通過 函數(shù)名.call（）來調(diào)用函數(shù)。但是提供了一個修改this指向的方法英岭。
fun.call(thisObj[,arg1[,arg2[,...]]])
調(diào)用方式和傳入?yún)?shù)如上面的形式湾盒。其中，所以call(thisObj[,arg1[,arg2[,...]]])中的第一個參數(shù)就是要更改this指向的對象诅妹，為必選參數(shù); 之后的參數(shù)要根據(jù)調(diào)用的函數(shù)是否需要傳入?yún)?shù)(為可選的)
下面通過代碼來展示call 如何使用：
var name = 'zhar';
function say(){
console.log(this.name);
};
say();//zhar;
var obj = {
name : 'tom',
say : function(){
console.log(this.name);
}
}
say.call(obj);//tom 將 say 函數(shù)中的 this 替換為傳入的對象
obj.say();//tom
obj.say.call(null);//zhar 將 obj.say 函數(shù)的 this 替換為了 null罚勾，也就意味著指向了全局環(huán)境
//前面課程的繼承代碼
function Person(){
this.name = "人";
}
function Student(){
Person.call(this,null);
}
var s = new Student();
console.log(s.name);
li.onclick = function(){
console.log(this.innerHTML);//此處的 this 代表著 DOM 元素
function update(){
this.innerHTML += " new ";
}
//update();//這樣做的話毅人，this 的指向?qū)⒆優(yōu)閣indow
update.call(this);//通過 call 方法修改函數(shù)內(nèi) this 的指向
}
//call 的傳參
function say(arg1,arg2){
console.log(this.name,arg1,arg2);
};
var obj = {
name : 'tom',
say : function(){
console.log(this.name);
}
}
say.call(obj,'one','two');//tom one two
apply
apply的作用和call一樣，不同的是傳參的形式尖殃。apply需要以數(shù)組的形式傳遞參數(shù)
//apply 的傳參
function say(arg1,arg2){
console.log(this.name,arg1,arg2);
};
var obj = {
name : 'tom',
say : function(){
console.log(this.name);
}
}
say.apply(obj,['one','two']);//tom one two
以上就是關(guān)于this指向和如何修改this指向的介紹
