js中的this是个很妙的东西,你经常不知道它到底在指向谁,又是谁在调用它。
通用判断方法:
1.this总是指向它的直接调用者
var a={ user:'Artimis', fn:function(){ console.log(this.user) } } a.fn() //Artimis => this指向a var b=a.fn; b() //undefined => this指向window
2.如果没有找到直接调用者,则this指向window
function fn(){ var user='Artimis'; console.log(this.user) } fn() //undefined => this指向window
3.遇到return,如果返回的是对象,则this指向返回对象,否则指向函数实例
function A(){ this.user='Artimis'; return {} //return一个空对象 } var a=new A(); console.log(a.user) //undefined => this指向return的{} function B(){ this.user='Artimis'; return 1 //return一个数值 } var b=new B(); console.log(b.user) //Artimis => this指向b
4.使用call/apply/bind绑定的,this指向绑定对象
5.定时器(匿名函数)内没有默认的宿主对象,所以this指向window
6.箭头函数内部没有this,this指向外层最近的调用者
1> 箭头函数在调用时,不会生成自身作用域下的this和arguments
2> 不像普通函数一样在调用时自动获取this,而是沿着作用域链向上查找,找到最近的外部一层作用域的this,并获取
3> 在定义对象的方法/具有动态上下文的回调函数/构造函数中都不适用
改变this指针指向:
1.new操作符
new会创造一个对象实例,这个实例继承了new操作符右边的对象,因此在调用方法时,this会指向对象实例
function A(){ this.user='Artimis' } var a=new A(); console.log(a.user) //Artimis => this指向a
2.call/apply/bind
call和apply主要用于指定this的环境变量,第一个参数是什么,this就指向什么,如果是null,则指向window
var a={ user:'Artimis', fn:function(){ console.log(this.user) } } var b=a.fn;
b() //undefined b.call(a) //Artimis => this指向a b.call(null) //undefined => this指向window
bind是延迟的,会返回一个修改后的函数,可以自行决定执行的时间
var a={ user:'Artimis', fn:function(){ console.log(this.user) } } var b=a.fn; var c=b.bind(a) c() //Artimis => 延迟执行,自定义执行时间
var a={ fn:function(x,y){ console.log(x+y) } } var b=a.fn; var c=b.bind(a,2) //自定义参数x c(3) //5