【JavaScript】this指向

this指向

一、什么是this

是一个js内的关键字
是一个使用在作用域内的关键字
1. 要么使用在全局 (this => window)
2. 要么使用在函数内

二、函数内的this指向

概念 不管函数怎么定义，不管函数在哪定义，只看函数调用方式
函数的调用方式决定了函数的this

1. 普通调用

函数名()
this ===>指向 window

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

  fn();

2. 对象调用

                var obj = {
                    a: function() {}
                }
                obj.a()

对象名.函数名()
this ===>指向小数点 .前面是谁就是谁

  function fn() {
      console.log(this);
      console.log(this.name);
    }

    // 把fn这个函数当做一个值存在对象中键名为f的位置
    var obj = {
      name: "小花",
      f: fn,
    };
    obj.f();

3. 定时器调用

setTimeout(函数, 数字)
setInterval(函数, 数字)
this ==>指向 window

  function fn() {
      console.log(this);
    }
    setTimeout(fn, 2000);

    var username = "tom";
    function fn() {
      console.log(this);
      console.log(this.username);
    }
    var obj = {
      username: "小花",
      f: fn,
    };
    setTimeout(obj.f, 2000);

4. 事件处理函数

事件源.on事件类型 = 函数
事件源.addEventListener(事件类型,函数)
this => 指向事件源

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

    function fn() {
      console.log(this);
    }
    var obj = {
      username: "小花",
      f: fn,
    };
    document.onclick = obj.f;
    

  function fn() {
    console.log(this);
  }
  var obj = {
    username: "小花",
    f: fn,
  };
  document.onclick = function () {
    console.log(this, 1);
    setTimeout(obj.f, 2000); // window
  };

三、强制改变this指向

不管this指向哪， 我让this指向哪里，它就要指向哪里

1. call

语法 函数名.call(参数1, 参数2)
参数
参数1 该函数内的this指向(新指向)
参数2 依次给函数进行形参赋值
特点 立即调用函数

  function fn(a, b) {
      console.log(this);
      console.log(a, b);
    }
    //   fn(100, 200);
    //   fn.call(document);
    var obj = { a: 100, b: 200 };
    //   fn.call(obj, 1000);
  fn.call(obj, 1000, 2000, 3000);

2. apply

语法 函数名.apply(参数1, 参数2)
参数
参数1 该函数内的this指向(新指向)
参数2 是一个数组，内部的每一项都是给函数形参赋值
特点 立即调用函数

  function fn(a, b) {
      console.log(this);
      console.log(a, b);
    }
    //   fn(100, 200);
    //   fn.apply(document, []);
    fn.apply(document, [1000, 2000, 3000]);

3. bind

语法 函数名.bind(参数)
参数
参数1 该函数内的this指向(新指向)
从参数2开始，依次给函数的形参赋值
特点
1. 不会立即调用函数，而是返回一个新函数
2. 有一个返回值，是一个和原始函数一模一样的新函数，只不过被锁死了this

  function fn(a, b) {
      console.log(this);
      console.log(a, b);
    }
    fn.bind(document, 1000, 2000);
  // 把bind的返回值执行
    var res = fn.bind(document, 1000, 2000);
    res();
  // 把bind的返回值执行
    fn.bind(document, 1000, 2000)();