JS中this的指向问题(全)

时间: 2018-06-29阅读: 163标签: this

this关键字在js中的指向问题不管是工作还是面试中都会经常遇到,所以在此对它进行一下总结。


一、全局作用域中

this在全局作用域中指window。

//全局作用域中
console.log(this)//window
a =1;
console.log(this.a) //相当于window.a 1
//普通函数中
function fn(){
    console.log(this)
}
fn()//window


二:闭包中指window

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


三:函数调用模式:谁调用就指谁

这里obj.fn()是obj去调用fn,而obj.name=”b”,所以this.name=”b”; 
而var fn=obj.fn的时候,fn是window.fn,因此fn()的结果是”a”. 
注意:this指向的是上一级调用它的对象,比如obj.fn()与window.obj.fn()都是输出b.

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


四:构造函数中,this指实例对象。

    function Person(name,age) {
        this.name=name;
        this.age=age;
    }
    Person.prototype.sayHi=function () {
        console.log('I am '+this.name+',I am '+this.age+' years old.')
    }
    var p1=new Person('张三',20)
    p1.sayHi() //I am 张三,I am 20 years old.


五:apply/call改变this的指向

在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。

主要区别为:apply的第二个参数是散列分布,call则可以是一个数组


六:定时函数中:this指向window

var name = 'window';
var obj = {
    name: 'obj',
    fn: function () {
        var timer = null;
        clearInterval(timer);
        timer = setInterval(function () {
            console.log(this.name);   //window
        }, 1000)
    }
}


七:bind改变this指向

var name = 'window';
var obj = {
    name: 'obj',
    fn: function () {
        var timer = null;
        clearInterval(timer);
        timer = setInterval(function () {
            console.log(this.name);   //obj
        }.bind(this), 1000)
    }
}

//bind()的作用类似call和apply,都是修改this指向。但是call和apply是修改this指向后函数会立即执行,
//而bind则是返回一个新的函数,它会创建一个与原来函数主体相同的新函数,新函数中的this指向传入的对象。
//也因此call/apply不适用于定时函数改变this指向


八:ES6箭头函数:函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

  function foo() {
   setTimeout(() => {
     console.log('id:', this.id);
   }, 100);
 }

 var id = 21;

 foo.call({ id: 42 });
 // id: 42