JavaScript的this

周国辉发布于2019-08-20 17:21 / 3163人阅读

摘要：里，的值随着一个函数被调用情况的不同而不同。作为构造函数被调用指用关键字进行调用生成一个对象实例子的情况，这时候生成的实例对象在我们用调用一个构造函数时，发生了三件事创建了一个新的空对象。在第一步创建的这个空对象作为传给这个构造函数。

在JavaScript被调用的时候，除了可见的行参被传入方法体之外，this也被隐形地传进去了。所以，从这点也再次说明JavaScript的this的值完全取决于函数被调用时候的上下文，而不是像java的this是在声明的时候确定的。
JavaScript里，this的值随着一个函数被调用情况的不同而不同。而一个函数有4种被调用的情况，也就是说this的值有4种，那先来看看有哪四种调用函数的方法：

1: 作为方法被调用
当一个函数被赋给一个对象的属性，并引用该属性进行调用时，this === the object

var func = function(){
    return this.a;
}
var obj = {
    a: 10,
    name: "hehe",
    fn: func
}
this.a = 20;
obj.fn();//10

当我们执行到func时，在右边的调试工具栏可以看到this是我们的obj这个对象。

2: 作为一个函数被调用
只最常用的用（）进行调用的情况，这时候this === Window
先来看一段代码：

var func = function(){
    var a = 10;
    return this.a;
}

var a = 20;
func();//结果是20而不是10

当我们执行到func时，这时候的this是全局对象Window,那this.a自然就是全局变量a(20),而不是定义在func内部的a(10)。
其实第二种情况是第一种情况的特例，这里的对象是全局对象Window,这个方法是在Window上调用的，那this自然也就是Window了。

3: 作为构造函数被调用
指用new关键字进行调用生成一个对象实例子的情况，这时候this === 生成的实例对象

function Fruit(){
   this.func = function(){return this}
}
var apple = new Fruit();
var orange = new Fruit();

apple.func() === apple; //true
orange.func() === orange; // ture

在我们用new调用一个构造函数时，发生了三件事：

 1: 创建了一个新的空对象。
 2: 在第一步创建的这个空对象作为this传给这个构造函数。 (每一个函数被调用时，都隐式地传入一个this)
 3: 如果没有显示的返回值，新创建的这个对象，就会作为构造器函数的返回值进行返回。

第三点解释了为什么我们可以在apple上调用func这个方法，第二点解释了为什么appl.func()的执行结果等于apple.

4: 使用apply()和call()方法进行调用

私有云海外云主机 javascript的this javaScript中的this javascript中this详解 this的用法

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

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

JavaScript深入浅出

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

blair 2019-08-21 18:26 评论0 收藏0
javascript技术难点（三）之this、new、apply和call详解

摘要：第四点也要着重讲下，记住构造函数被操作，要让正常作用最好不能在构造函数里 4) this、new、call和apply的相关问题讲解this指针的原理是个很复杂的问题，如果我们从javascript里this的实现机制来说明this，很多朋友可能会越来越糊涂，因此本篇打算换一个思路从应用的角度来讲解this指针，从这个角度理解this指针更加有现实意义。下面我们看看在ja...

ghnor 2019-08-21 10:27 评论0 收藏0
JavaScript进阶之’this‘

摘要：所以相同点是，在全局范围内，全局变量终究是属于老大的。只生效一次引入了。只生效一次在箭头函数中，与封闭词法环境的保持一致。我通常把这些原始函数叫做构造函数。在里面你可以嵌套函数，也就是你可以在函数里面定义函数。 showImg(https://img-blog.csdnimg.cn/20190522000008399.jpg?x-oss-process=image/watermark,...

shenhualong 2019-08-23 18:37 评论0 收藏0
Javascript 深入浅出This

摘要：中函数的调用有以下几种方式作为对象方法调用，作为函数调用，作为构造函数调用，和使用或调用。作为构造函数调用中的构造函数也很特殊，构造函数，其实就是通过这个函数生成一个新对象，这时候的就会指向这个新对象如果不使用调用，则和普通函数一样。 this 是 JavaScript 比较特殊的关键字，本文将深入浅出的分析其在不同情况下的含义，可以这样说，正确掌握了 JavaScript 中的 th...

Y3G 2019-08-22 10:48 评论0 收藏0
学习React之前你需要知道的的JavaScript基础知识

摘要：和类在开始时遇到类组件，只是需要有关类的基础。毕竟，中的条件呈现仅再次显示大多数是而不是特定的任何内容。在我的研讨会期间，更多的材料是关于JavaScript而不是React。其中大部分归结为JavaScript ES6以及功能和语法，但也包括三元运算符，语言中的简写版本，此对象，JavaScript内置函数（map，reduce，filter）或更常识性的概念，如：可组合性，可重用...

bitkylin 2019-08-02 11:01 评论0 收藏0