[JavaScript知识库]前端this指向

4种调用方式

this具体干了什么
this是为了得到当前的执行环境，在什么执行环境中运行就指向哪里。
由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，
this 就出现了,它的设计目的就是在函数体内部，指代函数当前的运行环境。

在es5种this有四种指向
第一种、

// 默认调用：指向window
var f = function () {};
var obj = { f: f };

// 单独执行
f()

// obj 环境执行
obj.f()

第二种

// 隐式调用：指向上一层调用者
var f = function () {
  console.log(this.x);
}

var x = 1;
var obj = {
  f: f,
  x: 2,
};

// 单独执行
f() // 1

// obj 环境执行
obj.f() // 2

第三种

// 显式调用：call，apply, bind
var a = 10;
var foo = {
    a: 20,
    fn: function(){
        console.log(this.a);
        function foo () {
        	console.log(this)  // window, 因为是默认调用 || 或者说独立调用                  
        }
        foo()
        // return foo // window
        // return foo() // window
    }
};
var bar ={
    a: 30
}
foo.fn.apply();    //10(若参数为空，默认指向全局对象)
foo.fn.apply(foo);//20
foo.fn.apply(bar);//30
foo.fn.call(bar);//30
foo.fn.bind(bar)();//30
 
foo.fn.call(1); // Number {1}
如果不传，或者传null，指向window，如果是原始包装对象，会指向原始包装对象如=> Number{1}

第四种

// new 调用
function Foo () { 
    console.log(this)
}
var fn = new Foo()
fn // Foo

优先级 默认 < 隐式 < 显式 < new

扩展
箭头函数和普通函数的区别
1，箭头函数指向和普通函数指向不同，箭头函数this指向父级的父级
2，隐式绑定，显式绑定对箭头函数无效
3，箭头函数拿不到arguments
4，不能new 箭头函数

有空在写