关于this指向的问题

---

1.web全局环境下的this指向window

    console.log(this); // window

2.函数独立调用

非严格模式下，函数内部的this指向window

严格模式下，为undefined

    function fn() {
        console.log(this);
    }
    fn(); // window
    window.fn();

    'use strict'
    function fn() {
        console.log(this);
    }
    fn(); // undefined

3.被嵌套的函数独立调用时，this默认指向window

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

4.闭包中this默认指向window

var obj3 = {
    a: 2,
    foo: function() {
        console.log(this); // obj3
        var c = this.a; // 2
        return function test() {
            console.log(this); // window
            return c;
        }
    }
}
var fn = obj3.foo();
console.log(fn()); // 2

二、隐式绑定

1.当函数当做方法使用时，this指向直接对象

function foo() {
    console.log(this); // obj4
}
var obj4 = {
    foo: foo
}
obj4.foo(); 

function foo() {
    console.log(this); // obj5
}
var obj4 = {
    foo: foo,
    obj5: {
        a:1,
        foo: foo
    }
}
obj4.obj5.foo(); 

function foo1() {
    console.log(this); // obj6
}
var obj6 = {
    a: 2,
    foo: foo1
}
var bar = obj6.foo(); // 在这就已经执行了方法

三、隐式丢失

1.被隐式绑定的函数丢失了绑定对象，从而默认绑定到window

function foo1() {
    console.log(this); // window
}
var obj6 = {
    a: 2,
    foo: foo1
}
var bar = obj6.foo; // 在这并未执行方法
bar(); // 在这执行了方法

2.参数传递

function foo3(){
    console.log(this);
}
function bar1(fn) {
    // 默认赋值 fn = obj7.foo
    fn(); // window
}
var obj7 = {
    a: 1,
    foo: foo3
}
bar1(obj7.foo);

3.setTimeout() 和 setInterval() 第一个参数的回调函数中的this 默认指向window

setTimeout(function() {
    console.log(this); // window 
}, 0)

四、显示绑定

1、call和apply

var obj = {
    a:1
}
function foo() {
    console.log(this);
}
foo.call(obj); //obj
foo.apply(obj); //obj

2、bind

var obj = {
    a:1
}
function foo() {
    console.log(this); // obj
}
var fn = foo.bind(obj);
fn();

call和apply两个主要用途就是

1.改变this的指向

2.方法借用

3.数组的forEach(fn,对象)

function fn(el) {
    console.log(el);
    console.log(this); // window
}
var arr = [1,2,3];
arr.forEach(fn);

五、new绑定

1.new关键字来执行函数，相当于构造函数来实例化对象，则this指向当前实例化的对象

function Fn() {
    console.log(this); // Fn{}
}
var fn = new Fn();

六、优先级

new绑定 > 显示绑定 > 隐式绑定 > 默认绑定

function fn1(b) {
    this.a = b;
    console.log(this); 
}
var obj = {c:2};
var bar = fn1.bind(obj);
bar(4); // obj
 
var baz = new bar(3); // fn1 {}
console.log(baz.a); // 3，因为new的优先级比bind更高

七、箭头函数

1.箭头函数中的this指向外层函数（非箭头函数）的作用域中的this指向。

所有绑定规则不适应箭头函数。 对象箭头函数的 this

箭头函数不绑定this关键字箭头函数中的this，指向的是函数定义位置的上下文this。

箭头函数中的this指向是它所定义（声明）的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁。

function foo () {
    console.log(this); // obj
    var test = () => {
        console.log(this); // obj
    }
    test();
}
var obj = {
    a: 1,
    foo: foo
}
obj.foo();