前端基礎(chǔ)知識(shí)總結(jié)

MageekChiu 發(fā)布于2019-08-22 18:24 / 391人閱讀

摘要：關(guān)于前端中是個(gè)老生常談的問(wèn)題，總是說(shuō)不清道不明，看這里。的大致用法，相信接觸過(guò)前端的同學(xué)都知道，無(wú)非以下種。先想一下，兩次執(zhí)行后結(jié)果是什么。輸出總結(jié)被誰(shuí)調(diào)用指向誰(shuí)，沒(méi)有被調(diào)用的情況下，瀏覽器默認(rèn)為。由于箭頭函數(shù)中的，總是指向父級(jí)作用域。

關(guān)于this

前端中this是個(gè)老生常談的問(wèn)題，總是說(shuō)不清道不明，看這里。
this只能用在函數(shù)里面，相信全世界的人都知道。
this就是函數(shù)在被執(zhí)行的時(shí)候，產(chǎn)生的執(zhí)行上下文(context)。
this的大致用法，相信接觸過(guò)前端的同學(xué)都知道，無(wú)非以下5種。

1、 function test(){
       console.log(this);
    }
    test(); //不是對(duì)象的屬性，直接執(zhí)行
    
2、 var object = {
       test: test() {
          console.log(this);
       }
    }
    object.test(); //作為對(duì)象的屬性被調(diào)用
    
3、 test.call(object); // apply用法差不多

4、 Function test() {
       this.name = test;
   }

5、箭頭函數(shù)中的this

其中第4種構(gòu)造函數(shù)沒(méi)什么可說(shuō)的，構(gòu)造出了誰(shuí)，誰(shuí)就是this。
平常用的最多的也就是前3種，先說(shuō)第3種情況。最后說(shuō)第5種。

第3種情況被執(zhí)行的時(shí)候，
object就是作為函數(shù)參數(shù)被傳入到test()中，這個(gè)函數(shù)參數(shù)就是this。
也就是說(shuō)在test()被執(zhí)行的時(shí)候，this就是指向object。

第1種，第2種情況就是第3種情況的語(yǔ)法糖。

test.call(undefined);
object.test.call(object); //被誰(shuí)調(diào)用指向誰(shuí)

如果你傳的 context 不是一個(gè)對(duì)象，那么在瀏覽器中默認(rèn)是 window 對(duì)象。

分析下面的例子：

var name = "hut";
var obj = {
  name : "lucy",
  foo : function() {
     console.log(this.name);
  }
}
obj.foo(); 

var otherObj = {
  name : "john",
  foo : obj.foo
}

obj.foo(); 
otherObj.foo();

那么obj.foo(); otherObj.foo(); 就是我們上面所說(shuō)的第2種情況。

先想一下，兩次執(zhí)行后結(jié)果是什么。

obj.foo() 其實(shí)就是：obj.foo.bind(obj),
也就是說(shuō)函數(shù)在被執(zhí)行的時(shí)候，是被obj調(diào)用的，那么函數(shù)內(nèi)的this就是obj

function() {
   console.log(this.name); // 輸出lucy
}

執(zhí)行上下文（context）中的this是指向obj

otherObj.foo() 其實(shí)就是obj.foo.bind(otherObj)
也就是說(shuō)函數(shù)在被執(zhí)行的時(shí)候，是被otherObj調(diào)用的，那么函數(shù)內(nèi)的this就是otherObj

function() {
   console.log(this.name);  // 輸出john
}

再來(lái)看一個(gè)例子：

var name = "Bob";
var obj = {
  name = "lucy",
  foo : function() {
     console.log(this.name);
  }
}
obj.foo(); 

var otherObj = {
  name :"john",
  foo : function() {
     var testFunc = obj.foo();
     testFunc();
  }
}

otherObj.foo();

分析：
執(zhí)行otherObj.foo(); 后，接著執(zhí)行obj.foo();，也就是說(shuō)執(zhí)行下面的函數(shù)。
那么這個(gè)函數(shù)是被誰(shuí)調(diào)用的呢，誰(shuí)也沒(méi)有調(diào)用這個(gè)函數(shù)obj.foo()前面誰(shuí)也沒(méi)有。
也就是obj.foo.bind(undefined);，

function() {
   console.log(this.name);  // 輸出Bob
}

最后看一個(gè)例子：

var name = "Bot";
var obj = {
  name : "lucy",
  showName: function() {
     console.log(this.name)
  },
  foo : function() {
     (function(callback) {
       callback();
     })(this.showName)
  }
}
obj.foo();

分析：
執(zhí)行obj.foo(); 后，this.showName中的this就是obj,
也就是將obj.showName;傳給cb，由于是立即執(zhí)行函數(shù)，
則執(zhí)行callback();也就是執(zhí)行下面的函數(shù)
那么這個(gè)函數(shù)是被誰(shuí)調(diào)用的呢，誰(shuí)也沒(méi)有調(diào)用這個(gè)函數(shù)callback前面誰(shuí)也沒(méi)有。
也就是obj.showName.bind(undefined);，輸出Bob。

function() {
   console.log(this.name);  // 輸出Bob
}

總結(jié)：
this被誰(shuí)調(diào)用指向誰(shuí)，沒(méi)有被調(diào)用的情況下，瀏覽器默認(rèn)為window。

特殊情況：
setTimeout,setInterval,匿名函數(shù)執(zhí)行的時(shí)候，
函數(shù)體內(nèi)的this為全局對(duì)象window。

最后說(shuō)第5種，箭頭函數(shù)中的this。

箭頭函數(shù)內(nèi)部并沒(méi)有實(shí)現(xiàn)綁定this的機(jī)制，其實(shí)箭頭函數(shù)并沒(méi)有自己的this，
箭頭函數(shù)內(nèi)部的this總是指向父級(jí)作用域。

什么意思呢，看個(gè)例子。

    var name = "Bob";
    var obj = {
        name : "a",
        showName: () => {
            console.log(this.name);
        }
    }
    obj.showName(); // Bob

分析：
obj.showName()是在全局作用域下被調(diào)用的，然后執(zhí)行下面的函數(shù)。

() => {
         console.log(this.name);
      }

由于箭頭函數(shù)中的this，總是指向父級(jí)作用域。
obj.showName()是在全局作用域下被調(diào)用的，不是obj，obj啥也不是。
所以輸出Bob。

call、apply和bind的區(qū)別

function add(a,b,c) {
  console.log(this);
  return a+b+c;
}

以上3個(gè)方法都是函數(shù)的方法，call和apply都可以改變函數(shù)this，傳遞的參數(shù)方式不同。
call一個(gè)一個(gè)傳遞，add.call(obj, 1,2,3);
apply以數(shù)組的方式傳遞，add.apply(obj, [1,2,3]);，更方便。

bind也可以改變函數(shù)內(nèi)部的this，它還可以傳遞固定參數(shù)，
var fix = add.bind(null, 100);
函數(shù)bind后，與call，apply方法的另一個(gè)區(qū)別是，
bind便不立即執(zhí)行，而apply，call會(huì)立即執(zhí)行，
add.apply(obj, [1,2,3]); 會(huì)立即執(zhí)行得到結(jié)果6，
但是函數(shù)bind后，var fix = add.bind(null, 100);便不會(huì)立即執(zhí)行，
fix(2,3)，調(diào)用后才會(huì)執(zhí)行，得到結(jié)果105，
var fix = add.bind(null, 100);綁定了第一個(gè)參數(shù)為100，
相當(dāng)與固定了第一個(gè)參數(shù)的值為100，fix函數(shù)被調(diào)用后，則只需要傳入之后的參數(shù)即可。