JavaScript中this指向的問(wèn)題怎么解決

今天小編給大家分享一下JavaScript中this指向的問(wèn)題怎么解決的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

1. 默認(rèn)綁定

例子1

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

例子2

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

例1使用var定義在全局作用域中，例2使用let定義在塊作用域中，但內(nèi)部的this都指向window

原因：函數(shù)直接調(diào)用，會(huì)做默認(rèn)綁定，可類比為 fn.call(undefined)，call 第一個(gè)參數(shù)是null或undefined，那么 this 將指向全局對(duì)象

常見面試題

示例1：

  var a = 3;
  function c() {
    alert(a); //3
  }
  (function () {
    var a = 4;
    c();
  })();

示例2：

  var name = "123";

  var obj = {
    name: "456",
    print: function () {
      function a() {
        console.log(this.name); //123
      }
      a();
    },
  };

  obj.print();

無(wú)論面試題設(shè)計(jì)的多花里胡哨，只要記住 普通函數(shù)直接調(diào)用，默認(rèn)綁定，this指向全局 便可知道函數(shù)內(nèi)部this指向window

2. 隱式綁定

如果函數(shù)調(diào)用時(shí)，前面存在調(diào)用它的對(duì)象，那么this就會(huì)隱式綁定到這個(gè)對(duì)象上

  let obj = {
    name: "123",
    fn: function () {
      console.log(this.name); //123
    },
  };
  obj.fn();

如果函數(shù)調(diào)用前存在多個(gè)對(duì)象，this指向距離調(diào)用自己最近的對(duì)象

  let obj = {
    name: "123",
    o: {
      name: "456",
      func: function () {
        console.log(this.name);
      },
    },
  };
  obj.o.func(); //456

隱式丟失：通過(guò)變量賦值將對(duì)象中的函數(shù)變成普通函數(shù)

  var name = "1";
  let obj = {
    name: "2",
    fn: function () {
      console.log(this.name);
    },
  };
  let fn1 = obj.fn;
  fn1(); //1

fn1 直接調(diào)用，默認(rèn)綁定，this指向全局

3. 顯示綁定

顯示綁定：通過(guò)call、apply以及bind方法改變this的行為

  let obj1 = {
    name: "1",
  };
  let obj2 = {
    name: "2",
  };
  let obj3 = {
    name: "4",
  };
  var name = "3";

  function fn() {
    console.log(this.name);
  }
  fn(); //3 默認(rèn)綁定，this指向全局
  fn.call(obj1); //1 this指向obj1
  fn.apply(obj2); //2 this指向obj2
  fn.bind(obj3)(); //4 this指向obj3

拓展：call、apply、bind 相同點(diǎn)與不同點(diǎn)

相同點(diǎn)：改變this的指向

不同點(diǎn)：

call 第二個(gè)參數(shù)傳入一個(gè)參數(shù)列表

apply 第二個(gè)參數(shù)傳入一個(gè)參數(shù)數(shù)組

bind 第二個(gè)參數(shù)傳入一個(gè)參數(shù)列表，返回一個(gè)函數(shù)，不會(huì)立即執(zhí)行

4. new 綁定

this指向生成的新對(duì)象

  function Person(name, age) {
    this.name = name;
    this.age = age;
  }

  const p1 = new Person("1", 20);

  console.log(p1); // {name:'1', age:20}

5. 箭頭函數(shù)的this

默認(rèn)綁定外層 this

例1

  var name = "1";
  let obj = {
    name: "2",
    fn: function () {
      setTimeout(function () {
        console.log(this.name); //1
      });
    },
  };
  obj.fn();

setTimeout實(shí)際是window.setTimeout，因此函數(shù)內(nèi)部this指向window，打印結(jié)果為1

例2

  var name = "1";
  let obj = {
    name: "2",
    fn: function () {
      setTimeout(() => {
        console.log(this.name); //2
      });
    },
  };
  obj.fn();

由于使用了箭頭函數(shù)，默認(rèn)綁定外層this，this指向函數(shù)fn

fn由obj調(diào)用，this隱式綁定到obj，最后打印的結(jié)果為2

例3:

  var name = "window";
  var student = {
    name: "1",
    fn: function () {
      var fn2 = () => {
        console.log(this.name);
      };
      fn2();
    },
    fn3: () => {
      console.log(this.name);
    },
  };
  student.fn(); // '1'
  student.fn3(); // 'window'

• student.fn() 內(nèi)部執(zhí)行的是函數(shù)fn2，由于fn2是直接調(diào)用，默認(rèn)綁定到window上，但由于fn2是箭頭函數(shù)，綁定外一層this，所以this指向函數(shù)fn，fn由student對(duì)象調(diào)用，因此最終this指向student

• student.fn3() 隱式綁定this指向student，由于fn3是箭頭函數(shù)，默認(rèn)綁定外一層的this，最終this指向window

例4：防抖函數(shù)

  function debounce(fn, delay) {
    let timer = null;
    return function () {
      clearTimeout(timer);
      timer = setTimeout(() => {
        //誰(shuí)調(diào)用，this指向誰(shuí)
        fn.apply(this, arguments);
      }, delay || 1000);
    };
  }

  function fn() {
    console.log(this); //document
  }

  document.addEventListener("click", debounce(fn));

setTimeout函數(shù)中的this默認(rèn)指向window，因?yàn)槭羌^函數(shù)，默認(rèn)綁定外層this，因此this指向匿名函數(shù)，匿名函數(shù)由document調(diào)用，所以this指向document。再通過(guò)apply將函數(shù)fn的this綁定到document上，因此打印出document

6. 優(yōu)先級(jí)

顯式綁定（bind>call/apply） > 隱式綁定 > 默認(rèn)綁定

1. 隱式綁定 > 默認(rèn)綁定

  function bar() {
    console.log(this); //info
  }

  const info = {
    bar: bar,
  };

  info.bar();

2. 顯示綁定 > 隱式綁定

  var fullName = "global";
  const info = {
    fullName: "1",
    getName: function () {
      console.log(this.fullName);
    },
  };

  info.getName.call(null); //global

3. bind > apply/call

  function bar() {
    console.log(this); //{age: 1}
  }

  bar.bind({ age: 1 }).call({ age: 2 });

函數(shù)中的this綁定在 { age: 1 } 上，即使后面又使用了call綁定

以上就是“JavaScript中this指向的問(wèn)題怎么解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。