首页 > 资讯 > 前端开发 > JavaScript >一文详解JavaScript中this指向的问题

631

分享到

一文详解JavaScript中this指向的问题

JavaScript this指向 JavaScript this 2023-05-14 09:05:25 631人浏览安东尼

摘要

目录1. 默认绑定2. 隐式绑定3. 显示绑定4. new 绑定5. 箭头函数的this6. 优先级7. 总结前提：文章讨论的都是非严格模式下this指向 1. 默认绑定例子1

1. 默认绑定

例子1

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

例子2

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

例1使用var定义在全局作用域中，例2使用let定义在块作用域中，但内部的this都指向window

原因：函数直接调用，会做默认绑定，可类比为 fn.call(undefined)，call 第一个参数是null或undefined，那么 this 将指向全局对象

常见面试题

示例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();

无论面试题设计的多花里胡哨，只要记住普通函数直接调用，默认绑定，this指向全局便可知道函数内部this指向window

2. 隐式绑定

如果函数调用时，前面存在调用它的对象，那么this就会隐式绑定到这个对象上

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

如果函数调用前存在多个对象，this指向距离调用自己最近的对象

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

隐式丢失：通过变量赋值将对象中的函数变成普通函数

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

fn1 直接调用，默认绑定，this指向全局

3. 显示绑定

显示绑定：通过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 默认绑定，this指向全局
  fn.call(obj1); //1 this指向obj1
  fn.apply(obj2); //2 this指向obj2
  fn.bind(obj3)(); //4 this指向obj3

拓展：call、apply、bind 相同点与不同点

相同点：改变this的指向

不同点：

call 第二个参数传入一个参数列表

apply 第二个参数传入一个参数数组

bind 第二个参数传入一个参数列表，返回一个函数，不会立即执行

4. new 绑定

this指向生成的新对象

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

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

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

5. 箭头函数的this

默认绑定外层 this

例1

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

setTimeout实际是window.setTimeout，因此函数内部this指向window，打印结果为1

例2

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

由于使用了箭头函数，默认绑定外层this，this指向函数fn

fn由obj调用，this隐式绑定到obj，最后打印的结果为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() 内部执行的是函数fn2，由于fn2是直接调用，默认绑定到window上，但由于fn2是箭头函数，绑定外一层this，所以this指向函数fn，fn由student对象调用，因此最终this指向student
student.fn3() 隐式绑定this指向student，由于fn3是箭头函数，默认绑定外一层的this，最终this指向window

例4：防抖函数

  function debounce(fn, delay) {
    let timer = null;
    return function () {
      clearTimeout(timer);
      timer = setTimeout(() => {
        //谁调用，this指向谁
        fn.apply(this, arguments);
      }, delay || 1000);
    };
  }

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

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

setTimeout函数中的this默认指向window，因为是箭头函数，默认绑定外层this，因此this指向匿名函数，匿名函数由document调用，所以this指向document。再通过apply将函数fn的this绑定到document上，因此打印出document

6. 优先级

显式绑定（bind>call/apply） > 隐式绑定 > 默认绑定

1. 隐式绑定 > 默认绑定

  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 });

函数中的this绑定在 { age: 1 } 上，即使后面又使用了call绑定

7. 总结

1. 普通函数，this的值取决于函数被调用的方式，分为默认绑定，隐式绑定和显示绑定

2. 箭头函数，默认绑定外层this

到此这篇关于一文详解javascript中this指向的问题的文章就介绍到这了,更多相关JavaScript this指向内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 一文详解JavaScript中this指向的问题

本文链接: https://www.lsjlt.com/news/203016.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

一文详解JavaScript中this指向的问题

目录1. 默认绑定2. 隐式绑定3. 显示绑定4. new 绑定5. 箭头函数的this6. 优先级7. 总结前提：文章讨论的都是非严格模式下this指向 1. 默认绑定例子1 ...

99+

2023-05-14

JavaScript this指向 JavaScript this
JavaScript中的this指向问题详解

前言相信我，只要记住本文的 7️⃣ 步口诀，就能彻底掌握 JS 中的 this 指向。先念口诀：箭头函数、new、bind、apply 和 call、欧...

99+

2024-04-02
一文搞懂JavaScript中的this指向问题

一、全局环境下的this指向在全局作用域下，this始终指向全局对象window，无论是否是严格模式！congsole.log()完整的写法是window.console.log(),window可以省略，window调用了console....

99+

2023-05-14

javascript
JavaScript 中this指向问题案例详解

总结全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ...

99+

2024-04-02
JavaScript函数中this指向问题详解

this关键字哪个对象调用函数，函数里面的this指向哪个对象。 **严格模式下：**在全局环境中，this指向的是undefined **非严格模式下：**在全局环境中，thi...

99+

2024-04-02
JavaScript函数this指向问题详解

目录一、函数内 this 的指向1、普通函数2、构造函数3、对象方法4、事件绑定方法5、定时器函数6、立即执行函数二、改变函数内部 this 指向1、call 方法2、apply ...

99+

2024-04-02
详解JavaScript原型对象的this指向问题

目录一、this指向二、修改this指向1、call()方法2、apply()方法总结一、this指向构造函数中的this 指向实例对象。那么原型对象this的指向呢？如下：...

99+

2024-04-02
JavaScript中的this指向问题怎么解决

这篇文章主要介绍了一文搞懂JavaScript中的this指向问题的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇一文搞懂JavaScript中的this指向问题文章都会有所收获，下面我们一起来看看吧。this的...

99+

2023-07-04
JavaScript中this指向问题怎么理解

这篇文章主要介绍“JavaScript中this指向问题怎么理解”，在日常操作中，相信很多人在JavaScript中this指向问题怎么理解问题上存在疑惑，小编查阅了各式资料，...

99+

2024-04-02
JavaScript中this指向的问题怎么解决

今天小编给大家分享一下JavaScript中this指向的问题怎么解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。1. 默...

99+

2023-07-05
JavaScript中this指向问题的示例分析

这篇文章将为大家详细讲解有关JavaScript中this指向问题的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。1. 箭头函数箭头函数排在第一个是因为它的 this 不会被改变，所以只要当前函数...

99+

2023-06-14
JavaScript this绑定与this指向问题如何解决

本篇内容主要讲解“JavaScript this绑定与this指向问题如何解决”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript this绑定与this指向问...

99+

2023-07-05
Vue中关于this指向的问题示例详解

目录由Vue管理的函数不被vue管理的函数this指向大致分类总结在Vue中，方法体里用this调用vue实例的数据，有时会指向window，导致调用失败报错。由Vue管理的函数 ...

99+

2024-04-02
JS中的this指向问题详细介绍

这篇文章主要介绍“JS中的this指向问题详细介绍”，在日常操作中，相信很多人在JS中的this指向问题详细介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JS中的this...

99+

2024-04-02
如何理解JavaScript函数this指向问题

这篇文章给大家介绍如何理解JavaScript函数this指向问题，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。一、函数内 this 的指向这些 this的指向，是当调用函数的时候确定的。调用方式的不同决...

99+

2023-06-21
基于Vue中this.$options.data()的this指向问题

目录this.$options.data()的this指向问题vue文档中有关于data的指向问题的解释vue骚操作之this.$options.data()重置vue组件的data...

99+

2024-04-02
详解React中的this指向

目录起因：经过：1.构造函数2.render 函数3.bind 和箭头函数结果：方法一：在构造函数中使用bind方法二：将箭头函数赋值给类的属性注意：性能存在差异打算记流水账一般细数...

99+

2024-04-02
JQuery中this的指向详解

JavaScript中的this不总是指向当前对象，函数或类中的this指向与调用这个函数的对象以及上下文环境是息息相关的。如在全局作用域调用一个含this的对象，此时当前对象的t...

99+

2024-04-02
如何解决js中this指向问题

本篇文章给大家分享的是有关如何解决js中this指向问题，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。JS中this指向问题相信我，只要记住本...

99+

2024-04-02
JavaScript this的原理以及指向详解

怎么判断this指向？ ①在全局环境中调用就指向window。 ②作为对象的方法调用就指向该对象。 ③作为构造函数调用就指向这个新创建的对象。 ④可...

99+

2024-04-02