【JS】this指向

一、this指向的四种规则

1.默认绑定规则

默认指向：指向window

独立调用：指向window

对象指向，比较的是引用地址。

console.log(this === window);      //true
console.log({} === {});     //false
//函数的独立调用
function test(){
    console.log(this === window);     //true
}
test();

2.隐式绑定规则

obj.foo()  //对象调用

谁调用就指向谁。

let a = 0;
let obj = {
    a:2,
    foo:function(){
        console.log(this) //obj
    }

}
obj.foo();

这里foo.function是obj对象里面的foo属性，是一个函数。当我们用对象的属性的方式调用这个方法的时候，那么this指向obj。

但如果foo写的是箭头函数，this就指向window了。

let a = 0;
let obj = {
    a:2,
    foo:() => {
        console.log(this) //window or global object
    }

}
obj.foo();

那么下面两个this是否相同呢？

这两个this自然不是同一个this，因为不同函数执行产生不同的AO，所以每个函数有自己的this指向，但指向有可能相同（由当前执行方式决定）。

这里的相同说的是指向对象是同一个，但是他们的函数内部是不相等的，地址不同。

let a = 0;
let obj = {
    a:2,
    foo:function(){
        console.log(this) //obj

        function test(){
            console.log(this); //window
        }
        test(); //独立调用就指向window
    }

}
obj.foo(); //这里是obj调用

下面这里立即执行我们要看执行环境，指向相应的全局对象。

这里立即执行函数全都指向window，因为这里是浏览器环境。

let a = 0;
let obj = {
    a:2,
    foo:function(){
        console.log(this) //obj

        //立即执行函数全都指向window
        (function(){ 
            console.log(this); //window
        })()
    }

}
obj.foo();

闭包：闭包就是内层函数引用外层函数的变量。当函数调用的时候，导致内部新函数被定义，并抛出内部被定义的新函数。

作用：延长变量的声明周期。

let a = 0;
let obj = {
    a:2,
    foo:function(){
        console.log(this) //obj
        function test(){
            console.log(this); //window
        }
        return test;
    }

}
obj.foo()(); //调用的时候依旧是独立调用相当于test()

隐式丢失

变量赋值

当方法被赋值的时候存在一种例外的现象，它调用了却没有指向它，管这种现象叫隐式丢失。其实本质还是看函数怎么执行的就可以了。也可以去看一下=赋值的原理。

我们知道this指向是在函数执行时产生的。而下面这段代码中是先将obj对象的属性赋值给b，然后再执行的。所以这里foo只是把只想空间的地址赋给b了，但是空间里的this指向没有任何改变。

let a = 0;
function foo(){
    console.log(this)
}
let obj = {
    a:2,
    foo:foo
}
obj.foo();  //obj 对象调用
let b = obj.foo;
b();    //window 独立调用
let c = foo;
c();    //window 独立调用
foo();  //window 独立调用

参数赋值

函数传参过程就是变量赋值，应为js只有按值传递，那么这就也会考虑到隐式丢失的问题。

let a = 0;
function foo(){
    console.log(this);
}
function b(x){
    x();    //window
}
let obj={
    a:2,
    foo:foo
}
//预编译的过程中，实参被赋值为形参。（值的拷贝的过程，浅拷贝）
b(obj.foo);

补充一下预编译的5步：

1. 创建 AO = {}

2. 找变量声明、形参、赋值为undefined，挂载到AO上

3. 实参和形参统一

4. 找函数声明，赋值函数体

5. 语句执行

父函数有能力决定子函数的 this指向。

new 把函数当做构造函数执行，this指向实例。

let a = 0;
function foo(){
    console.log(this);
}
function b(x){
    //父元素改变子元素的this指向的方式：
    x(obj); //window
    new x(); //强行指向实例之后的对象foo
    x.bind(obj)(); //强行指向obj
}

//api 接口中指明的

//回调函数：父函数，子函数
var arr = [1,2,3];
arr.forEach(function(item, idx, arr){
    console.log(this); //window
},this)
arr.sort(function(a, b){
    console.log(this); //window
    return a-b;
})
setInterval(function(){
    console.log(this); //window
})

let obj={
    a:2,
    foo:foo
}
//预编译的过程中，实参被赋值为形参。（值的拷贝的过程，浅拷贝）
b(obj.foo);

3.显示绑定

改变this指向三兄弟：call, apply, bind

let a = 0;
function foo(){
    console.log(this);
}

let obj={
    a:2,
    foo:foo
}

let bar = obj.foo;

obj.foo();
bar.call(obj);
bar.apply(obj);
bar.bind(obj)();

let a = 0;
function foo(a,b,c,d,e){
    console.log(a + " " + b + " " + c + " " + d + " " + e);
}

let obj={
    a:2,
    foo:foo
}

let bar = obj.foo;

obj.foo(1,2,3,4,5);
bar.call(obj,1,2,3,4,5);
bar.apply(obj,[1,2,3,4,5]);
bar.bind(obj)(1,2,3,4,5);

js中认为一切皆对象，因为会存在相应的包装类类型。

包装类包括三种：Boolean、String、Number

像下面这种情况，第一个传参不是对象时，会指向对应的包装类。

强绑定绑定的是对像，但是像 null 和 undefined 没有包装类，意味着绑定失败，采用默认绑定方式指向window。

 4. new 绑定

只有构造函数会用到new，函数在执行以后，实例化之后的对象。

function Person(){
    this.a = 1;
    return this; //函数在执行以后，实例化之后的对象
}
var person = new Person();
console.log(person);

return 的值为引用值，改变当前的this指向，函数内部的this指向就不会指向实例之后的对象。所以在ES6中规定了在执行时，规定只能通过new的方式来执行，在返回值的部分不会手动返回。

总结

通过当前函数的调用方式，就能清楚知道this指向应该指向什么。

new Person();   //new执行
foo();  //函数独立调用
obj.foo(1,2,3,4,5);     //对象调用
bar.call(obj,1,2,3,4,5); 
bar.apply(obj,[1,2,3,4,5]);
bar.bind(obj)(1,2,3,4,5);

练习

var name = "222";
var a  = {
    name:"111",
    say: function(){
        console.log(this.name);
    }
}
var fun = a.say;
fun(); 
a.say();

 fun独立调用,this指向window，所以打印的一定是name。所以结果是：

二、this绑定的四种规则的优先级

优先级：new绑定 > 显示绑定 > 隐式绑定规则 > 默认规则绑定

立即执行函数在使用call、aplay、bind的时候存在优先级问题。

下面这个例子中有 call 指向 obj，没 cal l指向 window，所以 call 的优先级更大。

下面这段代码也能体现 new 优先级更高。

function foo(b){
    this.a = b;
}
var obj1 = {}
var bar = foo.bind(obj1);
bar(2);

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

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

console.log(baz.a);    //3

解释一下第二个输出，这里我们定义了一个函数 foo，它接受一个参数 b 并将其赋值给 this.a。然后，我们创建了一个空对象 obj1 和一个新的函数 bar，该函数是使用 bind 方法将 foo 函数绑定到 obj1 对象上的。接着，我们调用了 bar(2)，这样 foo 函数会被执行，将 obj1.a 的值设置为 2。

下面这个例子可以清晰看出 显示绑定 > 隐式绑定

function foo(){
    console.log(this.a);
}
var obj1 = {
    a: 1,
    foo: foo
}
var obj2 = {
    a: 2,
    foo: foo
}

obj1.foo()
obj2.foo()

obj1.foo.call(obj2);
obj2.foo.call(obj1);

三、箭头函数中的this

箭头函数内部没有this指向，箭头函数的this指向是由外层函数的作用域决定的。

let a = 0;
function foo(){
    let that = this
    function test1(){
        console.log(this); //window
    }
    var test2 = () =>{
        console.log(this); //obj
    }
    test1();
    test2();
}
var obj = {
    a: 1,
    foo: foo
}
obj.foo();

1. 默认绑定规则（独立调用对箭头函数）无效

let a = 0;
function foo(){
    console.log(this); //obj1
    var test = () =>{
        console.log(this); //obj1
    }
    return test
}

var obj1 = {
    a: 1,
    foo: foo
}

var obj2 = {
    a: 2,
    foo: foo
}

obj1.foo()(); //默认绑定规则（独立调用对箭头函数）无效

2. 显示绑定无效

let a = 0;
function foo(){
    console.log(this); //window
    //function test(){
    //    console.log(this); //obj2
    //}
    var test = () =>{
        console.log(this); //window
    }
    return test
}

var obj1 = {
    a: 1,
    foo: foo
}

var obj2 = {
    a: 2,
    foo: foo
}

var bar = foo().call(obj2); // 显示绑定无效

3. 隐式绑定规则无效

let a = 0;

var obj1 = {
    a: 1,
    foo: () =>{
        console.log(this); //window(向上找全局的this)
    }
}

obj1.foo(); //隐式绑定规则无效

4. new不能实例箭头函数

箭头函数不允许作为构造函数使用

总结

箭头函数：所有绑定规则不适用。

箭头函数的 this 取决于父环境中的 this指向（ => 不存在 this指向 ）

换句话说 箭头函数中没有自己的 this 与 construtor，因为没有 construtor 所以无法实例化(new)操作，它要的 this 没有自然会向父级作用域链查找，所以它的 this 是父级的 this。