js this工作原理

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

 

转载于:https://www.cnblogs.com/artimis/p/9004134.html