JavaScript 52 JavaScript this 关键词

news/2024/4/27 21:52:54/文章来源:https://blog.csdn.net/weixin_44226181/article/details/127626945

JavaScript

文章目录

      • JavaScript
      • 52 JavaScript this 关键词
        • 52.1 this 是什么?
        • 52.2 方法中的 this
        • 52.3 单独的 this
        • 52.4 函数中的 this(默认)
        • 52.5 函数中的 this(严格模式)
        • 52.6 事件处理程序中的 this
        • 52.7 对象方法绑定
        • 52.8 显式函数绑定

52 JavaScript this 关键词

var person = {firstName: "Bill",lastName : "Gates",id       : 678,fullName : function() {return this.firstName + " " + this.lastName;}
};

52.1 this 是什么?

JavaScript this 关键词指的是它所属的对象。

它拥有不同的值,具体取决于它的使用位置:

  • 在方法中,this 指的是所有者对象。
  • 单独的情况下,this 指的是全局对象。
  • 在函数中,this 指的是全局对象。
  • 在函数中,严格模式下,this 是 undefined。
  • 在事件中,this 指的是接收事件的元素。

call()apply() 这样的方法可以将 this 引用到任何对象。

52.2 方法中的 this

在对象方法中,this 指的是此方法的“拥有者”。

在本页最上面的例子中,this 指的是 person 对象。

person 对象是 fullName 方法的拥有者。

fullName : function() {return this.firstName + " " + this.lastName;
}

52.3 单独的 this

在单独使用时,拥有者是全局对象,因此 this 指的是全局对象。

在浏览器窗口中,全局对象是 [object Window]

var x = this;

在这里插入图片描述

在严格模式中,如果单独使用,那么 this 指的是全局对象 [object Window]

"use strict";
var x = this;

在这里插入图片描述

52.4 函数中的 this(默认)

在 JavaScript 函数中,函数的拥有者默认绑定 this

因此,在函数中,this 指的是全局对象 [object Window]

function myFunction() {return this;
}

在这里插入图片描述

52.5 函数中的 this(严格模式)

JavaScript 严格模式不允许默认绑定。

因此,在函数中使用时,在严格模式下,this 是未定义的(undefined)。

"use strict";
function myFunction() {return this;
}

在这里插入图片描述

52.6 事件处理程序中的 this

在 HTML 事件处理程序中,this 指的是接收此事件的 HTML 元素:

<button onclick="this.style.display='none'">点击来删除我!
</button>

在这里插入图片描述

52.7 对象方法绑定

在此例中,this 是 person 对象(person 对象是该函数的“拥有者”):

var person = {firstName  : "Bill",lastName   : "Gates",id         : 678,myFunction : function() {return this;}
};

在这里插入图片描述

var person = {firstName: "Bill",lastName : "Gates",id       : 678,fullName : function() {return this.firstName + " " + this.lastName;}
};

在这里插入图片描述

this.firstName 意味着 this(person)对象的 firstName 属性。

52.8 显式函数绑定

call()apply() 方法是预定义的 JavaScript 方法。

它们都可以用于将另一个对象作为参数调用对象方法。

在下面的例子中,当使用 person2 作为参数调用 person1.fullName 时,this 将引用 person2,即使它是 person1 的方法:

var person1 = {fullName: function() {return this.firstName + " " + this.lastName;}
}
var person2 = {firstName:"Bill",lastName: "Gates",
}
person1.fullName.call(person2);  // 会返回 "Bill Gates"

在这里插入图片描述

显式函数绑定

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_410337.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2022年马丁·加德纳聚会数学魔术分享之《加加减减的奥秘》回顾

早点关注我&#xff0c;精彩不错过&#xff01;2022.10.30&#xff0c;本年度的线上马丁加德纳聚会如约举行。随着大家对线上这种活动方式的适应和不变的对趣味数学的热爱&#xff0c;今年聚会的规模&#xff0c;无论是线下还是线上&#xff0c;都朝着欣欣向荣的方向发展着。详…

【CV】第 7 章:使用 YOLO 进行对象检测

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

【历史上的今天】11 月 1 日:蒂姆·库克诞生;Amazon.com 注册域名;比特币问世

整理 | 王启隆 透过「历史上的今天」&#xff0c;从过去看未来&#xff0c;从现在亦可以改变未来。 今天是 2022 年 11 月 1 日&#xff0c;在 1949 年的今天&#xff0c;中国科学院在北京成立&#xff0c;它是中国最高学术领导机构的综合研究中心&#xff0c;首任院长是郭沫若…

【C++】继承- 赋值兼容转换、虚基表

前言 Hi~大家好呀&#xff01;欢迎来到我的C系列学习笔记&#xff01; 我上一篇的C笔记链接在这里哦~&#xff1a;【C】模板的非类型参数、特化、分离编译_柒海啦的博客-CSDN博客 C类与对象博客在这里哦~&#xff1a;【C】类和对象_柒海啦的博客-CSDN博客_c类和对象 本篇&#…

【异步系列五】关于async、await、promise、微任务、宏任务的执行顺序解析【最终篇】

前段时间总结了几篇关于异步原理、Promise原理、Promise面试题、async/await 原理的文章&#xff0c;链接如下&#xff0c;感兴趣的可以去看下&#xff0c;相信会有所收获。 一篇文章理清JavaScript中的异步操作原理 Promise原理及执行顺序详解 10道 Promise 面试题彻底理解…

输入输出、文件读写、数据类型

package chapter01 /* object:关键字&#xff0c;声明一个单例对象&#xff08;伴生对象&#xff09;*/ object HelloWorld {/*main方法&#xff1a;从外部可以直接调用执行的方法def 方法名称&#xff08;参数名称&#xff1a;参数数据类型&#xff09;:方法返回值类型 { 方法…

2.8 标准输入与格式化输出

文章目录1. Input 标准输入1.1 标准输入1.2 阻塞状态1.3 输入提示1.4 获取输入字符串1.5 输入版本差异1. Python3 输入数据类型2. Python2 输入数据类型2. Print 格式化输出2.1 输入2.2 sep 参数2.3 end 参数2.4 快捷写法2.5 格式化输出1. 语法格式2. 字典形式传值3. 元组形式传…

什么是GPT

什么是GPT 参考资料&#xff1a; https://zhuanlan.zhihu.com/p/350017443 https://zhuanlan.zhihu.com/p/106462515 https://www.cnblogs.com/yifanrensheng/p/13167796.html https://blog.csdn.net/weixin_45577864/article/details/119651372 Generative Pre-trained T…

这可能是你需要的vue考点梳理

对 React 和 Vue 的理解&#xff0c;它们的异同 相似之处&#xff1a; 都将注意力集中保持在核心库&#xff0c;而将其他功能如路由和全局状态管理交给相关的库&#xff1b;都有自己的构建工具&#xff0c;能让你得到一个根据最佳实践设置的项目模板&#xff1b;都使用了Virt…

Golang学习之路3-基础认识(下)

文章目录前言一、数组1.定长数组2.不定长数组二、map1.使用关键字 map 来声明2.使用 make 来声明3.添加元素4.检索key的value是否存在5.删除元素6.遍历map7.map的注意点在这里插入图片描述三、指针1.使用指针& 及 *2.空指针四、循环与条件判断1.循环2.条件判断前言 学习一…

Go语言函数

什么是函数 func main() {fmt.Println("hello,world")//调用函数fmt.Println(add(1, 2)) }// func 函数名&#xff08;参数&#xff0c;参数。。。&#xff09;&#xff0c;函数调用返回值类型&#xff08;&#xff09; func add(a, b int) int {c : a breturn c }函…

Ray tracing 光线追踪 之 embree ,从入门到精通 02 从源码编译与安装

1. 下载预编译的ispc&#xff0c;安装 网址&#xff1a; https://ispc.github.io resources -> github page 进入ispc 的github的release页&#xff1a;Releases ispc/ispc GitHub 找到一个预编译好了的ispc&#xff0c;其中在windows平台上是&#xff1a;https://github…

Redis缓存穿透、击穿、雪崩介绍

面试高频&#xff0c;工作常用 缓存穿透&#xff08;查不到&#xff09; 概念 用户想要查询一个数据&#xff0c;发现redis内存数据库没有&#xff0c;也就是缓存没有命中&#xff0c;于是向持久层数据库查询。发现也没有&#xff0c;于是本次查询失败&#xff0c;当用户很多的…

GO实现跳跃表

GO实现跳跃表 文章目录GO实现跳跃表跳跃表介绍跳跃表的实现跳跃表的结构创建跳跃表跳跃表的插入和删除跳跃表的排名操作跳跃表的区间操作完整实现跳跃表介绍 跳跃表&#xff08;skiplist&#xff09;是一种有序的数据结构&#xff0c;它通过建立多层"索引"&#xff…

世界城市日|数字城市里看不见的“保安”,真面目竟是…

2022年10月31日&#xff0c;是第8个世界城市日。在数字化浪潮席卷全球的当下&#xff0c;城市发展亦进入新的阶段。建造数字城市&#xff0c;全面推进城市数字化转型成为当前城市建设的热议话题。数字城市、万物互联&#xff0c;与网络空间的融合必不可少。然而系统的复杂度越高…

简单使用gige千兆网口工业相机,国产崛起(二,c#)

发现海康的sdk不错&#xff0c;可以用海康&#xff0c;basler&#xff0c;大华工业相机&#xff0c;估计其他的也可以&#xff0c;有机会试一试&#xff01;国产厉害&#xff0c;崛起了&#xff01;赞一个&#xff0c;热情爆棚&#xff01;且随窃喜&#xff01; 首先下载海康工…

网站SEO标题撰写技巧,做到这些可以提高点击率

搜索引擎认为&#xff0c;一个网站的点击率越高&#xff0c;那么这个网站就越受欢迎&#xff0c;因此就会提高网站的关键词排名。网站的点击率越高&#xff0c;就会获得更多流量。网站标题和点击率息息相关&#xff0c;一个好的网站标题&#xff0c;能够轻松获得流量。那么&…

[carla入门教程]-2 pythonAPI的使用

本专栏教程将记录我从安装carla到调用carla的pythonAPI进行车辆操控的全流程,带领大家从安装carla开始,到最终能够熟练使用carla仿真环境进行传感器数据采集和车辆控制. 第二节 pythonAPI的使用 本小节主要学习使用 pythonAPI来与carla服务器进行交互.包括获取信息,发送信息.…

IDEA热部署插件JRebel使用

JRebel安装与激活 JRebel 使用 此时已经安装好并已激活&#xff0c;我们使用 JRebel debug的时候&#xff0c;修改代码&#xff0c;不能实现热部署&#xff0c;因此还需要设置其他地方 1.项目自动编译 设置 compiler.automake.allow.when.app.running ctrlshiftA 或者 help->…

vue相关原理

vue 原理 面试为什么要考察原理 知其然知其所以然&#xff0c;各行各业通用的道理了解原理才能用的很好&#xff0c;专业性考察&#xff0c;技术的追求竞争激烈&#xff0c;则优录取大厂造轮子&#xff08;业务定制&#xff1a;有些框架不能满足需求&#xff09; 面试中如何…