一盏茶的功夫带你掌握烦人的 this 指向问题( 一 )

简介: 一盏茶的功夫带你掌握烦人的 this 指向问题( 一 )

前言

相信很多小伙伴们都被this 的指向问题所折磨过,this 它到底指向哪啊? 今天我们就来聊聊如何判断this 指向哪里,一盏茶的功夫让小伙伴们开心一整天!

文中所实例代码都运行在Chrome浏览器的Console控制台中。

先带大家了解一个概念,在浏览器中运行代码时,window对象就是全局,因此所有在全局作用域中声明的变量,函数都会变成window对象的属性和方法。

this 的绑定规则

  1. 默认绑定 --- 函数在哪个词法作用域里生效,this就指向哪里

我们用通俗易懂的话来说:

在非严格模式下,当函数调用时无任何调用前缀的情景,也就是直接调用函数,(后面我们会介绍非直接调用的情况),this 指向全局,在浏览器中也就是window

我们来看一个简单的例子:

var a = 1
 function foo() {
   console.log(this.a);
 }
 foo()

在此例子中,foo()就是直接调用,那么函数中的this就指向全局区,那么this.a输出1

image.png

再来看一个稍微复杂的例子:

var b = 2
function foo() {  // [[scope]]
  var b = 1
  function bar() {
    baz()
  }
  function baz() {
    console.log(this.b);
  }
  bar()
}
foo()

这个例子中无论函数声明在哪,在哪调用,由于函数调用时前面并未指定任何对象,而是直接调用,这种情况下this指向全局,输出2

image.png

2. 隐式绑定 --- 当函数被一个对象所拥有,再调用时,此时this会指向该对象

如果函数被一个对象作为方法所调用时,那么this就会指向该对象。我们来看一个例子:

function foo() {
    console.log(this.a);
  }
  var obj = {
    a: '来颗奇趣蛋',
    func: foo
}
obj.func()

foo函数体被对象obj所拥有,当obj调用时,this就会指向obj

我们来看看输出结果:

image.png

3. 隐式丢失 --- 当函数被多个对象链式调用时,this指向引用函数的对象

通俗一点来说呢,比如有两个对象object 和 obj,例如这样调用一个函数,obj.object.func(),那么this会指向object(object所引用),也可以说就近原则

我们来看一个例子:

function foo() {
    console.log(this.a);
  }
  
var obj2 = {
    a: '菌菌',
    obj: obj
}
var obj = {
  a: '来颗奇趣蛋',
  func: foo
}
obj2.obj.func()

objobj2所拥有时,而函数被obj所拥有,当函数被这样调用时obj2.obj.func(),this指向所引用函数的obj

让我们来看看输出:

image.png

怎么样,是不是解决了你对this指向的问题的一大半疑惑,下篇文章我会讲剩下的两种方法,小伙伴们记得一起来看看。

今天的内容就到这啦,如果你觉得小编写的还不错的话,或者对你有所启发,请给小编一个辛苦的赞吧

相关文章
|
3月前
|
Web App开发 自然语言处理
一盏茶的功夫带你掌握烦人的 this 指向问题( 二 )
一盏茶的功夫带你掌握烦人的 this 指向问题( 二 )
|
Go
腥风血雨中,这招救了我的代码!
腥风血雨中,这招救了我的代码!
54 0
|
程序员 C++
谁说程序员不浪漫——给女友放个烟花,安排!安排!
谁说程序员不浪漫——给女友放个烟花,安排!安排!
157 0
谁说程序员不浪漫——给女友放个烟花,安排!安排!
|
Java
老爷子这代码,看跪了! (上)
老爷子这代码,看跪了! (上)
147 0
老爷子这代码,看跪了! (上)
|
Java 程序员
老爷子这代码,看跪了! (中)
老爷子这代码,看跪了! (中)
141 0
老爷子这代码,看跪了! (中)
|
安全 Java
老爷子这代码,看跪了! (下)
老爷子这代码,看跪了! (下)
130 0
老爷子这代码,看跪了! (下)
|
存储 程序员 C语言
指针不过如此,看完后我差点飘了(一)
指针不过如此,看完后我差点飘了
157 0
指针不过如此,看完后我差点飘了(一)
指针不过如此,看完后我差点飘了(二)
指针不过如此,看完后我差点飘了
138 0
|
存储 监控 安全
杂货机器人翻车实录:会被路人“吓”到,还会跟错主人!3千美元怕是买了个寂寞?
杂货机器人翻车实录:会被路人“吓”到,还会跟错主人!3千美元怕是买了个寂寞?
209 0
|
Java 程序员 应用服务中间件
程序员相亲失败,只因请对方吃肯德基而被嫌弃,最后被怒删
今天看到一个有趣的话题,一个粉丝投稿: “我是程序员,今天相亲时被对方嫌弃了,最后她删了我”。 楼主男生,第一次见面时请对方吃肯德基,女生吐槽了他很多,最后删了他···看看他俩的聊天记录,你们品品。
979 0