Javascript 深入浅出This

虚烬
• 阅读 1969

this 是 JavaScript 比较特殊的关键字,本文将深入浅出的分析其在不同情况下的含义,可以这样说,正确掌握了 JavaScript 中的 this 关键字,才算迈入了 JavaScript 这门语言的门槛。

Tips:个人博客:https://haonancx.github.io;排版更佳~

Javascript 深入浅出This

What ’s this?

要学一样东西,首先得了解它的含义,this 关键字的含义是明确且具体的,即指代当前对象;细心的童鞋发现了 当前对象 中"当前" 这两个字;说明这个 this 是在某种相对情况下才成立的。

Javascript 深入浅出This

由于其运行期绑定的特性,JavaScript 中的 this 含义要丰富得多,它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式:作为对象方法调用,作为函数调用,作为构造函数调用,和使用 apply 或 call 调用。下面我们将按照调用方式的不同,分别讨论 this 的含义。

This 被分为三种情况:全局对象、当前对象或者任意对象;判断处于那种情况,这完全取决于函数的调用方式,JavaScript 中函数的调用有以下几种方式:
  • 作为函数调用

  • 作为对象方法调用

  • 作为构造函数调用

  • 使用 apply 或 call 调用

这他娘的太可怕了,我要问的是 This 到底是什么鬼,你好家伙,给我罗列那么多,要晕了!!!

Javascript 深入浅出This

别急,咱一个萝卜一个坑,带你入坑以后,你就恍然大悟了。

Javascript 深入浅出This

作为函数调用

这是我们最常用的方法,这种调用方式属于全局调用,所以呢,这里的 This 就理所应当的成了全局对象。(全局对象??难道它是一辆 '公交车'?)

废话少说,上个菜!!!

{% highlight ruby %}

  function example(){

    this.n = 'hello world !';

    console.log(this.n);
       console.log(this);

  }

  example(); // hello world !   Window

{% endhighlight %}

很显然,调用 example(); 时,输出了 'hello world !' 还有 Window;这时候说它是全局对象好像不具备什么说服力;咱换个姿势。

{% highlight ruby %}

  var n = 'hello world !';

  function example(){

   console.log(this.n);

  }

   example(); // hello world !

{% endhighlight %}

你瞧,又是 ' hello world ! ',不急,咱有一千种姿势等你来解锁;再换。

{% highlight ruby %}

  var n = 'hello world !';

  function example(){

    this.n = 0;

  }

 example();

 console.log(n); // 0 !

{% endhighlight %}

果然是一辆 '公交车' !!!

Javascript 深入浅出This

作为对象方法调用

上述例子中,普通函数的调用把 This 作为window对象的方法进行了调用。显然 This 指向了 Window 对象;咱换个口味,看看下面的菜。

{% highlight ruby %}

var name="Akita";
var dogs={
    name:"Collie",
    showName:function(){
        console.log(this.name);
    }
}

dogs.showName();  //输出  Collie

var otherName=dogs.showName;

otherName();    //输出  Akita

{% endhighlight %}

  1. 快来看,当执行 dogs.showName(); 时,输出 Collie (牧羊犬),说明这个时候的 This 是指向 dogs 这个对象的;

  2. 而当我们尝试把 dogs.showName 赋给 otherName 时,我们回头想想这个 showName() 是做什么用的,很显然,输出它函数的执行环境所指向对象的 name,而此时 otherName 变量相当于 Window 对象的一个属性,因此 otherName() 执行的时候相当于 window.otherName(),即 window 对象调用 otherName 这个方法,所以 this 关键字指向 window;所以就会输出 Akita(秋田犬)。

作为构造函数调用

JavaScript 中的构造函数也很特殊,构造函数,其实就是通过这个函数生成一个新对象(object),这时候的 This 就会指向这个新对象;如果不使用 new 调用,则和普通函数一样。

{% highlight ruby %}

  function example(){

    this.n = 'hello world !';

  }

  var other = new example();

  console.log(other.n); //hello world !

{% endhighlight %}

快来看,我们为 example 这个函数 new(构造)了一个新的对象 other,那么 this 就会指向 other 这个对象,所以就会输出 'hello world !'。

使用 apply 或 call 调用

apply()是函数对象的一个方法,它应用某一对象的一个方法,用另一个对象替换当前对象。

{% highlight ruby %}

   var n = 'hello world!';
  function example(){
    console.log(this.n);
  }
  var o={};
  o.n = 'hey~';
  o.m = example;
  o.m.apply();//hello world!

{% endhighlight %}

来看看这行代码,当apply()的参数为空时,就是没有对象去替换掉当前的对象,所以默认调用全局对象。因此,这时会输出'hello world!',证明this指的是全局对象。

那么试试给apply()指定一个对象。

{% highlight ruby %}

   var n = 'hello world!';
  function example(){
    console.log(this.n);
  }
  var o={};
  o.n = 'hey~';
  o.m = example;
  o.m.apply(o);//hey~

{% endhighlight %}

此时输出了'hey~',说明对象替换成功,this 指向了 o 这个对象。

Javascript 深入浅出This

本文介绍了 JavaScript 中的 this 关键字在各种情况下的含义,虽然这只是 JavaScript 中一个很小的概念,但借此我们可以深入了解 JavaScript 中函数的执行环境,才能充分发挥 JavaScript 的特点,才会发现 JavaScript 语言特性的强大。

该文章部分知识网络整理

点赞
收藏
评论区
推荐文章
Souleigh ✨ Souleigh ✨
4年前
JavaScript 是什么?
前言引用《JavaScript高级程序设计第四版》中说的话——“从简单的输入验证脚本到强大的编程语言,JavaScript 的崛起没有任何人预测到。它很简单,学会用只要几分钟;它又很复杂,掌握它要很多年。要真正学好用好 JavaScript,理解其本质、历史及局限性是非常重要的”。面试官:JavaScript 是什么?我:
Karen110 Karen110
3年前
一篇文章带你了解JavaScript this关键字
与其他语言相比,this关键字在JavaScript中的行为略有不同。JavaScript中,this关键字引用其所属的对象。根据使用位置,它具有不同的值。一、前言方法中,this关键字引用其所属的对象。1.this指的是全局对象在函数中。2.this引用全局对象在函数中。3.在严格模式下,this是未定义的在事件中。4.
郜小超 郜小超
4年前
面试问题总结(持续更新中。。。)
1.letconstvar的区别在JavaScript中,有三个关键字可用于声明一个变量,并且每个关键字都有其不同之处。分别var,let和const。一个简单粗暴的解释:使用const关键字声明的变量不能被重新赋值,let而且var可以。也可以这么说:const只可以声明一个常量(js中一旦被定义就无法再被修改的变量,称之为常量)。eg:
Wesley13 Wesley13
3年前
java script三大组成部分
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。JavaScript的三大组成部分是:1、ECMAScript:JavaScript的核心,描述了语言的基本语法(var、for、if、a
Stella981 Stella981
3年前
Javascript解析机制 执行机制
HTML5学堂:在学习JavaScript过程中,我们需要了解事件的机制是怎么执行的?本文将会提到JavaScript事件机制的解析,希望对大家有帮助!javascript解析的过程主要分为两个阶段,分别是编译与执行阶段。在编译期,javascript解释器将完成对javascript代码的预处理,即将javascript代码转换为字节码。在执行
Stella981 Stella981
3年前
JavaScript的 基本数据类型
第一:Javascript对象是第二:Javascript中第三:Javascript的对象是数据;第四:JavaScript中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个JavaScript字符串参考https://www
Stella981 Stella981
3年前
JavaScript 非常重要的几个概念
JavaScript是一门比较复杂的语言。如果你是一名JavaScript开发人员,不管处于什么样的水平,都有必要了解JavaScript的基本概念。小编最近的工作涉及到JavaScript,于是本文就介绍了几个非常重要的JavaScript概念,但绝对不是说JavaScript开发人员只需要知道这些就可以了。01变量赋值(值与引用)Java
Stella981 Stella981
3年前
JavaScript 堆内存分析新工具 OneHeap
OneHeap关注于运行中的JavaScript内存信息的展示,用可视化的方式还原了HeapGraph,有助于理解v8内存管理。背景JavaScript运行过程中的大部分数据都保存在堆(Heap)中,所以JavaScript性能分析另一个比较重要的方面是内存,也就是堆的分析。利用ChromeDevTools可
Wesley13 Wesley13
3年前
JS篇(004)
答案:1.脚本语言。JavaScript是一种解释型的脚本语言,C、C等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。2.基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。3.简单。JavaScript语言中采用的是弱类型的变量