Javascript this 關(guān)鍵字 詳解
一、this指向構(gòu)造函數(shù)實例化對象
在上篇文章中,我們提到了使用new和不使用new調(diào)用構(gòu)造函數(shù)的區(qū)別,如下例:
function Benjamin(username, sex) {
this.username = username;
this.sex = sex;
}
var benjamin = new Benjamin("zuojj", "male");
//Outputs: Benjamin{sex: "male",username: "zuojj"}
console.log(benjamin);
var ben = Benjamin("zhangsan", "female");
//Outputs: undefined
console.log(ben);
當(dāng)構(gòu)造函數(shù)當(dāng)做普通函數(shù)被調(diào)用時,并沒有返回值,同時this指向全局對象。那么我們?nèi)绾蝸肀苊庖驗槿鄙賜ew關(guān)鍵字,而產(chǎn)生的問題呢?
function Benjamin(username, sex) {
//Check whether "this" is a "Benjamin" object
if(this instanceof Benjamin) {
this.username = username;
this.sex = sex;
}else {
return new Benjamin(username, sex);
}
}
var benjamin = new Benjamin("zuojj", "male");
//Outputs: Benjamin{sex: "male",username: "zuojj"}
console.log(benjamin);
var ben = Benjamin("zhangsan", "female");
//Outputs: Benjamin {username: "zhangsan", sex: "female"}
console.log(ben);
在上例中,我們首先檢查this是否是Benjammin的實例,如果不是,使用new自動調(diào)用構(gòu)造函數(shù),并實例化,這意味著,我們不再需要擔(dān)心,遺漏new關(guān)鍵字實例化構(gòu)造函數(shù)。當(dāng)然這樣我們可能會養(yǎng)成一個壞的習(xí)慣,如果避免這種現(xiàn)象呢?我們可以拋出一個錯誤,像下面這樣:
function Benjamin(username, sex) {
//Check whether "this" is a "Benjamin" object
if(this instanceof Benjamin) {
this.username = username;
this.sex = sex;
}else {
// If not, throw error.
throw new Error("`Benjamin` invoked without `new`");
}
}
二、this指向調(diào)用該函數(shù)的對象
看下面的例子:
var x = 10;
var obj = {
x: 10,
output: function() {
//Outputs: true
console.log(this === obj);
return this.x;
},
innerobj: {
x: 30,
output: function() {
//Outputs: true
console.log(this === obj.innerobj);
return this.x;
}
}
};
//Outputs: 10
console.log(obj.output());
//Outputs: 30
console.log(obj.innerobj.output());
三、this指向全局對象
在上面討論構(gòu)造函數(shù)的時候我們也討論到不適用new的時候,this會指向全局對象,下面我們來看看兩種常見的容易犯錯的實例:
var x = 100;
var obj = {
x: 10,
output: function() {
(function() {
//Outputs: true
console.log(this === window);
//Outputs: Inner: 100
console.log("Inner:" + this.x);
})();
return this.x;
}
};
//Outputs: 10
console.log(obj.output());
在使用閉包的時候,作用域發(fā)生變化,this指向window(瀏覽器中)。
var x = 100;
var obj = {
x: 10,
output: function() {
return this.x;
}
};
var output = obj.output;
//Outputs: 10
console.log(obj.output());
//Outputs: 100
console.log(output());
var obj2 = {
x: 30,
output: obj.output
}
//Outputs: 30
console.log(obj2.output());
此時this始終指向函數(shù)調(diào)用時的對象。
四、this指向apply/call()方法指派的對象
var x = 100;
var obj = {
x: 10,
output: function() {
return this.x;
}
};
//Outputs: 10
console.log(obj.output());
var obj2 = {
x: 40,
output: obj.output
}
//Outputs: 40
console.log(obj.output.call(obj2));
//Outputs: 10
console.log(obj2.output.apply(obj));
五、callback函數(shù)內(nèi)的this指向調(diào)用該callback的函數(shù)的this所指向的對象
//<input type="text" value="3" id="txt_username">
$("#username").on("click", function() {
console.log(this.value);
});
六、Function.prototype.bind中的this
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
實例一:
function person() {
return this.name;
}
//Function.prototype.bind
var per = person.bind({
name: "zuojj"
});
console.log(per);
var obj = {
name: "Ben",
person: person,
per: per
};
//Outputs: Ben, zuojj
console.log(obj.person(), obj.per());
實例二:
this.x = 9;
var module = {
x: 81,
getX: function() { return this.x; }
};
//Outputs: 81
console.log(module.getX());
var getX = module.getX;
//Outputs: 9, because in this case, "this" refers to the global object
console.log(getX);
// create a new function with 'this' bound to module
var boundGetX = getX.bind(module);
//Outputs: 81
console.log(boundGetX());
相關(guān)文章
JavaScript中Number.MAX_VALUE屬性的使用方法
這篇文章主要介紹了JavaScript中Number.MAX_VALUE屬性的使用方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06一個簡單的網(wǎng)站訪問JS計數(shù)器 刷新1次加1次訪問
一個簡單的網(wǎng)站訪問JS計數(shù)器,一般就是學(xué)習(xí)下原來,不建議使用,現(xiàn)在cnzz或百度統(tǒng)計多試不錯的2012-09-09詳解JavaScript中基于原型prototype的繼承特性
這篇文章主要介紹了詳解JavaScript中基于原型prototype的繼承特性,JavaScript中缺少類等面向?qū)ο蟮闹匾匦?因而談到繼承也顯得十分古怪...需要的朋友可以參考下2016-05-05