this指向問題的經典場景

HitenDev 發布于2019-08-26 13:32 / 1633人閱讀

摘要：常用場景以函數形式調用指向指向了以方法形式調用指向調用方法的那個對象指向顏色為紅色構造函數調用指向實例的對象此處分別指向的實例對象控制臺輸出使用對象的方法時指向報錯因為是的一個方法更改錯誤使顏色為調用了這個方法此時的指向此操作將指向的賦給則

THIS常用場景 1、以函數形式調用,this指向window

function fn(m,n){
   m=2;
   n=3;
console.log(this.m,n);//undefined,this指向了window
}
fn();

2、以方法形式調用,this指向調用方法的那個對象

box.onclick =function(){
    this.style.backgroundColor = "red"; //this指向box,box顏色為紅色
}

3、構造函數調用,this指向實例的對象

function Person(age , name ) {
   this.a = age ;
   this.b = name;
   console.log(this)  // 此處 this 分別指向 Person 的實例對象 p1 p2 
}
   var p1 = new Person(18, "zs")
   var p2 = new Person(18, "ww")
 控制臺輸出:
 Person?{a: 18, b: "zs"}
 Person?{a: 18, b: "ww"}

4、使用window對象的方法時,指向window

var box =document.getElementById("box");
box.onclick =function(){
    setTimeout(function(){
       this.style.backgroundColor="yellow"
    },1000)
}
//報錯,因為setTimeout是window的一個方法.

更改錯誤,使box顏色為yellow

var box =document.getElementById("box");
box.onclick =function(){
    var me = this;//box調用了這個方法,此時的this指向box,此操作將指向box的this賦給me,則得到的me的指向為指向this
    setTimeout(function(){
       me.style.backgroundColor="yellow"http://此時的me.style就指的是box的style
    },1000)
}

5、多重場景改變this指向

box.onclick=function(){ 
     function fn1(){ 
          console.log(this); 
     } 
     fn1(); //事件觸發了fn1,在函數內部,以函數形式調用this依舊指向window
     console.log(this);//事件處理函數中的this,該事件由誰觸發,this就指向誰
};
 控制臺輸出:
 Window?{postMessage: ?, blur: ?, focus: ?, close: ?, parent: Window,?…}
 box

box.onclick=function(){ 
    var me = this;
    function fn1(){ 
        console.log(me); 
    } 
   fn1(); //事件觸發了fn1,me指向box,所以console的是box
   console.log(this);//事件處理函數中的this,該事件由誰觸發,this就指向誰
 };
 控制臺輸出:
 box
 box

6、call和apply改變this指向

var person={
      name : "lili",
      age: 21
    };
function aa(x,y){
      console.log(x,y);
      console.log(this.name);
    }
  aa.call(person,4,5);
控制臺輸出
//4 5
//lili
使用call,this指向call后面緊跟的元素,this就指向person

GPU云服務器云服務器 this的指向改變this指向 this的用法 php 的$this

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109008.html

this指向問題的經典場景

摘要：常用場景以函數形式調用指向指向了以方法形式調用指向調用方法的那個對象指向顏色為紅色構造函數調用指向實例的對象此處分別指向的實例對象控制臺輸出使用對象的方法時指向報錯因為是的一個方法更改錯誤使顏色為調用了這個方法此時的指向此操作將指向的賦給則 THIS常用場景 1、以函數形式調用,this指向window function fn(m,n){ m=2; n=3; console...

dongxiawu 2019-08-30 15:56 評論0 收藏0
this指向問題的經典場景

摘要：常用場景以函數形式調用指向指向了以方法形式調用指向調用方法的那個對象指向顏色為紅色構造函數調用指向實例的對象此處分別指向的實例對象控制臺輸出使用對象的方法時指向報錯因為是的一個方法更改錯誤使顏色為調用了這個方法此時的指向此操作將指向的賦給則 THIS常用場景 1、以函數形式調用,this指向window function fn(m,n){ m=2; n=3; console...

jeyhan 2019-08-02 14:26 評論0 收藏0
JavaScript繼承背后的場景-prototype,__proto__, [[prototype

摘要：實例可以通過代理來找到它，并用來檢測其構造函數。經典繼承圖這也是通過構造函數來創建對象，但是在這一系列的對象和實例之間我們的焦點是放在原型鏈上。盡管，但構造函數的屬性并不是對象自己的屬性，它實際上是通過尋找原型鏈獲得的，即所指向的地方。繼承是面向對象編程語言的一大核心功能點，雖然JavaScript并不是一門真正意義上的面向對象的編程語言，但也通過某種手段實現了繼承這一功能，最常見的...

鄒立鵬 2019-08-26 10:14 評論0 收藏0
夯實JS基礎（一）：this的指向問題和經典面試題

摘要：很多高級編程語言都給新創建的對象分配一個引用自身的指針比如中的指針，中的，也有指針，雖然它的指向可能相對復雜些，但是指向的，永遠只可能是對象。很多高級編程語言都給新創建的對象分配一個引用自身的指針,比如JAVA、C++中的this指針，python中的self，JavaScript也有this指針，雖然它的指向可能相對復雜些，但是this指向的，永遠只可能是對象。一、在一般函數方法...

lucas 2019-08-26 10:29 評論0 收藏0