【this】谈一下js中this的指向和箭头函数的特殊情况

webjing

this的指向一直都是js理解中比较困难的部分,这次把遇见的情况都展示出来;另外ES6新增的箭头函数不属于这个规律,特殊看待。

this的指向 大致分为以下几种情况

1.普通函数 --- this指向函数的调用对象

function f() {  
    var user = 'XX';  
    console.log(this.user);  //undefined
    console.log(this);  //window
}

f();

这里f 的调用等同于window.f(); 所以f函数内部this指向的是window

2.对象方法中调用 ---- this 指向上级对象

var obj = {
    user:"xxx",
    fn:function(){
        console.log(this.user);  //xxx
    }
}
obj.fn();

【注1】这里要注意一点,就是在对象中可能有多层嵌套的对象,但是this指向的都是他调用地方的上级对象

var obj = {
    user:"xxx",
    b: {
        user: "bbb",
        fn:function(){
            console.log(this.user);  // bbb
        }
    }
    
}
obj.b.fn();

如上,虽然是在obj里面this调用,但是因为是在obj.b这个对象中,所以this指向的是 obj.b


【注2】注意不能只看上级对象,更关键的是调用对象

var obj = {
    user:"xxx",
    b: {
        user: "bbb",
        fn:function(){
            console.log(this.user);  // undefined
        }
    }
    
}
var f = obj.b.fn;
f()

如上,this其实是在f执行的时候调用的,这时候,f的this的调用对象是window,那么就可以理解window.user为undefined

【小结】在对象方法中的this的指向主要是看他最终调用的位置,它是由谁调用的,如果调用对象有多层,this指向的是this的上级对象

3.构造函数 --- this指向new出来的对象

function Fn(){
    this.user = "xxx;
}
var a = new Fn();
console.log(a.user); //xxx

new 的过程其实也是初始化了一个新的对象,然后用新的对象调用原先的函数 Fn.call(a) 这个情况跟下面这种情况类似了。

4.apply, call, bind 通过改变函数的调用对象而改变this的指向

function foo() {
  console.log('id:', this.id);  //42
}

var id = 21;

foo.call({ id: 42 });   //foo函数的调用对象变成了 {id: 42},所以this指向发生了变化

5.箭头函数this的指向 ---- this指向其定义时候的对象


clipboard.png

图1: 箭头函数,this指向定义时候的对象,foo在window作用域下,所以this指向window; ===> 箭头函数的外层,foo函数的this就是window对象



clipboard.png

图2:箭头函数,this指向定义时对象,那么由于foo.call 此时定义时候this指向了{ id: 42}对象,所以这里id输出的是42;====> 箭头函数的外层,foo函数的this就是{ id: 42} 对象

【小结】箭头函数的this在定义时所在的对象,其实质是因为箭头函数没有自己的this,用的是外层的this


【结尾】普通函数的this是看的是它执行时候的调用对象; 箭头函数的this与它的执行没有关系,在定义的时候就决定了;

阅读 3.5k
5 声望
0 粉丝
0 条评论
你知道吗?

5 声望
0 粉丝
文章目录
宣传栏