this指向问题分别给box1,box2绑定了clickBox方法，如果点击的是box1，则clickBox中的this

1、事件调用

谁触发的this指向谁

<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>

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

2、函数内部this指向

2.1 非严格模式下直接调用方法时，this指向的是window

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

2.2 严格模式下,直接调用方法时，this指向的是undefined

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

2.3 对象中的this指向

this最终指向的是调用它的对象。即谁调用指向谁

如果函数被最外层对象调用，this指向的是它上一级的对象。

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

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

那么：

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

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

若将obj.b.fn方法复制给变量abc，

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

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

3.构造函数

new关键字使用时会有以下几步:

1.调用函数

2.自动创建一个空对象

3.把创建出来的对象和this进行绑定

4.如果构造函数（Fn）没有返回值，隐式返回this对象，如果(Fn)有返回值（如：return {d:'d'}）,则返回构造函数中的返回值。

第一种情况---没有返回值

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

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

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

若：

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

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

拓展

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

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

var mothod = prototype.mothod;
mothod()

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

第二种情况---有返回值

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

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

4、箭头函数

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

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

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