javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript this指向

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

作者:敲代码的彭于晏

JavaScript中this指向的问题是面试中常常会问到的,所以本文就来通过一些简单的示例为大家详细讲讲,文中的示例代码讲解详细,需要的可以参考一下

前提:文章讨论的都是非严格模式下this指向

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'

例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指向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文