Javascript 深入浅出This

Y3G 发布于2019-08-22 10:48 / 752人阅读

摘要：中函数的调用有以下几种方式作为对象方法调用，作为函数调用，作为构造函数调用，和使用或调用。作为构造函数调用中的构造函数也很特殊，构造函数，其实就是通过这个函数生成一个新对象，这时候的就会指向这个新对象如果不使用调用，则和普通函数一样。

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

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

What ’s this？

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

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

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

作为函数调用

作为对象方法调用

作为构造函数调用

使用 apply 或 call 调用

这他娘的太可怕了，我要问的是 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 %}

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

作为对象方法调用

上述例子中，普通函数的调用把 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 %}

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

而当我们尝试把 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 中一个很小的概念，但借此我们可以深入了解 JavaScript 中函数的执行环境，才能充分发挥 JavaScript 的特点，才会发现 JavaScript 语言特性的强大。 该文章部分知识网络整理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91288.html

JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
JavaScript深入浅出第1课：箭头函数中的this究竟是什么鬼？

摘要：箭头函数没有自己的值，箭头函数中所使用的来自于函数作用域链。使用箭头函数打印对于内层函数，它本身并没有值，其使用的来自作用域链，来自更高层函数的作用域。《JavaScript 深入浅出》系列： JavaScript 深入浅出第 1 课：箭头函数中的 this 究竟是什么鬼？ JavaScript 深入浅出第 2 课：函数是一等公民是什么意思呢？普通函数与箭头函数普通函数指的是...

MRZYD 2019-08-23 18:11 评论0 收藏0
JavaScript深入之bind的模拟实现

摘要：也就是说当返回的函数作为构造函数的时候，时指定的值会失效，但传入的参数依然生效。构造函数效果的优化实现但是在这个写法中，我们直接将，我们直接修改的时候，也会直接修改函数的。 JavaScript深入系列第十一篇，通过bind函数的模拟实现，带大家真正了解bind的特性 bind 一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数...

FingerLiu 2019-08-20 16:15 评论0 收藏0
JavaScript深入之执行上下文

摘要：深入系列第七篇，结合之前所讲的四篇文章，以权威指南的为例，具体讲解当函数执行的时候，执行上下文栈变量对象作用域链是如何变化的。前言在深入之执行上下文栈中讲到，当代码执行一段可执行代码时，会创建对应的执行上下文。 JavaScript深入系列第七篇，结合之前所讲的四篇文章，以权威指南的demo为例，具体讲解当函数执行的时候，执行上下文栈、变量对象、作用域链是如何变化的。前言在《Jav...

gougoujiang 2019-08-20 15:46 评论0 收藏0
JavaScript深入之new的模拟实现

摘要：深入系列第十二篇，通过的模拟实现，带大家揭开使用获得构造函数实例的真相一句话介绍运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一也许有点难懂，我们在模拟之前，先看看实现了哪些功能。 JavaScript深入系列第十二篇，通过new的模拟实现，带大家揭开使用new获得构造函数实例的真相 new 一句话介绍 new: new 运算符创建一个用户定义的对象类型的实例或具...

tianlai 2019-08-20 16:17 评论0 收藏0