JavaScript this 关键词
var person = {firstName: "Bill",lastName : "Gates",id : 678,fullName : function() {return this.firstName + " " + this.lastName;} };
亲自试一试
this 是什么?
JavaScript this 关键词指的是它所属的对象。
它拥有不同的值,具体取决于它的使用位置:
- 在方法中,this 指的是所有者对象。
- 单独的情况下,this 指的是全局对象。
- 在函数中,this 指的是全局对象。
- 在函数中,严格模式下,this 是 undefined。
- 在事件中,this 指的是接收事件的元素。
像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。
方法中的 this
在对象方法中,this 指的是此方法的“拥有者”。
在本页最上面的例子中,this 指的是 person 对象。
person 对象是 fullName 方法的拥有者。
fullName : function() {return this.firstName + " " + this.lastName; }
亲自试一试
单独的 this
在单独使用时,拥有者是全局对象,因此 this 指的是全局对象。
在浏览器窗口中,全局对象是 [object Window]:
实例
var x = this;
亲自试一试
在严格模式中,如果单独使用,那么 this 指的是全局对象 [object Window]:
实例
"use strict"; var x = this;
亲自试一试
函数中的 this(默认)
在 JavaScript 函数中,函数的拥有者默认绑定 this。
因此,在函数中,this 指的是全局对象 [object Window]。
实例
function myFunction() {return this; }
亲自试一试
函数中的 this(严格模式)
JavaScript 严格模式不允许默认绑定。
因此,在函数中使用时,在严格模式下,this 是未定义的(undefined)。
实例
"use strict"; function myFunction() {return this; }
亲自试一试
事件处理程序中的 this
在 HTML 事件处理程序中,this 指的是接收此事件的 HTML 元素:
实例
<button οnclick="this.style.display='none'">点击来删除我! </button>
亲自试一试
对象方法绑定
在此例中,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 属性。
显式函数绑定
call() 和 apply() 方法是预定义的 JavaScript 方法。
它们都可以用于将另一个对象作为参数调用对象方法。
您可以在本教程后面阅读有关 call() 和 apply() 的更多内容。
在下面的例子中,当使用 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"
JavaScript this 关键词相关推荐
- 一站式报修微信小程序,让报修系统化,便民化。JavaScript this 关键词
var person = {firstName: "Bill",lastName : "Gates",id : 678,fullName : function( ...
- html插入javascript变量,javascript如何引用变量?
在JavaScript中我们可以动态指定变量的名称来对变量进行引用(调用).所有JavaScript变量必须以唯一的名称标识.这些唯一的名称称为标识符. JavaScript中动态指定变量的名称来对变 ...
- 通过什么途径能够深入了解JavaScript引擎是如何工作的?
昨天收到一封来自深圳的一位前端童鞋的邮件,邮件内容如下(很抱歉,未经过他的允许,公开邮件内容,不过我相信其他人肯定也有同样的问题,所以,直接把问题原文抛出来): "读了你的几篇关于JS(变量 ...
- JavaScript学习二
函数与方法 函数 函数通过 function 关键词进行定义,其后是函数名和括号 ().函数名可包含字母.数字.下划线和美元符号(规则与变量名相同)(在 JavaScript 中,函数是对象的方法,使 ...
- JavaScript运行原理解析
写在前面的话: 发现使用了那么长时间的Javascript,但是对其运行原理还是不清晰,今天特意总结一下,把大神们的理论和自己的总结都记录到下面: 1. 什么是JavaScript解析引擎? 简单地说 ...
- 透彻理解并掌握JavaScript的this
英文原文 学习前提:需要懂一些JS知识 学习耗时:约40分钟 前言 无论是JavaScript新手还是老手,JavaScript中的this关键词可能都会令你困惑.本文旨在透彻地阐述this.读完本文 ...
- 【JavaScript】重温第一次
JavaScript 显示方案 JavaScript 能够以不同方式"显示"数据: 使用 window.alert() 写入警告框 使用 document.write() 写入 H ...
- JavaScript let 与var 区别及var弊端
let,const来源 ES2015 引入了两个重要的 JavaScript 新关键词:let 和 const. 这两个关键字在 JavaScript 中提供了块作用域(Block Scope)变量( ...
- JavaScript复习(上)——使用、输出、语法、运算符、数据类型和函数
JavaScript 是属于 HTML 和 Web 的编程语言. 编程令计算机完成您需要它们做的工作. 一.JS的使用 1.JS位于<script>与 </script>标签之 ...
最新文章
- [导入]JavaScript 滑动条效果
- 设计面向游戏的人工智能(三):战术和战略人工智能 (AI)
- 如何系统地自学python100天_如何系统地自学 Python?
- Python刷题之路,怎样做才能让技术突飞猛进
- php导入img,PHP 转PDF(Img)
- SAP License:STMS权限
- ssh连接Linux很慢,且ssh传输文件很慢的解决方案
- 区块链教程Fabric1.0源代码分析putils(protos/utils工具包)
- c#中抽象类和接口异同
- SQL之EXISTS用法示例
- SimpleDateFormat-多线程问题
- 车险赔付率分析报告_车险经营情况分析报告模板.ppt
- 交通分配四阶段法(一)
- 重装系统后小喇叭显示未安装音频输出设备
- COFs单体—醛类单体/氨基单体/硼酸系列
- openslide安装问题
- Win7桌面显示音乐波动 - 音频频谱分析仪
- 加载组件Already included file name ‘e:/Vuejs/组件/单文件组件/vue_test/src/components/Message.vue‘ differs from
- 2022P02014139杨智关于香农编码、哈夫曼编码和费诺编码的比较
- PointPillars点云编码器代码运行过程中的问题及解决
热门文章
- 声明及赋值_重述《Effective C++》二——构造、析构、赋值运算
- LED 模板驱动程序的改造:总线设备驱动模型
- 源字符集与执行字符集
- crf linux使用教程,Linux下CRF++的使用
- carplay是否可以用安卓系统_是否可以仅用键盘来操作Windows 10系统和Windows 10应用?...
- 女主计算机的学霸,又一部青春网剧开机,学霸女主牵手计算机大神,另类爱情精彩上演...
- c++ 析构函数 ~
- Keras 文本预处理 text sequence
- java无法实例化类型_java – 无法实例化泛型中的类型
- Leetcode 22.括号生成 (每日一题 20210623)