你真的了解this指向嗎？

liaorio 發布于2019-08-23 17:01 / 2904人閱讀

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

前言

相信很多人都對JavaScript中的this指向問題一知半解，所以今天就來詳細看看它到底是怎么判斷的。

一. 先看幾道題

  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綁定規則 1.綁定默認

當其他規則無法應用時將采用默人綁定

默認綁定將會綁定到全局對象

嚴格模式（strict mode）下不能講全局對象用于默認綁定

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

function bar() {
    "use strict";
    console.log(this === window);
    console.log(this);
  }
bar() // false undefined

2.隱式綁定

如果函數引用有上下文對象時，this將會綁定到這個對象。椎確來說是函數調用時是否有引用上下文對象。

  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

三.優先級

  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

從上面的代碼可以看出優先級從高到低依次是：new綁定、顯示綁定、隱式綁定、默認綁定。

GPU云服務器云服務器改變this指向 this的指向說說你所了解的人工智能外呼系統阿里云服務器你了解了嗎

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

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

嗨，你真的懂this嗎？

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

morgan 2019-08-23 16:18 評論0 收藏0
HashMap 你真的了解嗎？

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

RdouTyping 2019-08-19 11:33 評論0 收藏0
JavasScript重難點知識

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

forsigner 2019-08-21 18:36 評論0 收藏0
理解引用

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

curlyCheng 2019-08-19 17:58 評論0 收藏0
你真的了解RPC嗎？

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

myeveryheart 2019-07-01 11:05 評論0 收藏0