前端基礎知識總結

MageekChiu 發布于2019-08-22 18:24 / 386人閱讀

摘要：關于前端中是個老生常談的問題，總是說不清道不明，看這里。的大致用法，相信接觸過前端的同學都知道，無非以下種。先想一下，兩次執行后結果是什么。輸出總結被誰調用指向誰，沒有被調用的情況下，瀏覽器默認為。由于箭頭函數中的，總是指向父級作用域。

關于this

前端中this是個老生常談的問題，總是說不清道不明，看這里。
this只能用在函數里面，相信全世界的人都知道。
this就是函數在被執行的時候，產生的執行上下文(context)。
this的大致用法，相信接觸過前端的同學都知道，無非以下5種。

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

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

5、箭頭函數中的this

其中第4種構造函數沒什么可說的，構造出了誰，誰就是this。
平常用的最多的也就是前3種，先說第3種情況。最后說第5種。

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

第1種，第2種情況就是第3種情況的語法糖。

test.call(undefined);
object.test.call(object); //被誰調用指向誰

如果你傳的 context 不是一個對象，那么在瀏覽器中默認是 window 對象。

分析下面的例子：

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(); 就是我們上面所說的第2種情況。

先想一下，兩次執行后結果是什么。

obj.foo() 其實就是：obj.foo.bind(obj),
也就是說函數在被執行的時候，是被obj調用的，那么函數內的this就是obj

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

執行上下文（context）中的this是指向obj

otherObj.foo() 其實就是obj.foo.bind(otherObj)
也就是說函數在被執行的時候，是被otherObj調用的，那么函數內的this就是otherObj

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

再來看一個例子：

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();

分析：
執行otherObj.foo(); 后，接著執行obj.foo();，也就是說執行下面的函數。
那么這個函數是被誰調用的呢，誰也沒有調用這個函數obj.foo()前面誰也沒有。
也就是obj.foo.bind(undefined);，

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

最后看一個例子：

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

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

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

總結：
this被誰調用指向誰，沒有被調用的情況下，瀏覽器默認為window。

特殊情況：
setTimeout,setInterval,匿名函數執行的時候，
函數體內的this為全局對象window。

最后說第5種，箭頭函數中的this。

箭頭函數內部并沒有實現綁定this的機制，其實箭頭函數并沒有自己的this，
箭頭函數內部的this總是指向父級作用域。

什么意思呢，看個例子。

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

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

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

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

call、apply和bind的區別

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

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

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

云服務器 GPU云服務器位段知識總結 linux數據結構知識點總結前端開發基礎知識前端知識

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

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

前端開發-從入門到Offer - 收藏集 - 掘金

摘要：一些知識點有哪些方法方法前端從入門菜鳥到實踐老司機所需要的資料與指南合集前端掘金前端從入門菜鳥到實踐老司機所需要的資料與指南合集歸屬于筆者的前端入門與最佳實踐。工欲善其事必先利其器-前端實習簡歷篇 - 掘金有幸認識很多在大廠工作的學長，在春招正式開始前為我提供很多內部推薦的機會，非常感謝他們對我的幫助?，F在就要去北京了，對第一份正式的實習工作也充滿期待，也希望把自己遇到的一些問題和...

sf_wangchong 2019-08-20 16:10 評論0 收藏0
騰訊前端求職直播課——面試篇

摘要：主講人石小勇騰訊高級前端工程師，核心成員之一，現主要負責騰訊興趣部落的研發設計工作閑聊前端從移動時代開始，前后端分離之后，前端這個崗位才開始慢慢火起來一線城市前端需求量大，但合格前端很少大話面試面試如相親，為什么這么說五大要素顏王面試的第一主講人：AlloyTeam@石小勇(騰訊高級前端工程師，AlloyTeam核心成員之一，現主要負責騰訊QQ興趣部落的研發設計工作) 1.閑聊前端 ...

YFan 2019-08-21 16:01 評論0 收藏0
騰訊前端求職直播課——面試篇

摘要：主講人石小勇騰訊高級前端工程師，核心成員之一，現主要負責騰訊興趣部落的研發設計工作閑聊前端從移動時代開始，前后端分離之后，前端這個崗位才開始慢慢火起來一線城市前端需求量大，但合格前端很少大話面試面試如相親，為什么這么說五大要素顏王面試的第一主講人：AlloyTeam@石小勇(騰訊高級前端工程師，AlloyTeam核心成員之一，現主要負責騰訊QQ興趣部落的研發設計工作) 1.閑聊前端 ...

gxyz 2019-08-29 12:57 評論0 收藏0
騰訊前端求職直播課——面試篇

摘要：主講人石小勇騰訊高級前端工程師，核心成員之一，現主要負責騰訊興趣部落的研發設計工作閑聊前端從移動時代開始，前后端分離之后，前端這個崗位才開始慢慢火起來一線城市前端需求量大，但合格前端很少大話面試面試如相親，為什么這么說五大要素顏王面試的第一主講人：AlloyTeam@石小勇(騰訊高級前端工程師，AlloyTeam核心成員之一，現主要負責騰訊QQ興趣部落的研發設計工作) 1.閑聊前端 ...

miya 2019-08-01 17:11 評論0 收藏0
前端最強面經匯總

摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續更新中……，可以關注下github 項目地址 https:...

wangjuntytl 2019-08-26 10:41 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0