原生javascript中this幾種常見用法總結

本文實例講述了原生javascript中this幾種常見用法。分享給大家供大家參考，具體如下：

創新互聯網站建設公司是一家服務多年做網站建設策劃設計制作的公司,為廣大用戶提供了成都網站設計、成都網站制作，成都網站設計，廣告投放，成都做網站選創新互聯，貼合企業需求，高性價比，滿足客戶不同層次的需求一站式服務歡迎致電。

this的應用 “是” 代名詞

this必須出現在函數里面

//------------------默認綁定
function test (){
  console.log(this.a);//1
}
var a = 1;
test();

this取得是window的對象a；此處默認window

//---------------------隱士綁定？
function test (){
  console.log(this.a);//2
}
var foo = {
  a:2,
  f:test
}
var a = 1;
foo.f();

此處this取得是foo對象的a；

//---------------------隱士綁定 多層調用鏈？
function test (){
  console.log(this.a);//3
}
var foo = {
  a:3,
  f:test
}
var foo2 = {
  a:4,
  f:foo
}
var a = 1;
foo2.f.f();

此處this取得是foo對象的a，foo2中只起到調用foo,所以thisl指的還是foo；

//---------------------隱士綁定 (隱士丟失) 多層調用鏈？
function test (){
  console.log(this.a);//1
}
var foo = {
  a:2,
  f:test
}
var a = 1;
var fun = foo.f;
fun();

由于是賦值調用的是fun(),foo.f 是取函數，但是this的對象是fun，是window對象，所以只能取得全局變量a

//1，this所在的函數是事件處理函數，那么this就是事件源；
var btns = document.getElementsByTagName("button");
獲取所有button
for(var i = 0; i < btns.length;i++){
  btns[i].onclick = function(){
    this代表當前事件源
    console.log(this)
  }
}

// 2、this所在函數是構造函數，那么this就是new的對象,并且會生成__proto__屬性。
function func(name,age){
  this.name = name;
  this.age = age;
  // console.log(this)
}
let f = new func("z",20);

// 3、this所在函數是類的方法，那么this就是調用方法時的對象
function Fnc(name,age){
  this.name = name;
  this.age = age;
}
Fnc.prototype.eat = function(){
  console.log(this);
}
let fn = new Fnc("a",12);
fn.eat();
let fn2 = new Fnc("b",10);
fn2.eat();

// 4、this的轉移 轉移到window
var btns = document.getElementsByTagName("button");
//獲取所有button
for(let i = 0; i < btns.length;i++){
  btns[i].onclick = function(){
    console.log(this)
    // this代表點擊事件源
    setTimeout(function(){
      console.log(this);
      // this代表window對象 發生了轉移
    },30)
  }
}
/*
以上所說的所在函數，重點看關鍵字function。不會受箭頭函數的影響
JavaScript中的一切的一切都屬于window對象。window對象可以省略。
所有的全部變量，函數，類，都屬于window對象。
this的轉移：發生在閉包里。*/

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

文章名稱：原生javascript中this幾種常見用法總結
當前網址：http://m.kartarina.com/article40/jecceo.html

成都網站建設公司_創新互聯，為您提供網站設計、網頁設計公司、動態網站、域名注冊、網站設計公司、網站排名

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容