JavaScript中this指向问题

在使用settimeout和settimeinterval时使用this会导致this指向全局对象而出错,查询了一些资料

this的四种机制

  1. 函数中调用
    默认绑定全局变量window,因为函数在全局作用域中被调用

    1
    2
    3
    4
    5
    var name="xl";
    function person(){
    console.log(this.name);
    }
    person(); //输出 xl
  2. 对象中的方法 obj.fn
    this指向当前对象

    1
    2
    3
    4
    5
    6
    7
    8
    var name="XL";
    var person={
    name:"xl",
    showName:function(){
    console.log(this.name);
    }
    }
    person.showName(); //输出 xl
  3. 构造函数中的this绑定
    执行new时,构造函数中的this就被绑定到当前的新建实例中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function  Person(name){
    this.name=name;
    }
    var personA=Person("xl");
    console.log(personA.name); // 输出 undefined
    console.log(window.name);//输出 xl
    //上面代码没有进行new操作,相当于window对象调用Person("xl")方法,那么this指向window对象,并进行赋值操作window.name="xl".

    var personB=new Person("xl");
    console.log(personB.name);// 输出 xl
  4. 显式绑定
    利用apply,call,bind的方法绑定this指向

ES6中的常用解决方法

利用ES6中箭头函数

1
()=>{}