成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

你真的了解this指向嗎？

liaorio / 2917人閱讀

摘要：前言相信很多人都對(duì)中的指向問(wèn)題一知半解，所以今天就來(lái)詳細(xì)看看它到底是怎么判斷的。椎確來(lái)說(shuō)是函數(shù)調(diào)用時(shí)是否有引用上下文對(duì)象。隱式綁定，上下文對(duì)象無(wú)上下文對(duì)象顯示綁定這也是常用的的方式就不一一舉例了。

前言 
相信很多人都對(duì)JavaScript中的this指向問(wèn)題一知半解，所以今天就來(lái)詳細(xì)看看它到底是怎么判斷的。
一. 先看幾道題 
  var length = 10;
    function fn() {
      console.log(this.length);
    }

  var obj = {
    length: 5,
    method: function(fn) {
      fn();
      arguments[0]();
    }
  };

  obj.method(fn, 1); // 10 2
  var name = "window";

  function f1() {
    var name = "f1";
    return function f2() {
      var name = "f2";
      console.log(this.name);
    }
  }

  var foo = f1();
  var bar = {
    name: "bar",
    foo: foo
  };

  foo(); // window
  bar.foo(); // bar
var name = "window";
  var bar = {
    name: "bar",
    foo: function () {
      var self = this;
      console.log(this.name);
      console.log(self.name);
      (function () {
        console.log(this.name);
        console.log(self.name);
      })()
    }
  };

  bar.foo(); // bar bar window bar
  var name = "window";

  function f1() {
    var name = "f1";
    return () => {
      var name = "f2";
      console.log(this.name);
    }
  }

  var foo = f1();
  var bar = {
    name: "bar",
    foo: foo
  };

  foo(); // window
  bar.foo(); // window
二. this綁定規(guī)則 1.綁定默認(rèn)

當(dāng)其他規(guī)則無(wú)法應(yīng)用時(shí)將采用默人綁定

默認(rèn)綁定將會(huì)綁定到全局對(duì)象

嚴(yán)格模式（strict mode）下不能講全局對(duì)象用于默認(rèn)綁定

function foo() {
    console.log(this === window);
  }
foo() // true

function bar() {
    "use strict";
    console.log(this === window);
    console.log(this);
  }
bar() // false undefined
2.隱式綁定

如果函數(shù)引用有上下文對(duì)象時(shí)，this將會(huì)綁定到這個(gè)對(duì)象。椎確來(lái)說(shuō)是函數(shù)調(diào)用時(shí)是否有引用上下文對(duì)象。

  var name = "window";
    function foo() {
      console.log(this.name);
    }
  var obj = {
    name: "obj",
    foo: foo
  };
  obj.foo(); // obj 隱式綁定，上下文對(duì)象obj

  var bar = obj.foo;
  bar(); // window 無(wú)上下文對(duì)象
3.顯示綁定

這也是常用的的方式：call、apply、bind 就不一一舉例了。

  function foo() {
    console.log(this.name);
  }
  var obj = {
    name: "obj"
  };
  foo.call(obj) // obj
4.new綁定 
  var a;
  function foo(a) {
    this.a = a
  }
  var bar = new foo(2);

  console.log(a); //undefined
  console.log(bar.a); // 2  this了bar
三.優(yōu)先級(jí) 
  var a;

  function foo(a) {
    this.a = a;
  }

  var obj = {
    foo: foo
  };
  var obj2 = {};

  console.log(a); // undefined

  obj.foo(1);
  console.log(obj.a); // 1

  obj.foo.call(obj2, 2);
  console.log(obj2.a); // 2

  var baz = obj.foo.bind(obj2);
  var bar = new baz(3);
  console.log(bar.a); // 3

從上面的代碼可以看出優(yōu)先級(jí)從高到低依次是：new綁定、顯示綁定、隱式綁定、默認(rèn)綁定。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103674.html

相關(guān)文章

  • 嗨，你真的懂this嗎？

    摘要：任何一個(gè)函數(shù)都可以使用來(lái)調(diào)用，因此其實(shí)并不存在構(gòu)造函數(shù)，而只有對(duì)于函數(shù)的構(gòu)造調(diào)用。不可以當(dāng)作構(gòu)造函數(shù)，也就是說(shuō)，不可以使用命令，否則會(huì)拋出一個(gè)錯(cuò)誤。 this關(guān)鍵字是JavaScript中最復(fù)雜的機(jī)制之一，是一個(gè)特別的關(guān)鍵字，被自動(dòng)定義在所有函數(shù)的作用域中，但是相信很多JsvaScript開(kāi)發(fā)者并不是非常清楚它究竟指向的是什么。聽(tīng)說(shuō)你很懂this,是真的嗎？ 請(qǐng)先回答第一個(gè)問(wèn)題：如何準(zhǔn)...

    morgan 評(píng)論0 收藏0

  • HashMap 你真的了解嗎？

    摘要：加載因子是哈希表在其容量自動(dòng)增加之前可以達(dá)到多滿的一種尺度。當(dāng)哈希表中的條目數(shù)超出了加載因子與當(dāng)前容量的乘積時(shí)，則要對(duì)該哈希表進(jìn)行操作即重建內(nèi)部數(shù)據(jù)結(jié)構(gòu)，從而哈希表將具有大約兩倍的桶數(shù)。 showImg(https://upload-images.jianshu.io/upload_images/4565148-98b22ba5ae7d9723.jpg?imageMogr2/auto-...

    RdouTyping 評(píng)論0 收藏0

  • JavasScript重難點(diǎn)知識(shí)

    摘要：忍者級(jí)別的函數(shù)操作對(duì)于什么是匿名函數(shù)，這里就不做過(guò)多介紹了。我們需要知道的是，對(duì)于而言，匿名函數(shù)是一個(gè)很重要且具有邏輯性的特性。通常，匿名函數(shù)的使用情況是創(chuàng)建一個(gè)供以后使用的函數(shù)。 JS 中的遞歸 遞歸, 遞歸基礎(chǔ), 斐波那契數(shù)列, 使用遞歸方式深拷貝, 自定義事件添加 這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果...

    forsigner 評(píng)論0 收藏0

  • 理解引用

    摘要：我會(huì)解釋里面神秘的引用，一旦你理解了引用，你就會(huì)明白通過(guò)引用來(lái)了解的綁定是多么輕松，你也會(huì)發(fā)現(xiàn)讀的規(guī)范容易得多了。二理論把引用定義成?？纯催\(yùn)算符的說(shuō)法這也就是為什么我們對(duì)一個(gè)無(wú)法解析的引用使用操作符的時(shí)候并不會(huì)報(bào)錯(cuò)。 Know thy reference (原文：know thy reference - kangax) 一、前言 翻譯好不是件容易的事兒，我盡量講得通順，一些術(shù)語(yǔ)會(huì)保留原...

    curlyCheng 評(píng)論0 收藏0

  • 你真的了解RPC嗎？

    摘要：現(xiàn)微服務(wù)盛行，服務(wù)之間通信大概就兩種方式和。下面兩個(gè)列子來(lái)讓你了解和的區(qū)別。列子一文章的增刪改查。 現(xiàn)微服務(wù)盛行，服務(wù)之間通信大概就兩種方式Api和Rpc。下面兩個(gè)列子來(lái)讓你了解Api和Rpc的區(qū)別。 列子一 文章的增刪改查。 Api 實(shí)現(xiàn): Router::get(/article/{id},ArticleController@get); Router::post(/articl...

    myeveryheart 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<