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

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

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

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

  var name = "123";

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

  obj.print();

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

  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

  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

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

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

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

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

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

  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'

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

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

  const info = {
    bar: bar,
  };

  info.bar();

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

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

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

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