浅谈this指向

首先

this is all about context.


this说白了就是找大佬,找拥有当前上下文(context)的对象(context object)。


大佬可以分为六层,层数越高权力越大,this只会认最大的。


第一层:世界尽头


权力最小的大佬是作为备胎的存在,在普通情况下就是全局,浏览器里就是window;在use strict的情况下就是undefined。


function showThis () {

  console.log(this)

}

function showStrictThis () {

  'use strict'

  console.log(this)

}

showThis() // window

showStrictThis() // undefined


第二层:点石成金


第二层大佬说白了就是找这个函数前面的点.。


如果用到this的那个函数是属于某个 context object 的,那么这个 context object 绑定到this。


比如下面的例子,boss是returnThis的 context object ,或者说returnThis属于boss。


var boss = {

  name'boss',

  returnThis () {

    return this

  }

}

boss.returnThis() === boss // true


下面这个例子就要小心点咯,能想出答案么?


var boss1 = {

  name'boss1',

  returnThis () {

    return this

  }

}

var boss2 = {

  name'boss2',

  returnThis () {

    return boss1.returnThis()

  }

}

var boss3 = {

  name'boss3',

  returnThis () {

    var returnThis = boss1.returnThis

    return returnThis()

  }

}

boss1.returnThis() // boss1

boss2.returnThis() // ?

boss3.returnThis() // ?


答案是boss1和window哦,猜对了吗。


只要看使用this的那个函数。


在boss2.returnThis里,使用this的函数是boss1.returnThis,所以this绑定到boss1;


在boss3.returnThis里,使用this的函数是returnThis,所以this绑定到window。

    这里可能比较难懂,在boss3的returnthis函数里面声明了一个变量叫returnthis,为他赋值为boss1的returnthis函数对象地址,这里调用returnthis这个函数就不是boss3对象在调用了(boss3只调用了它自己声明了的函数),而是全局在调用,所以对象函数里面的函数的this指向window


要想把this绑定到boss2怎么做呢?


var boss1 = {

  name'boss1',

  returnThis () {

    return this

  }

}

var boss2 = {

  name'boss2',

  returnThisboss1.returnThis

}

boss2.returnThis() //boss2


没错,只要让使用this的函数是属于boss2就行。

    这里最主要要注意写的是boss1.returnthis,而不是returnthis(),后者表示立即执行,那么立即执行的函数里面的this还是指向boss1,因为是boss1在调用函数。不加括号的意思则是把这个函数对象的地址给returnthis这个变量,当boss2调用这个变量指定的函数时,函数里面的this就指向boss2


第三层:指腹为婚


第三层大佬是Object.prototype.call和Object.prototype.apply,它们可以通过参数指定this。它们之间的区别:call的参数是,号隔开的,apply可以接受数组作为参数(注意this是不可以直接赋值的哦,this = 2会报ReferenceError。)


function returnThis () {

  return this

}

var boss1 = { name'boss1' }

returnThis() // window

returnThis.call(boss1) // boss1

returnThis.apply(boss1) // boss1


第四层:海誓山盟


第四层大佬是Object.prototype.bind,他不但通过一个新函数来提供永久的绑定,还会覆盖第三层大佬(call、apply)的命令。


function returnThis () {

  return this

}

var boss1 = { name'boss1'}

var boss1returnThis = returnThis.bind(boss1)

boss1returnThis() // boss1

var boss2 = { name'boss2' }

boss1returnThis.call(boss2) // still boss1


第五层:内有乾坤


一个比较容易忽略的会绑定this的地方就是new。当我们new一个函数时,就会自动把this绑定在新对象上,然后再调用这个函数。它会覆盖bind的绑定。直接new showThis()会立即执行函数,并将函数里的this绑定到函数名变量上


function showThis () {

  console.log(this)

}

showThis() // window

new showThis() // showThis  

var boss1 = { name'boss1' }

showThis.call(boss1) // boss1

new showThis.call(boss1) // TypeError

var boss1showThis = showThis.bind(boss1)

boss1showThis() // boss1

new boss1showThis() // showThis


第六层:军令如山


最后一个法力无边的大佬就是 ES2015 的箭头函数。箭头函数里的this不再妖艳,被永远封印到当前词法作用域之中,称作 Lexical this ,在代码运行前就可以确定。没有其他大佬可以覆盖。


这样的好处就是方便让回调函数的this使用当前的作用域,不怕引起混淆。


所以对于箭头函数,只要看它在哪里创建的就行。


如果对 V8 实现的词法作用域感兴趣可以看看这里。


function callback (cb) {

  cb()

}

callback(() => { console.log(this) }) // window

var boss1 = {

  name'boss1',

  callbackcallback,

  callback2 () {

    callback(() => { console.log(this) })

  }

}

boss1.callback(() => { console.log(this) }) // still window  我的理解:因为callback是在全局作用域中创建的,所以执行它里面的函数的this也是指向window

boss1.callback2(() => { console.log(this) }) // boss1  我的理解:相当于是在boss1里面又创建了一个箭头函数,那么这个箭头函数指向boss1


下面这种奇葩的使用方式就需要注意:


var returnThis = () => this //在window中创建

returnThis() // window

new returnThis() // TypeError

var boss1 = {

  name'boss1',

  returnThis () { //在boss1中创建

    var func = () => this 

    return func()

  }

}

returnThis.call(boss1) // still window

var boss1returnThis = returnThis.bind(boss1)

boss1returnThis() // still window       call和apply不改变箭头函数里面的this的指向

boss1.returnThis() // boss1

var boss2 = {

  name'boss2',

  returnThisboss1.returnThis   //returnThis在boss2中创建

}

boss2.returnThis() // boss2


不知道最后为什么会是 boss2,继续理解“对于箭头函数,只要看它在哪里创建”这句话。


                                                                                                                  ----推荐学前端的小伙伴关注前端大全公总号,里面经常会发一些知识点,没事儿读读,受益匪浅


猜你喜欢

转载自blog.csdn.net/lncci/article/details/80100252