<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          js中this的詳細解釋,JavaScript中this綁定規則【你不知道的JavaScript】

          時間:?2017-11-16閱讀:?812標簽:?this

          調用棧 和 調用位置

          每個函數的this是在調用時被綁定的,完全取決于函數的調用位置(也就是函數的調用方法)。

          在理解this的綁定過程之前,首先要理解調用位置和調用棧;因為 調用位置 就在 當前正在執行的函數 的 前一個調用 中。

          什么是調用棧和調用位置
          調用位置:調用位置就是函數在代碼中被調用的位置(而不是聲明的位置)。
          調用棧:就是為了到達當前執行位置所調用的所有函數。

          function baz() {
              // 當前調用棧是:baz
              // 因此, 當前調用位置是全局作用域
              console.log( "baz" );
              bar(); // <-- bar的調用位置
          } 
          function bar() {
              // 當前調用棧是baz -> bar
              // 因此, 當前調用位置在baz中
              console.log( "bar" );
              foo(); // <-- foo的調用位置
          } 
          function foo() {
              // 當前調用棧是baz -> bar -> foo
              // 因此, 當前調用位置在bar中
              console.log( "foo" );
          } 
          baz(); // <-- baz的調用位置
          


          this綁定規則1:默認模式

          分析代碼:

          function foo() {
              console.log( this.a );
              //this通過默認綁定指向全局對象
          } 
          var a = 2;
          foo(); // 2

          function foo() {
              "use strict";
              console.log( this.a ); 
              //嚴格模式(strict mode)全局對象將無法使用默認綁定
          } 
          var a = 2;
          foo(); // TypeError: this is undefined

          解釋:

          可以把這條規則看作是無法應用其他規則時的默認規則。

          當調用foo()時,this.a被解析成了全局變量a。為什么?因為在本例中,函數調用時應用了this的默認綁定,因此this指向全局對象。

          foo()是直接使用不帶任何修飾的函數引用進行調用的,因此只能使用默認綁定,無法應用其他規則。

          如果使用嚴格模式(strict mode),那么全局對象將無法使用默認綁定,因此this會綁定到undefined


          this綁定規則2:隱式綁定

          分析代碼:

          function foo() {
              console.log( this.a );
          }
           var obj = {
              a: 2,
              foo: foo
          };
          obj.foo(); // 2

          解析:

          無論是直接在obj中定義還是先定義再添加為引用屬性,foo嚴格來說都不屬于obj對象。

          調用位置會使用obj上下文來引用函數,因此你可以說函數被調用時obj對象“擁有”或者“包含”它。

          當函數引用有上下文對象時,隱式綁定規則會把函數調用中的this綁定到這個上下文對象。

          對象屬性引用鏈中只有最接近(包含層)會影響調用位置。

          隱式丟失

          function foo() {
              console.log( this.a );
          } 
          var obj = {
              a: 2,
              foo: foo
          };
          var bar = obj.foo; // 函數別名!
          var a = "oops, global"; // a是全局對象的屬性
          
          if(bar === obj.foo){
              console.log('true'); //true
              console.log(typeof bar) //function
              console.log(typeof obj.foo)  //function
          }else {
              console.log('false')
          } 
          
          bar(); // "oops, global"
          obj.foo();// 2
          
          //等價的兩個函數,輸出不一樣的結果。為什么?
          //其實var bar === window.bar; 它隱式綁定了window 對象,所以它訪問到的自然是 window.a

          解析:雖然bar是obj.foo的一個引用,但是實際上,它引用的是foo函數本身,因此此時的bar()其實是一
          個不帶任何修飾的函數調用,因此應用了默認綁定。這種情況是不可以預料的。

          還有一種 this 丟失=》 回調函數

          回調函數丟失this綁定是非常常見的

          function foo() {
          console.log( this.a );
          }
          function doFoo(fn) {
              // fn其實引用的是foo
              fn(); // <-- 調用位置!
          } 
          var obj = {
              a: 2,
              foo: foo
          };
          var a = "oops, global"; // a是全局對象的屬性
          doFoo( obj.foo ); // "oops, global"


          this綁定規則3:顯式綁定

          分析代碼:

          function foo() {
          console.log( this.a );
          } 
          var obj = {
              a:2
          };
          foo.call( obj ); // 2

          通過foo.call(..),我們可以在調用foo時強制把它的this綁定到obj上

          硬綁定

          function foo(something) {
              console.log( this.a, something );
              return this.a + something;
          } 
          var obj = {
              a:2
          };
          var bar = foo.bind( obj );
          var b = bar( 3 ); // 2 3
          console.log( b ); // 5

          bind(..)會返回一個硬編碼的新函數,它會把參數設置為this的上下文并調用原始函數。


          this綁定規則4:new綁定

          JavaScript,構造函數只是一些使用new操作符時被調用的函數。它們并不會屬于某個類,也不會實例化一個類。實際上,它們甚至都不能說是一種特殊的函數類型,它們只是被new操作符調用的普通函數而已。

          使用new來調用函數時的行為

          創建(或者說構造)一個全新的對象

          新對象會被執行[[原型]]連接。

          這個新對象會綁定到函數調用的this。

          如果函數沒有返回其他對象,那么new表達式中的函數調用會自動返回這個新對象。

          function foo(a) {
              this.a = a;
          } 
          //new對普通函數的構造調用,默認行為:創建一個新對象,獲得對this的所有引用,返回新對象。
          var bar = new foo(2);
          console.log( bar.a ); // 2
          
          //以上函數 相當于下面的函數
          
          function foo(a){
              var obj = {};
              obj.a = a;
              reture obj
          }
          var bar = foo(2);
          console.log( bar.a ); // 2

          解析:使用new來調用foo(..)時,我們會構造一個新對象并把它綁定到foo(..)調用中的this上。


          綁定優先級 和判斷步驟

          顯式綁定 > 隱式綁定
          bind硬綁定 > new綁定 > 隱式綁定

          函數是否在new中調用(new綁定)?如果是的話this綁定的是新創建的對象。

          var bar = new foo()

          函數是否通過call、apply(顯式綁定)或者硬綁定調用?如果是的話,this綁定的是指定的對象。

          function foo(a) {
              this.a = a;
          }
          var obj = {
              a:2
          }

          //因為強制改變了foo 的上下文,this 顯示綁定 為 obj;所以改變的是obj.a 的值

          console.log(obj.a); //3
          ```
          

          函數是否在某個上下文對象中調用(隱式綁定)?如果是的話,this綁定的是那個上下文對象。

          var bar = obj1.foo()

          如果都不是的話,使用默認綁定。如果在嚴格模式下,就綁定到undefined,否則綁定到全局對象。

          var bar = foo()
          
          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/117

          Js中常見this指向問題

          無論是工作或者面試中,this指向問題是經常遇到的。所以這篇文章把常見的指向問題列出來給大家,避免踩坑。首先我們要知道,在函數中this到底取何值,是在函數真正被調用執行的時候確定的,函數定義的時候確定不了,也就是說,this的指向完全取決于函數調用的位置

          this指針

          javascript中this指針是動態的,主要是根據當前函數執行上下文及函數調用方式決定的.以函數方法調用時this指針全局或嚴格模式中為undefined,以方法調用時this是指針當前對象實例的.以構造函數方式時this指向當前創建的實現對象。

          Js中this的綁定規則

          對于 JavaScript 新手來說,this 是非常基礎同時也難以理解的知識點。比如下面的代碼,this 指向就有三種方式。默認情況下,this 指向全局對象。例如下面的代碼。

          如何修復Vue中的 “this is undefined” 問題

          一個可能的原因是混淆了常規函數和箭頭函數的用法,如果你遇到這個問題,我猜你用的是箭頭函數。如果用常規函數替換箭頭函數,它可能會為你修復這個問題。我們再深入一點,試著理解為什么會這樣。

          This is this

          this的指向是JavaScript中一個經久不衰的熱門問題,在不同的場景下指向規則也不同,在此本文總結了this在不同場景下的指向規則以及ES6中新增的箭頭函數中this的指向問題

          Js中this指向問題(函數的調用方式)

          在ES6之前,函數內部的this是由函數的調用方式決定的。構造函數調用 ,這時 p.say 屬于Object,為Object的實例。this:say構造函數的實例,實例中并沒有age屬性,值為:undefined

          JavaScript 中的 this 全面解析

          this的指向問題應該是讓每一個前端er都頭疼的問題,我也一樣,曾經遇到甚至都是一頓亂猜。最近在研讀一些書籍如《你不知道的JavaScript》和《JavaScript語言精粹與編程實踐》,讓我對this的問題豁然開朗

          JavaScript this 關鍵詞

          JavaScript this 關鍵詞指的是它所屬的對象。它擁有不同的值,具體取決于它的使用位置:在方法中,this 指的是所有者對象。單獨的情況下,this 指的是全局對象。

          尋找this綁定對象?找到調用棧&調用位置

          經常聽到這么一句話,找this只需要看 誰是調用方 。當函數被調用時會記錄函數調用調用方式、傳參包括this等各種屬性。有時候 this 綁定對象情況太抽象,找到準確的 調用方 還是有一定的難度。

          理解 JS 中的 This, Bind, Call, 和 Apply

          盡管這this是一個復雜的話題,但它也是在您開始編寫第一個JavaScript程序后立即出現的話題。在本文中,您將了解什么this是指隱含根據上下文,您將學習如何使用bind,call和apply方法,明確確定的值this。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网