JavaScript — this的用法总结

Oliver

About "this"

P1:如何使用this?

  • this 实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。

这话说起来容易,理解起来缺常常出现问题。请看如下几段代码

var a =1;
var obj = {
    a : 0,
    say: function(){ console.log(this.a) }
}
var fun = obj.say;
obj.say(); // 0
fun();     // 1

为什么会出现在这种情况?
明明我的fun和obj.say指向了同一个函数,而且都在window对象中调用,为什么出现了不同的结果?

本质上是这样的:

 obj.say()  等价于 obj.say.call(obj) //你不写.call(obj),浏览器自动帮你写
 fun() 等价于 fun.call(window) 
  1. 把obj当作this传入了say函数中,自然输出的是obj内的a
  2. 在window对象中执行fun(),就相当于把window当作this传入了该函数中,输出的就是window里的a!
  • 更加普遍化的,this其实时时刻刻都伴随着我们的代码

    • 你调用fun(),实际上是执行了fun.call(undefined)
    • 你调用obj.fun(),实际上执行了obj.fun.call(obj)

如果你传的是null 或者 undefined,那么默认将window传入(严格模式下默认是 undefined)

至此我们基本讲述了this的基本用法

P2:我们如何判断this指向?

  • 如果要判断一个运行中函数的 this 绑定,就需要找到这个函数的直接调用位置。找到之后就可以按优先顺序应用下面这四条规则来判断 this 的绑定对象。

    1. 由 new 调用,则绑定到新创建的对象。
    2. 由 call 或者 apply (或者 bind )调用?绑定到指定的对象。
    3. 由上下文对象调用?绑定到那个上下文对象。

      function say(){ console.log(this.name) }
      let person = { name:'Jam', age: 18, say: say}
      person.say() // 'Jam'
    4. 默认:在严格模式下绑定到 undefined ,否则绑定到全局对象。

P3:箭头函数中的this

  • 箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象,箭头函数中没有自己的this的(箭头函数无法使用call,apply),而箭头函数会默认使用父级的this。

我不知道其他人怎样理解,但如此的定义确实让我难以理解。何为定义时所在的对象?如何使用父级的this?接下来我用实例带你理解。

let obj = {
    prin: function(){
        //父级作用域 此处保存着父级的this
        setTimeout(()=>{
            console.log(this.num);
        },1000)
    }
}
let obj1 = { num:1 };
let obj2 = { num:2 };
  1. 首先我们直接执行prin方法试一下

    obj.prin(); // undefined

    分析
    obj.prin()等价于obj.prin.call(obj),
    我们将obj作为this,传到prin函数中此时箭头函数向上查找父级作用域中保存的this,
    顺理成章的找到了obj,于是去obj的环境内部寻找num
    遗憾的是obj内部并没有num属性,故打印undefined

  2. 尝试改变父级中this的指向

    obj.prin.call(obj1); // 1
    obj.prin.call(obj2); // 2

    分析
    父级中的this被赋值为obj1,箭头函数顺着obj1寻找,找到了num属性,打印了它的值
    同理父级中的this被赋值为obj2,箭头函数顺着obj2寻找,找到了num属性,打印了它的值

  3. 那我们不如直接给obj一个num属性试试?

    obj.num = 0;
    obj.prin(); // 0

    分析
    当obj中拥有了属性num,那么箭头函数一找就找到了它!

  4. 我们再来最后一个例子加深理解!当我把prin函数也用箭头函数书写呢?

    var num = 10,
    //“祖级作用域” window
    var obj = {
        num : 5;
        prin: ()=>{
            //父级作用域 此处保存着父级的this
            setTimeout(()=>{
                console.log(this.num);
            },1000)
        }
    }
    obj.prin()

    你猜猜会输出什么呢?
    ·
    ·
    ·
    答案是10!

    分析
    setTimeout中的箭头函数到父级作用域中寻找this,发现父级作用域也是箭头函数,于是再向外查 找,找到了“祖级作用域”window,恰好window有num属性,于是setTimeout中的箭头函数快乐地把 window.num打印了出来!

P4:其他一些总结

  1. 使用let,const声明的变量可能会不符合上述结论。
    原因是:let,const 在全局作用域下声明的变量并不会像 var 一样,被添加为window的属性,所以即使在全局中声明了let number = 1, 箭头函数等等也不会在全局作用域中找到 number!
  2. image.png

本文借鉴了 @方应杭 老师的思想 https://zhuanlan.zhihu.com/p/...

阅读 774

Slow Done, Achieve More.

67 声望
12 粉丝
0 条评论
你知道吗?

Slow Done, Achieve More.

67 声望
12 粉丝
文章目录
宣传栏