JS this指向问题

JS this 关键字

1. 定义

在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定），this 关键字是函数运行时自动生成的一个内部对象，只能在函数内部使用，总指向调用它的对象
var a = 10;
var obj = {
 a: 20
};
function fn() {
 console.log(this.a);
}
fn();//10

2.绑定规则

根据不同的使用场合，this有不同的值，主要分为下面几种情况：
 1. 默认绑定 
 2. 隐式绑定 
 3. new绑定 
 4. 显示绑定

//默认绑定(严格模式下，不能将全局对象用于默认绑定，this会绑定到undefined，只有函数运行在非严格模式下，默认绑定才能绑定到全局对象)
var name ='mike';
function fun(){
console.log(this.name)
}
fun()// mike

//隐式绑定(函数还可以作为某个对象的方法调用，这时this就指这个上级对象)
var name = 'mike';
var obj = {
name:'jerry',
getName: function(){
      console.log(this.name);
}
}
obj.getName();//jerry
var fun = obj.getName;
fun();//mike(不存在上一级，默认绑定)**this永远指向的是最后调用它的对象**

//new绑定(通过构建函数new关键字生成一个实例对象，此时this指向这个实例对象)
var a = 2;
function fun(){
this.a = 1;
}
var fn = new fun();
console.log(fn.a);//1
//new过程遇到return一个对象，此时this指向为返回的对象,如果返回一个简单类型的时候，则this指向实例对象
function fun() {
 this.name = 'mike',
 return {name:'jerry'};
}
var fn = new fun();
console.log(fn.name);//jerry
function foo() {
this.age = 18;
return 1;
}
var fn = new foo();
console.log(fn.age)//18
//注意的是null虽然也是对象，但是此时new仍然指向实例对象

// 显示修改(通过apply()、call()、bind()改变函数的调用对象)
var name = 'jerry';
var obj = {
name:'mike',
foo: function foo(){
 console.log(this.name);
}
}
var fun1 = obj.foo;
fun1();//jerry
obj.foo.apply(obj);//mike

// 箭头函数（编译时绑定）
var name = 'jerry';
var obj = {
 name: 'tom',
 foo: ()=>{
 console.log(this.name);
 }
}
obj.foo();//jerry

3.优先级

//显示绑定 > 隐式绑定优先级 
function foo() {
    console.log( this.a );
}

var obj1 = {
    a: 2,
    foo: foo
};

var obj2 = {
    a: 3,
    foo: foo
};

obj1.foo(); // 2
obj2.foo(); // 3

obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2
######################
// new绑定 > 隐式绑定
function foo(something) {
    this.a = something;
}

var obj1 = {
    foo: foo
};

var obj2 = {};

obj1.foo( 2 );
console.log( obj1.a ); // 2

obj1.foo.call( obj2, 3 );
console.log( obj2.a ); // 3

var bar = new obj1.foo( 4 );
console.log( obj1.a ); // 2

// new绑定优先级 > 显示绑定优先级 > 隐式绑定优先级 > 默认绑定优先级
function foo(something) {
    this.a = something;
}

var obj1 = {};

var bar = foo.bind( obj1 );
bar( 2 );
console.log( obj1.a ); // 2

var baz = new bar( 3 );
console.log( obj1.a ); // 2
console.log( baz.a ); // 3