有关函数中 this 的指向问题总结

this 指向的几种情况:

一、 指向 window

  • 函数的一般调用,函数名+括号 (备注:非箭头函数)
  • 匿名函数自执行
  • 定时器直接调用
  • 箭头函数暴露在全局

二、 指向点(.)前面的主

  1. 事件元素
    事件触发的元素,事件函数(不能是箭头函数)被触发的时候,事件函数内的this,指向事件元素
<body>
  <div id="main"></div>
  <script>
    let main = document.querySelector("#main");
    main.onclick = function () {
      console.log(this); // <div id="main"></div>
    }
  </script>
<body>
  1. 对象
    就是方法名.前面的对象(前提:不被定时器直接调用,不能是箭头函数)
    let obj = {
      fn: function() {
        console.log(this); // {fn: ƒ} 就是 obj
        return this;
      }
    }

    let xxx = obj.fn();
    console.log(obj === xxx); // true

三、 指向 实例
new 了之后就指向实例(默认 return 是 this),return 上方 this 指向构造函数的实例

构造函数的 return 默认是 this ,如果手动 return 了一个简单类型 ,那 return 的还是 this。如果手动 return 了一个引用类型 ,那 return 的就是这个引用类型。

    class father { // 注册一个类
      fn = () => {
        return this
      }
    };

    let child = new father; // 实例 child 继承 father 这个类

    console.log(father === child.fn()); // false
    console.log(child === child.fn()); // true => 验证可知 this 指向的地址是这个实例

补充知识点:继承原型/原型链

四、 指向 undefined

  • 原来指向 window 的,在严格模式 'use strict' 下, 会指向 undefined

严格模式:1. 声明变量必须使用 var 或 let。2. arguments 是不和形参相映射的。3. this 指向一般是 undefined

五、 指向 父级作用域

  • this 指向 箭头函数 的父级,只看定义时父级的域(比如,箭头函数在全局下,this 指向 window)
function fn() {
  console.log(this); // Window => fn 函数的一般调用,this 指向 Window 
};

let obj = {
  fn1: function (fn) {
    console.log(this); // {name: 'obj', fn1: ƒ} => obj.fn1()调用,this 指向方法名. 前面的对象 obj
    fn();    
    arguments[0]() // Arguments 对象 => 用 arguments[0]() 调用,this 指向 Arguments 对象   
  },
  fn2: () => {
    console.log(this); // Window => 箭头函数,只看被调用时的父级作用域
  },
  name: "obj"
};

obj.fn1(fn);
posted @ 2018-11-05 22:10  真的想不出来  阅读(410)  评论(0编辑  收藏  举报