关于javascript:彻底搞懂JavaScript中的this关键字

本文对JavaScript中的this关键字进行全方位的解析,看完本篇文章,心愿读者们可能齐全了解this的绑定问题。

开篇:对于那些没有投入工夫去学习this机制的JavaScript开发者来说,this的绑定是一件令人困惑的事。(包含已经的本人)。

误区:学习this的第一步是明确this既不指向函数自身也不指向函数的词法作用域,你是否被相似这样的解释所误导?但其实这种说法都是谬误的。

概括:this理论是在函数被调用时产生的绑定,它所指向的地位齐全取决于函数被调用的地位。

一、调用地位

在了解this的绑定过程之前,首先要了解调用地位:调用地位就是函数在代码中被调用的地位(而不是申明的地位)。

所以说,寻找调用地位就是寻找“函数被调用的地位”,这里最重要的点是要剖析调用栈(寄存以后正在执行的函数的地位)

什么是调用栈和调用地位?

关系:调用地位就在以后正在执行的函数(调用栈)的前一个地位

function func1() {
  // 以后调用栈:func1
  // 以后调用地位是全局作用域(调用栈的前一个地位)
  console.log('func1')
  func2() // 这里是:func2的调用地位
}
function func2() {
  // 以后调用栈:func1 -> func2
  // 以后调用地位是在func1(调用栈的前一个地位)
  console.log('func2')
  func3() // 这里是:func3的调用地位
}
function func3() {
  // 以后调用栈:func1 -> func2 -> func3
  // 以后调用地位是在func2(调用栈的前一个地位)
  console.log('func3')
}
func1() // 这里是:func1的调用地位

关注点:咱们是如何从调用栈中剖析出真正的调用地位的,因为这决定了this的绑定

二、绑定规定

  • 默认绑定

最罕用的函数调用类型:独立函数调用

function getName() {
  console.log(this.name)
}
var name = 'kyrie'
getName() // 'kyrie'

当调用getName()时,this.name拿到了全局对象的name。因为getName()是间接调用的,不带任何修饰符,应用的是默认绑定,因而this指向全局对象(非严格模式)。

如果应用严格模式(’strict mode’)呢?

function getName() {
  'use strict';
  console.log(this.name)
}
var name = 'kyrie'
getName() // 'TypeError: this is undefined'

那么全局对象无奈应用默认绑定,因而this会绑定到undefined

  • 隐式绑定

调用地位是否有上下文对象

function getName() {
  console.log(this.name)
}
var person = {
  name: 'kyrie',
  getName: getName
}
person.getName() // 'kyrie'

当getName()被调用时,它的落脚点指向person对象,当函数援用有上下文对象时,隐式绑定会把函数调用中的this绑定到这个上下文对象,因而调用getName()时this被绑定到person,因而this.name跟person.name是一样的

常见问题:隐式失落?

function getName() {
  console.log(this.name)
}
var person = {
  name: 'kyrie',
  getName: getName
}
var getName2 = person.getName() // 函数别名
var name = 'wen' // name是全局对象的属性
getName2() // 'wen' 这里拿到的是全局对象的name

解释:尽管getName2是person.getName的一个函数援用,但它援用的getName函数的自身,因而getName2()调用时不带任何修饰符,应用的是默认绑定,因而this绑定了全局对象

  • 显式绑定

应用call() / apply() / bind() 指定this的绑定对象

function getName() {
  console.log(this.name)
}
var person = {
  name: 'kyrie'
}
getName.call(person) // 'kyrie'
getName.apply(person) // 'kyrie'

通过getName.call()/ getName.apply() 调用强制把它的this绑定到person上。

  • new绑定

所有函数都能够用new来调用,这种函数调用称为结构函数调用

重点:实际上并不存在所谓的“构造函数”,只有对于函数的“结构调用”

应用new来调用函数,或者说产生结构函数调用时,会主动执行以下的四步操作:
  1. 创立(或者结构)一个新的对象
  2. 这个新对象会被执行[[原型]]连贯(临时疏忽,属于原型内容,前面再介绍它)
  3. 这个新对象会绑定到函数调用的this
  4. 如果函数没有返回其余对象,则new表达式中的函数会主动返回这个新的对象
function setName(name) {
  this.name = name
}
var person = new setName('kyrie')
console.log(person.name) // 'kyrie'

应用new调用setName()时,会创立一个新对象并把这个新对象绑定到setName()调用的this上,并把这个对象返回

三、优先级

毫无疑问,默认绑定的优先级是四条规定中最低的,所以暂不思考它。

  1. 隐式绑定和显式绑定哪个优先级高?
function getName() {
  console.log(this.name)
}
var p1 = {
  name: 'kyrie',
  getName: getName
}
var p2 = {
  name: 'wen',
  getName: getName
}
p1.getName() // 'kyrie'
p2.getName() // 'wen'
p1.getName.call(p2) // 'wen'
p2.getName.call(p1) // 'kyrie'

后果,显式绑定的优先级比隐式绑定高。

  1. 隐式绑定和new绑定哪个优先级高?
function setName(name) {
  this.name = name
}
var p1 = {
  setName: setName
}
var p2 = {}
p1.setName('kyrie')
console.log(p1.name) // 'kyrie'
p1.setName.call(p2, 'wen')
console.log(p2.name) // 'wen'
var p3 = new p1.setName('zbw')
console.log(p1.name) // 'kyrie'
console.log(p3.name) // 'zbw'

后果,new绑定的优先级比隐式绑定高

  1. 显式绑定和new绑定的哪个优先级高?
function setName(name) {
  this.name = name
}
var p1 = {}
// bind会返回一个新的函数
var setP1Name = setName.bind(p1)
setP1Name('kyrie')
console.log(p1.name) // 'kyrie'
var p2 = new setP1Name('wen')
console.log(p1.name) // 'kyrie'
console.log(p2.name) // 'wen'

后果,new绑定的优先级比显示绑定高

综上,优先级的正确排序:

从高到低: new > 显示 > 隐式 > 默认

  • 判断this的指向

当初咱们能够依据优先级来判断函数在某个地位调用this的指向。

  1. 函数是否通过new来调用(new绑定)?如果是,则this指向新创建的对象
var p1 = new Person()
  1. 函数是否通过call/apply/bind调用(显式绑定)?如果是,则this指向第一个参数
var p1 = setName.call(p2)
  1. 函数是否在某个上下文对象中调用(隐式绑定)?如果是,则this指向该上下文对象
var p2 = p1.setName()
  1. 如果以上三个条件都不满足,则应用默认绑定。如果是在严格模式中,this指向undefined,否则指向全局对象。
var p1 = setName()

四、箭头函数的this

以上上提到判断this指向的四条规定蕴含所有失常的函数,除了ES6中的箭头函数

概括:箭头函数不像一般函数那样应用function关键字定义,而是用 “胖箭头” => 定义 。而且箭头函数并不实用以上的四条规定,它的this绑定齐全是依据 外层作用域(函数或者全局) 来决定的。

function getName() {
  // 箭头函数的this指向外层作用域
  return (name) => {
    console.log(this.name)
  }
}
var p1 = {
  name: 'kyrie'
}
var p2 = {
  name: 'wen'
}
var func = getName.call(p1)
func.call(p2) // 'kyrie'

getName()外部创立的箭头函数会捕捉调用时外层作用域(getName)的this,因为getName的this通过显示绑定到p1上,所以getName里创立的箭头函数也会指向p1,最重要的一点:箭头函数的this无奈被批改(即便是优先级最高的new绑定也不行

总结

要判断一个运行中的函数的this绑定,须要找到该函数的调用地位(联合调用栈),接着依据优先级得出的四条规定来判断this的绑定对象。

  1. 函数由new调用?绑定到新创建的对象
  2. 由call/apply/bind调用?绑定到指定对象
  3. 由上下文对象调用?绑定到上下文对象
  4. 默认:严格模式下绑定到undefined,否则绑定到全局对象

ES6的箭头函数不实用以上四条规定,而是依据以后的词法作用域来决定this绑定,也就是说,箭头函数会继承外层函数调用的this绑定(无论绑定到什么),而且箭头函数的this绑定无奈被批改

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据