1. this指向问题

1. 事件调用环境

谁触发的this指向谁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: #999;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
</body>
<script>
    const box1 = document.querySelector('.box1');
    const box2 = document.querySelector('.box2');

    box1.onclick = clickBox;
    box2.onclick = clickBox;

    function clickBox (){
        console.log(this);
    };
</script>
</html>

如上代码，分别给box1,box2绑定了clickBox方法，如果点击的是box1，则clickBox中的this就会指向当前点击的box1元素。

2.函数内部this指向

(1)非严格模式下直接调用test时，this指向的是window

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

(2)非严格模式下直接调用test时，this指向的是window

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

(3)对象中的this指向

this最终指向的是调用它的对象
函数呗多层对象所包含，如果函数被最外层对象调用，this指向的是它上一级的对象。

b是obj对象上的一个方法，通过obj.b或者window.obj.b执行时，是b方法是b的上一级obj调用的，this指向obj;

var obj = {
    a:'11',
    b:function(){
        console.log(this);//obj
    }
};
obj.b();
window.obj.b();

同理，调用fn的时候，fn是由上一级b调用的，所以this指向的是b。

var obj = {
    a:'11',
    b:{
        fn:function(){
            console.log(this);// b
        }
    }
};
obj.b.fn();

将obj.b.fn方法复制给变量abc,此时fn方法并没有执行，而是将fn赋值给abc,此时abc也就是一个function了，当执行abc时，实际是window.abc，则此时this指向的上一级就是window。

var obj = {
    a:'11',
    b:{
        fn:function(){
            console.log(this);//window
        }
    }
};
let abc = obj.b.fn;
console.log(typeof abc);//function
abc();

3.构造函数

构造函数需要使用new关键字，new关键字使用时会有以下几步：

1.调用函数
2.自动创建一个空对象
3.把创建出来的对象和this进行绑定
4.如果构造函数（Fn）没有返回值，隐式返回this对象，如果(Fn)有返回值（如：return {d:'d'}）,则返回构造函数中的返回值。

判断this指向(没有返回值)

function Fn (){
    this.num = 1;
}
Fn.num = 2;
Fn.prototype.num = 3;
Fn.prototype.method = function(){
    console.log(this);
};

此时实例化Fn,newFn就是Fn构造函数，调用newFn.method时，method就指向了Fn，因为Fn内部没有this.method方法，所以会查找prototype上的method,此时method方法中的this指向的是Fn构造函数；

newFn.num执行时，发现构造函数内有this.num，则输出的是1，如果this.num=1不存在的话，则会调用prototype.num，那个时候newFn.num就会是3了。

而直接调用Fn.num就会查找的是Fn构造函数上的num，
即：Fn.num

var newFn = new Fn();
newFn.method();
console.log(newFn.num);
console.log(Fn.num);// 2

下面定义prototype为Fn.prototype，则调用method方法时，实际就是调用的prototype上的method,此时method的上一级是Fn的prototype，所以this指向的是Fn.prototype，如果method中输出this.num，则此时num指向的就是Fn.prototype.num = 3;,即method中的num是3;

var prototype = Fn.prototype;
prototype.method();

如果再次将prototype.method赋值给method变量，则执行method时，上一级实际为window，此时method中的this就是window对象了（非严格模式，严格模式为undefined）

var method = prototype.method;
method();

判断this指向（有返回值）
如果构造函数有返回值,并且返回值是对象、数组、函数、Date、RegExp等内置对象，此时在调用Fn上的相关方法指向的都是返回的对象，如下返回的{dd:'11'}对象

function Fn (){
    this.num = 1;
    return {
        dd:'11'
    }
}
Fn.num = 2;
Fn.prototype.num = 3;
Fn.prototype.method = function(){
    console.log(this);
};

此时newFn实际就是{dd:'11'}，执行newFn.method就会报错，因为此时newFn指向的是返回值，而不是Fn构造函数了，{dd:'11'} 上并没有method方法。

var newFn = new Fn();
newFn.method();

4.箭头函数

箭头函数本身没有this和arguments，在箭头函数中引用this实际调用的是定义的上一层作用域的this。(对象是没有作用域的)

如下，在上文中我们知道对象中的方法执行时，this指向是指向调用它的上级的。在obj.c方法调用时是没有问题的，但是如果是箭头函数，则箭头函数中的this在定义箭头函数的时候就被指定到上一层作用域了，而对象没有作用域，因d方法中的this在非严格模式下就指向上层的window对象了。

var obj = {
    c:function(){
        console.log(this);
    },
    d:()=>{
        console.log(this);
    }
};
obj.c();// obj
obj.d();// window

5.修改this指向

可通过call,apply,bind实现