js中this指向问题

1. 当this直接在函数体中时,this指向window

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

2. 当函数作为一个对象的属性时,函数中的this指向这个对象

 var obj = {
        name:'小明',
        hobby:function() {
            console.log(this); //{name: "小明", hobby: ƒ()}
        }
    }
    obj.hobby()

3. 在事件中,this指向调用者

<div id="box">点击</div>
document.getElementById('box').addEventListener('click',function(){
        console.log(this);  //<div id="box">点击</div>
    })

4. 构造函数中的this指向当前实例化对象

 function Person(name,age) {
     this.name = name
     this.age = age
     console.log(this); //Person {name: "小明", age: 18}
 }
 var one = new Person('小明',18)

5. 原型上的this指向调用者

var fn = function() {}
fn.prototype.hobby = function() {
    console.log('play');
    console.log(this); //fn {}
}
var fn = new fn()
fn.hobby()

6. this在定时器中指向window

 var name = 'my name is window';
    var obj = {
        name: 'my name is obj',
        fn: function() {
                console.log(this.name); //my name is obj
            setTimeout(function() {
                console.log(this.name); //my name is window
            },1000)
        }
    }
    obj.fn()
// 显而易见,对象中属性是函数时this指向这个对象,但是在定时器中,指向发生改变,指向了window

7. this在箭头函数中的指向是继承而来的; 默认指向在定义它时所处的对象(宿主对象),也就是外层代码块的this

 var name = 'my name is window';
    var obj = {
        name: 'my name is obj',
        fn: function() {
            setTimeout(()=> {
                console.log(this.name);  //my name is obj
            },1000)
        }
    }
    obj.fn()
// 这个例子和上个例子唯一的区别是将定时器的函数改成了箭头函数.但是打印的结果发生了变化,现在指向了外层的对象obj.
// 这也就是所说的箭头函数会改变this指向,继承它外层的this指向

最后总结:一般情况this指向它的调用者,在定时器中this一般指向window,在箭头函数中继承它外层this的指向.然后需要注意的是,
使用call, apply, bind(ES5新增)绑定的this指的是 绑定的对象