this指向問(wèn)題的經(jīng)典場(chǎng)景

dongxiawu 發(fā)布于2019-08-30 15:56 / 3477人閱讀

摘要：常用場(chǎng)景以函數(shù)形式調(diào)用指向指向了以方法形式調(diào)用指向調(diào)用方法的那個(gè)對(duì)象指向顏色為紅色構(gòu)造函數(shù)調(diào)用指向?qū)嵗膶?duì)象此處分別指向的實(shí)例對(duì)象控制臺(tái)輸出使用對(duì)象的方法時(shí)指向報(bào)錯(cuò)因?yàn)槭堑囊粋€(gè)方法更改錯(cuò)誤使顏色為調(diào)用了這個(gè)方法此時(shí)的指向此操作將指向的賦給則

THIS常用場(chǎng)景 1、以函數(shù)形式調(diào)用,this指向window

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

2、以方法形式調(diào)用,this指向調(diào)用方法的那個(gè)對(duì)象

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

3、構(gòu)造函數(shù)調(diào)用,this指向?qū)嵗膶?duì)象

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

4、使用window對(duì)象的方法時(shí),指向window

var box =document.getElementById("box");
box.onclick =function(){
    setTimeout(function(){
       this.style.backgroundColor="yellow"
    },1000)
}
//報(bào)錯(cuò),因?yàn)閟etTimeout是window的一個(gè)方法.

更改錯(cuò)誤,使box顏色為yellow

var box =document.getElementById("box");
box.onclick =function(){
    var me = this;//box調(diào)用了這個(gè)方法,此時(shí)的this指向box,此操作將指向box的this賦給me,則得到的me的指向?yàn)橹赶騮his
    setTimeout(function(){
       me.style.backgroundColor="yellow"http://此時(shí)的me.style就指的是box的style
    },1000)
}

5、多重場(chǎng)景改變this指向

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

box.onclick=function(){ 
    var me = this;
    function fn1(){ 
        console.log(me); 
    } 
   fn1(); //事件觸發(fā)了fn1,me指向box,所以console的是box
   console.log(this);//事件處理函數(shù)中的this,該事件由誰(shuí)觸發(fā),this就指向誰(shuí)
 };
 控制臺(tái)輸出:
 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);
控制臺(tái)輸出
//4 5
//lili
使用call,this指向call后面緊跟的元素,this就指向person