成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

你真的了解this指向嗎？

liaorio / 3092人閱讀

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

前言 
相信很多人都對JavaScript中的this指向問題一知半解，所以今天就來詳細(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ī)則無法應(yīng)用時將采用默人綁定

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

嚴(yán)格模式（strict mode）下不能講全局對象用于默認(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ù)引用有上下文對象時，this將會綁定到這個對象。椎確來說是函數(shù)調(diào)用時是否有引用上下文對象。

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

  var bar = obj.foo;
  bar(); // window 無上下文對象
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)先級 
  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)先級從高到低依次是：new綁定、顯示綁定、隱式綁定、默認(rèn)綁定。

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103674.html

相關(guān)文章

  • 嗨，你真的懂this嗎？

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

    morgan 評論0 收藏0

  • HashMap 你真的了解嗎？

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

    RdouTyping 評論0 收藏0

  • JavasScript重難點知識

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

    forsigner 評論0 收藏0

  • 理解引用

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

    curlyCheng 評論0 收藏0

  • 你真的了解RPC嗎？

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

    myeveryheart 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<