您的当前位置:首页JavaScript中this详细解答(图文教程)

JavaScript中this详细解答(图文教程)

2023-11-30 来源:瑞奇养生

JavaScript中函数的this对象是函数在执行时所处的作用域(例:当在网页的全局作用域中调用函数时,this对象引用的就是window)。

JavaScript的this和Java等面向对象语言中的this大不一样,bind()、call()和apply()函数更是将this的灵活度进一步延伸。

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

如果对JavaScript的关键字this理解不够深刻,有时候会掉入意想不到的坑。在这里我们总结了5条通用规则来帮助你判断this到底指向什么。虽然没有囊括所有的情况,但日常大部分情况都可以使用这些规则来正确推断。

this的值通常是由所在函数的执行环境决定,也就是说要看函数是如何被调用的;同一个函数每一次调用,this都可能指向不同的对象;

全局对象 (Global Object)

打开Chrome浏览器开发者面板(Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J),并且输入:

console.log(this);

看看输出了什么?

window对象! 因为在全局作用域下,this指向全局对象。在浏览器中全局对象就是window对象。为了让你更加清楚理解为什么this会指向window对象,我们来看另外一个例子:

var myName = 'Brandon';我们可以通过在控制台输入myName来访问其值:

输出 'Brandon'

其实,所有在全局定义的变量都绑定到window对象。我们来做如下测试:

输出 'Brandon'window.myName === myName// 输出 true

现在我们将this放到函数内部,看看有何效果。

你会发现this依然指向全局的window对象。因为this关键字没有处于一个声明的对象内部,默认指向全局window对象。这一点可能对于大部分初学者来说有点难以理解。当读完这篇文章,你就会豁然开朗。注意:如果在strcit模式下,上面的例子中this为undefined。

声明的对象 (Declared Object)

当this关键字在一个声明对象内部使用,其值会被绑定到调用该this的函数的最近的父对象。我们用例子来说明这个问题:

输出 'John Smith'

在被声明的对象person中的full函数里面使用了this, 那么调用this的full函数的最近的父对象就是person, 因此,this指向person。

为了更好的描述this实际上是指向person对象的,你可以拷贝如下代码到浏览器控制台,将this打印出来。

输出 Object {first: "John", last: "Smith", full: function}

我们接下来看一个更复杂的例子:

在这里我们有嵌套的对象,在这个时候,this分别指向谁呢? 我们将其打印出来看一看:

输出 'John Smith'person.personTwo.full();// 输出 'Allison Jones'

你会发现满足我们前面所描述的规则:其值会被绑定到调用this的函数的最近的父对象。

new关键字

当使用new关键字构建一个新的对象,this会绑定到这个新对象。我们来看一个例子:

根据第一条规则,你可能会推断this指向全局对象。但是如果我们使用new关键字来声明一个新的变量,Car函数中的this将会绑定一个新的空对象,然后初始化this.make和this.model的值。

输出 Car {make: "Ford", model: "Escape"}

call, bind, 和apply

我们可以显示的在call(),bind(),apply()中设置this的绑定对象。这三个函数很类似,但是我们需要注意它们微小的区别。

<!-- call可以接收任意个数的参数,其中第一个必须是一个this对象,其余依次是所有的参数。 -->

我们来看一个例子:

输出 NaN

add函数输出NaN, 因为this.a和this.b未定义。

现在我们引入对象,并且使用call()和apply()来调用:

输出 10add.apply(ten, [3,4]);// 输出 10

当我们使用add.call(),第一个参数是this需要绑定的对象,剩下的是add函数本来的参数。因此,this.a指向ten.a,this.b指向ten.b。add.apply()也类似,除了第二个参数是一个数组,用于存储add函数的参数。

bind()函数和call()类似,但是bind()函数不会立即被调用。bind()函数会返回一个函数,并且将this绑定好。接下来我们来用例子来帮助理解bind()函数的应用场景:

执行:

输出 10

如果我们想使用large.a的值,而不是small.a呢? 我们可以使用call/apply:

输出 109

但是,如果我们现在还不知道这三个参数应该传入什么值,应该怎么办呢? 我们可以使用bind:

var bindTest = small.go.bind(large, 2);

如果我们将bindTest在控制台下打印出来,我们会看到:

输出 function (b,c,d){console.log(this.a+b+c+d);}

注意:该函数已经将this绑定到large对象,并且传入了第一个参数b。所以,我们接下来是需要传入余下的参数即可:

输出 109

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

JS中this的指向以及call、apply的作用(图文教程)

JS中this的指向以及call、apply的作用_基础知识

PHP 中 self、static、$this 的区别和后期静态绑定详解

小编还为您整理了以下内容,可能对您也有帮助:

在JavaScript函数中this指向的是什么

今天将和大家分享JavaScript中一个重要知识点this,有一定的参考价值,希望对大家学习有所帮助。

对于this关键字的学习经常让我们感到困惑,搞不清楚它在函数中指代的是什么以及如何去使用它,今天将在文章中为大家详细介绍有关this的知识

【推荐课程:JavaScript教程】

上下文和this关键字

在JavaScript中,函数有自己的执行上下文,在这里要特别注意下函数的执行上下文不是关于它是如何声明的,也不是说函数的作用,而是关于如何在代码中调用它,我们在调用此执行上下文时就会用到this。当this从函数内部访问时,实际上就是访问其执行上下文。

调用函数方式与this

上下文取决于函数的调用方式,我们可以通过4种不同的方式来调用上下文的函数,因此this也有四种不同的指向

1. 一个基本的函数调用

2. 使用上下文对象调用函数,也称为隐式绑定。

3. 使用call()或调用函数apply(),也称为显式绑定。

4. 通过bind()方法绑定

基本函数调用

基本函数调用是调用函数的最简单方法

例:

<script type="text/javascript">

var name="张三";

function student(){

console.log(this.name);

}

student();

</script>

在这个例子中可以看出student()是从全局范围内调用函数,因此这里的this指代的是全局范围,所以输出结果为“”张三“”

隐式绑定

当函数被一个对象“包含”的时候,我们称函数的this被隐式绑定到这个对象里面了

<script type="text/javascript">

var student={

name:"张三",

obj:function(){

console.log(this.name)

}

}

student.obj();

</script>

obj函数虽然被放到对象里去但是并不会因为它被定义在对象的内部就会与外部产生区别,在隐式绑定下,obj通过this还是可以访问到student对象中的a属性

显示绑定

可以使用call()或apply()方法调用函数,其执行上下文显式绑定到对象,call和apply可以改变this指向

例:未使用call ()或者apply()时

<script type="text/javascript">

var name="张三";

var obj = {

name:"李四",

fun:function(){

console.log(this.name);}}

obj.fun();

</script>

利用call()使this指向window

<script type="text/javascript">

var name="张三";

var obj = {

name:"李四",

fun:function(){

onsole.log(this.name);}}

obj.fun.call(window);

</script>

bind()绑定

bind()会创建一个函数,函数体内的this对象的值会被绑定到传入bind()第一个参数的值,但是bind不执行函数,只返回一个可供执行的函数

<script type="text/javascript">

var a = {

b : function(){

var func = function(){

console.log(this.c);

}

func.bind(this)();

},

c : 'Hello!'

}

a.b();

</script>

通过bind方法将this指向c对象中的内容。

总结:

javascript中的this到底指什么?

javascript中的this到底指什么?

this是一个语言中的关键字,它就是一个对象。

thispage的意思是这个页面。

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

JAVASCRIPT中的this到底是谁

全局对象

在全局执行上下文(函数之外),this引用的是全局对象.

函数

在函数里面,this这个值,得看怎么来调用这个函数

.没有申明为严格模式下,this必须要有一个值去赋予.默认情况下就是指向的是全局对象

严格模式下, this没有被申明,则为undefined.他也可以是任何值,比如null或者42或者其他.

当一个函数作为一个对象的方法去调用,this指向的是对象本身.

对象原型链中的this 是继承的原型类对象

JavaScript中的Object到底是什么呢?

Object是一种引用类型,是一种数据结构,具有属性和方法。JavaScript中,除了数字、字符串、布尔值、null和undefined外,其他的所有值都是对象。数组、函数等都是一个对象。

手机中的JAVA到底指什么?

就是手机上装有java虚拟机,可以运行java编写的手机软件,一般的国产机都支持这个

佛教中的“上人”到底指什么?

指持戒严格并精于佛学的僧侣。《释氏要览》称:「智德,外有德行,在人之上、名上人。」

防晒霜中的UV到底指什么?

UV=ultraviolet radiation ,在化妆品行业里,以UV来表示紫外线,像防晒霜等夏日化妆品上有很多UV的标志,是表示防紫外线。

ACG中的G到底指什么?Game还是Gal

ACG是Animation、Comic、Game的缩写,是动画、漫画、游戏(通常指电玩游戏或GalGame)的总称。 GAL就是Galgame了,是一种可以与美丽动人的动画少女进行互动的电子游戏,特属于日本的文化现象。 所以ACG是包含着GAL的~

java 中的语法到底指的什么?

java中的语法是指java中的规则,即java的命名规则:

包的命名  (全部小写,由域名定义)

Java包的名字都是由小写单词组成。但是由于Java面向对象编程的特性,每一名Java程序员都 可以编写属于自己的Java包,为了保障每个Java包命名的唯一性,在最新的Java编程规范中,要求程序员在自己定义的包的名称之前加上唯一的前缀。 由于互联网上的域名称是不会重复的,所以程序员一般采用自己在互联网上的域名称作为自己程序包的唯一前缀。例如:.frontfree.javagroup

类的命名 (单词首字母大写)

根据约定,Java类名通常以大写字母开头,如果类名称由多个单词组成,则每个单词的首字母均应为大 写例如TestPage;如果类名称中包含单词缩写,则这个所写词的每个字母均应大写,如:XMLExample,还有一点命名技巧就是由于类是设计用来 代表对象的,所以在命名类时应尽量选择名词。

例如: Graphics

方法的命名 (首字母小写,字母开头大写)

方法的名字的第一个单词应以小写字母作为开头,后面的单词则用大写字母开头。

例如:drawImage

常量的命名 (全部大写 ,常加下划线)

常量的名字应该都使用大写字母,并且指出该常量完整含义。如果一个常量名称由多个单词组成,则应该用下划线来分割这些单词。

例如:MAX_VALUE

参数的命名

参数的命名规范和方法的命名规范相同,而且为了避免阅读程序时造成迷惑,请在尽量保证参数名称为一个单词的情况下使参数的命名尽可能明确。

知识扩展:

在变量命名时要注意以下几点:

1.选择有意义的名字,注意每个单词首字母要大写。

2.在一段函数中不使用同一个变量表示前后意义不同的两个数值。

3.i、j、k等只作为小型循环的循环索引变量。

4.避免用Flag来命名状态变量。

5.用Is来命名逻辑变量,如:blnFileIsFound。通过这种给布尔变量肯定形式的命名方式,使得其它开发人员能够更为清楚的理解布尔变量所代表的意义。

6.如果需要的话,在变量最后附加计算限定词,如:curSalesSum。

7.命名不相包含,curSales和curSalesSum。

8.static final 变量(常量)的名字应该都大写,并且指出完整含义。

9.如果需要对变量名进行缩写时,一定要注意整个代码中缩写规则的一致性。例如, 如果在代码的某些区域中使用intCnt,而在另一些区域中又使用intCount,就会给代码增加不必要的复杂性。建议变量名中尽量不要出现缩写。

10.通过在结尾处放置一个量词,就可创建更加统一的变量,它们更容易理解,也更容易搜索。例如,请使用 strCustomerFirst和strCustomerLast,而不要使用strFirstCustomer和strLastCustomer。常 用的量词后缀有:First(一组变量中的第一个)、Last(一组变量中的最后一个)、Next(一组变量中的下一个变量)、Prev(一组变量中的上 一个)、Cur(一组变量中的当前变量)。

11.每个变量选择最佳的数据类型,这样即能减少对内存的需求量,加快代码的执行速度,又会降低出错的可能性。用于变量的数据类型可能会影响该变量进行计算所产生的结果。在这种情况下,编译器不会产生运行期错误,它只是迫使该值符合数据类型的要求。这类问题极难查找。

12.尽量缩小变量的作用域。如果变量的作用域大于它应有的范围,变量可继续存在,并且在不再需要该变量后的很长时间内仍然占用资源。它们的主要问题是,任何类 中的任何方法都能对它们进行修改,并且很难跟踪究竟是何处进行修改的。占用资源是作用域涉及的一个重要问题。对变量来说,尽量缩小作用域将会对应用程序的 可靠性产生巨大的影响。

关于常量的命名方法,在JAVA代码中,无论什么时候,均提倡应用常量取代数字、固定字符串。也就是 说,程序中除0,1以外,尽量不应该出现其他数字。常量可以集中在程序开始部分定义或者更宽的作用域内,名字应该都使用大写字母,并且指出该常量完整含 义。如果一个常量名称由多个单词组成,则应该用下划线“_”来分割这些单词如:NUM_DAYS_IN_WEEK、MAX_VALUE。

wifi中的fingerprint到底指的什么意思

fingerprint

英 [ˈfɪŋgəprɪnt] 美 [ˈfɪŋgərprɪnt]

n. 指纹,指印

vt. 采指纹

装个腾讯WIFI管家就好了嘛

它可以自动发现附近可直接连接的WIFI进行连接

而且在地铁都可以用,现在也就它支持了,其他软件都还不行呢

javascript中的this到底指什么?

JavaScript:this是什么?

定义:this是包含它的函数作为方法被调用时所属的对象。

说明:这句话有点咬嘴,但一个多余的字也没有,定义非常准确,我们可以分3部分来理解它!

1、包含它的函数。2、作为方法被调用时。3、所属的对象。

看例子:

function to_green(){

this.style.color="green";

}

to_green();

上面函数中的this指的是谁?

分析:包含this的函数是,to_green

该函数作为方法被调用了

该函数所属的对象是。。?我们知道默认情况下,都是window对象。

OK,this就是指的window对象了,to_green中执行语句也就变为,window.style.color="green"

这让window很上火,因为它并没有style这么个属性,所以该语句也就没什么作用。

我们在改一下。

window.load=function(){

var example=document.getElementById("example");

example.onclick=to_green;

}

这时this又是什么呢?

我们知道通过赋值操作,example对象的onclick得到to_green的方法,那么包含this的函数就是onclick喽,

那么this就是example引用的html对象喽。

this的环境可以随着函数被赋值给不同的对象而改变!

下面是完整的例子:

<script type="text/javascript">

function to_green(){

this.style.color="green";

}

function init_page(){

var example=document.getElementById("example");

example.onclick=to_green;

}

window.onload=init_page;

</script>

<a href="#" id="example">点击变绿</a>

参考资料:http://hi.baidu.com/tkocn/blog/item/7c66bd02f7395b084afb5150.html

JS中this指向的几种函数调用方法的介绍

本篇文章给大家带来的内容是关于JS中this指向的几种函数调用方法的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

初学javascript总会对this指向感到疑惑,想要深入学习javascript,必须先理清楚和this相关的几个概念。javascript中this总是指向一个对象,但具体指向谁是在运行时根据函数执行环境动态绑定的,而并非函数被声明时的环境。除去不常用的with和eval的情况,具体到实际应用中,this指向大致可以分为以下4种。

作为对象的方法调用当函数作为对象的方法被调用时,this指向该对象:

var person = {

name: 'twy',

getName: function() {

console.info(this === person); // 输出true

console.info(this.name); // 输出twy

}

}

person.getName();作为普通函数调用当函数作为普通的函数被调用时,非严格模式下this指向全局对象:

function getName(){

// 非严格模式

console.info(this === window); // 浏览器环境下输出true

}

getName();严格模式下this为undefined:

function getName(){

// 严格模式

"use strict"

console.info(this === window); // 输出false

}

getName();构造器调用当new一个对象时,构造器里的this指向new出来的这个对象:

function person(){

// 构造函数

this.color = 'white';

}

var boy = new person();

console.info(boy.color); // 输出whitecall或apply调用用 Function.prototype.apply 或 Function.prototype.call 可以动态改变传入函数的this指向:

// 声明一个父亲对象,getName方法返回父亲的名字

var father = {

name: 'twy',

getName: function(){

return this.name;

}

}

// 生命一个儿子对象,但是没有返回名字的功能

var child = {

name: 'chy'

}

console.info(father.getName()); // 输出twy

// 使用call或apply将father.getName函数里this指向child

console.info(father.getName.call(child)); // 输出chy

console.info(father.getName.apply(child)); // 输出chy

瑞奇养生还为您提供以下相关内容希望对您有帮助:

javascript中的this到底指什么?

定义:this是包含它的函数作为方法被调用时所属的对象。说明:这句话有点咬嘴,但一个多余的字也没有,定义非常准确,我们可以分3部分来理解它!1、包含它的函数。2、作为方法被调用时。3、所属的对象。看例子:function...

在JavaScript函数中this指向的是什么

因此这里的this指代的是全局范围,所以输出结果为“”张三“”隐式绑定当函数被一个对象“包含”的时候,我们称函数的this被隐式绑定到这个对象里面了var student={name:"

javascript 中的this如何判断他是代表哪一个对象呢

一.This对象的概述 在javascript编程中,我们经常用到this关键字,但有时也经常被它搞得头晕,下面将说明this的作用范围与以及它所指代的对象。This特指当前对象,所有通过this.attr赋予的属性,都属于当前对象;那当前对象是...

电视剧&lt;第100个新娘&gt;的大结局

韩威也向依凡求婚,依凡不愿连累任何人.小刚说出因为当初依凡是对着他许下做第一百个新娘的心愿,他最有理由帮助依凡完成这个心愿.公司员工筹划依凡的婚礼,但依凡不愿意再提自己做新娘的事.,她安排好"绝色"的一切,提议由她来...

JS基础系列-聊聊this

面向对象编程中,我们经常要和this打交道。而对于函数中this到底指向哪里,对刚开始接触JavaScript的我们,经常会分不清楚。我们必须明确的是函数中this的指向 不是固定 的,和函数执行时的环境有关,简单的说,我们可以...

javascript中this用法

下面分四种情况,详细讨论this的用法。情况一:纯粹的函数调用 这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。请看下面这段代码,它的运行结果是1。function test(){ this.x = 1;alert(this.x);...

javascript中的this指的对象是什么?

查看JavaScript中this指向的对象,this指向的一句话法则:永远指向其所在函数的所有者如果没有所有者时,指向window。理解this的要点:关键在于将函数与函数名分开看待。同一个函数,在不同的执行方法下,会有不同的效果。1)...

在javascript中,function里this的指向是怎样的?

Javascript中一个函数的this关键字的行为相对其它语言有些不同。在严格模式和非严格模式间也有区别。在大多数情况下,this的值由函数如何调用来决定。this值不能在函数执行过程中赋值设置,并且每次函数调用时this值可能也不...

JavaScript 关于this的赋值问题

doSomething()的时候,它的owner是页面,或者是JavaScript中的window对象(或 global对象)。对于一个onclick属性,它为它所属的HTML元素所拥有,this应该指向该HTML元素。2.1在几种常见场景中this的变化 函数示例 function do...

js中new()如何改变构造函数返回值与this指向

以这种方式调用构造函数实际上会经历以下 4个步骤:(1) 创建一个新对象;(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象) ;(3) 执行构造函数中的代码(为这个新对象添加属性) ;(4) 返回新对象...

Top