JavaScript中this關(guān)鍵字用法實例分析
更新時間：2018年08月24日 12:05:31 作者：u013063153
這篇文章主要介紹了JavaScript中this關(guān)鍵字用法,結(jié)合實例形式總結(jié)分析了javascript中this關(guān)鍵字在不同條件下的指向問題與相關(guān)操作技巧,需要的朋友可以參考下
本文實例總結(jié)了JavaScript中this關(guān)鍵字用法。分享給大家供大家參考，具體如下：
例1：
function a(){
var user = "yao";
console.log(this.user);//undefined
console.log(this);//window
}
a();
等價于：
function a(){
var user = "yao";
console.log(this.user);//undefined
console.log(this);//window
}
window.a();
this指向的是window。
例2：
var o = {
user:"yao",
fn:function () {
console.log(this.user);//yao
}
}
o.fn();
this指向的是o。
例3：
var o = {
user:"yao",
fn:function () {
console.log(this.user);//yao
}
}
window.o.fn();
this指向的是o。
var o = {
a:10,
b:{
a:12,
fn:function () {
console.log(this.a);//12
}
}
}
o.b.fn();
this指向的是b。
例4：
var o = {
a:10,
b:{
a:12,
fn:function () {
console.log(this.a);//undefined
console.log(this);//window
}
}
};
var j = o.b.fn;
j();
綜上所述：
this的指向永遠是最終調(diào)用它的對象。
當(dāng)this遇上函數(shù)的return：
例5：
function fn(){
this.user = "yao";
return {};
}
var a = new fn;
console.log(a.user);//undefined
例6：
function fn(){
this.user = "yao";
return function(){};
}
var a = new fn;
console.log(a.user);//undefined
例7：
function fn(){
this.user = "yao";
return 1;
}
var a = new fn;
console.log(a.user);//yao
例8：
function fn(){
this.user = "yao";
return undefined;
}
var a = new fn;
console.log(a.user);//yao
this指向的是函數(shù)返回的那個對象。
function fn(){
this.user = "yao";
return null;
}
var a = new fn;
console.log(a.user);//yao
雖然：null是對象，但是此時this指向的仍然是函數(shù)的實例。
PS：
在"use strict"模式下，this默認的指向是undefined，而不是window。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript常用函數(shù)技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
腳本藏身之處不過有四： 1、<script>標(biāo)簽、<link>標(biāo)簽、<style>標(biāo)簽、iframe標(biāo)簽 2、on開頭的標(biāo)簽屬性 3、javascript(vbscript)偽協(xié)議 4、css的epression2008-08-08
原生js和jQuery隨意改變div屬性style的名稱和值
用原生js和jQuery實現(xiàn)改變隨意改變div屬性style的名稱和值的結(jié)果，這個實例比較實用，新手朋友們可以看看2014-10-10
這篇文章主要為大家詳細介紹了微信小程序表單彈窗實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
一頁面多XMLHttpRequest對象...2007-01-01
JS?requestVideoFrameCallback()?簡單案例
這篇文章主要介紹了JS?requestVideoFrameCallback()簡單案例，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了JavaScript快速實現(xiàn)日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
javascript設(shè)計模式之中介者模式Mediator
這篇文章主要介紹了javascript設(shè)計模式之中介者模式Mediator,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了js、jquery實現(xiàn)列表模糊搜索功能過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-03-03
Three.js利用orbit controls插件（軌道控制）控制模型交互動作詳解
這篇文章主要給大家介紹了關(guān)于Three.js利用orbit controls插件，也就是軌道控制來控制模型交互動作的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-09-09
這篇文章主要介紹了JS獲取Table中td值的方法,實例分析了javascript操作table中td的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03