美文网首页JQuery
this到底指向哪?

this到底指向哪?

作者: 流光号船长 | 来源:发表于2018-02-25 22:23 被阅读0次

老生常谈的问题了,之前一直有些模糊,这次争取一次写清楚。

指向只与调用有关

不论代码多么复杂我们只关心到底是谁最后调用的this就可以了。

  • 来看一个例子:
var obj = {
    foo: function(){
      console.log(this)
    }
  }
  
  var bar = obj.foo
  obj.foo() // obj
  bar() //  window

为什么最后两行所打印出的this不同?还是那句话 “谁最后调用的this,this就指向谁。”

  • 先看第一行调用foo()函数的对象是obj,所以this指向obj。
  • 前面没有调用的对象那么就是全局对象 window,所以调用bar()函数的对象是全局window,相当于window.bar(),所以this指向window(严格模式下全局为undifined)

改变this指向的方法

箭头函数下的this

箭头函数下的this有些特殊,函数体内的this对象就是定义时的所在的对象,而不是使用时所在的对象。

  • 例子
function Timer(){
    this.s1 = 0
    this.s2 = 0

    setInterval(()=> this.s1++,1000)
    setInterval(function(){
        this.s2 ++
    },1000)

}

let timer = new Timer()

setTimeout(() => console.log(timer.s1),3100) //  3
setTimeout(() => console.log(timer.s2),3100) //  0

上面的例子,Timer函数内部设置了两个定时器,分别使用了箭头函数和普通函数,箭头函数的this指向函数定义时所在的作用于(即Timer函数),普通函数的this指向调用时所在的作用于(即全局对象window)。所以,3100ms之后,timer.s1加到了3,而timer.s2一次都没有更新。

apply & call

apply call bind 都可以改变this的指向,这里先说apply 和 call 的区别。
apply 和 call 的区别是 call 方法接受的是若干个参数列表,而 apply 接收的是一个包含多个参数的数组。

  • apply
var a ={
    fn : function (a,b) {
        console.log( a + b)
    }
}
var b = a.fn;
b.apply(a,[1,2])     // 3
  • call
var a ={
    fn : function (a,b) {
        console.log( a + b)
    }
}
var b = a.fn;
b.call(a,1,2)       // 3

bind 和 call apply

直接看MDN上面的介绍:

bind()方法创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。

var a ={
    fn : function (a,b) {
        console.log( a + b)
    }
}
var b = a.fn;
b.bind(a,1,2)()           // 3

相关文章

  • this到底指向哪?

    老生常谈的问题了,之前一直有些模糊,这次争取一次写清楚。 指向只与调用有关 不论代码多么复杂我们只关心到底是谁最后...

  • JS基础 - this 到底指向哪

    函数上下文 (this 指向)看这一篇就够了 简单调用,函数直接圆括号执行,函数上下文是 window(this ...

  • this到底指向谁

    在我们编写的类中我们希望this是指向该类的实例即对象时,我们确有时候会出错。下面让我讨论一下这个this这里有t...

  • this到底指向哪里呢?

    有时候我们太过于拘泥与“this”的字面意思就会产生一些误解。 1. this是不是指向函数自身呢? show m...

  • 9.BOM:this指向问题、JS 执行机制(同步任务、异步任务

    this指向问题 ​ this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁...

  • js中this指向问题

    this的指向在函数定义的时候是无法确定的,只有函数执行的时候才能确定this到底指向谁,实际this指向是调用他...

  • this的指向

    this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向...

  • 彻底理解js中this的指向

    this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向...

  • 关于js中this指向的那些事

    this是JS中的关键字,this的指向中函数定义时确定不了,只有 函数指向的时候才能确定this到底指向谁,th...

  • JS——this

    this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向...

网友评论

    本文标题:this到底指向哪?

    本文链接:https://www.haomeiwen.com/subject/tektxftx.html