2019-05-12

this指向

普通函数中的this:

1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj

2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window （常见的window的属性和方法有: alert, location,document,parseInt,setTimeout,setInterval等）(约定俗成)

3.在严格模式下,没有直接调用者的函数中的this是 undefined

4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

箭头函数中的this

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this

要整明白这些, 我们需要首先了解一下作用域链:

当在函数中使用一个变量的时候,首先在本函数内部查找该变量,如果找不到则找其父级函数,

最后直到window,全局变量默认挂载在window对象下

下面上代码：

var name = 'Nemo';
var MyObj = {
    name: 'Ni',
    getName1() {
        console.log(this.name, 1)
    },
    getName2: () => {
        console.log(this.name, 2);
        function ordinary() {
            console.log(this.name, 'ordinary')
        }
        ordinary();
    },
    getName3: () => {
        console.log(this.name, 4);
        (function () {
            console.log(this.name, 5);
        })();
        (() => {
            console.log(this.name, 6)
        })();
        arrowFun = (flag) => {
            flag = flag ? flag : '初始化';
            console.log(this.name, 7, flag);
        }
        arrowFun('执行arrowFun');
        setTimeout(function () {
            console.log(this.name, 8)
        }, 0);
        setTimeout(() => {
            console.log(this.name, 9)
        }, 0);

    }
}
console.log(this.name, 3);  //Nemo 3

MyObj.getName1();  //Ni 1
MyObj.getName2();  //Nemo 2 , Nemo ordinary
MyObj.getName3();  //Nemo 4 ,Nemo 5 ,Nemo 6 ,Nemo 7  ,Nemo 8, Nemo 9