一篇文章带你了解JavaScript this关键字

Karen110
• 阅读 1406

与其他语言相比,this关键字在JavaScript中的行为略有不同。JavaScript中,this关键字引用其所属的对象。根据使用位置,它具有不同的值。

一、前言

方法中,this关键字引用其所属的对象。

  1. this指的是全局对象在函数中。

  2. this引用全局对象在函数中。

  3. 在严格模式下,this是未定义的在事件中。

  4. this指的是接收事件的元素像call()和apply()这样的方法,可以将其引用到任何对象。

二、方法上下文

在对象方法中,this指代方法的user。

当调用user.getName()时,函数内部将this绑定到user对象:

例:


<!DOCTYPE html>
<html>
<title>项目</title>

<body style="background-color: aqua;">

<p>在此示例中,<b> user </b>对象是<b> getName </b>方法的所有者:</p>

<script>
// 创建一个对象
var user = {
firstName: "基础教程",
lastName: "baidu.com",
age: 5,
getName: function() {
return this.firstName + " " + this.lastName;
}
};

document.write(user.getName());
</script>

</body>
</html>

一篇文章带你了解JavaScript this关键字

这里user对象是所有者getName的方法。

1. 全局上下文

在全局执行上下文中(在任何函数之外),this无论是否处于严格模式下,都引用全局对象。

示例

<!DOCTYPE html>
<html>
<title>项目</title>

<body style="background-color: aqua;"> 

<p>在全局执行上下文中(在任何函数之外),这指的是全局对象:</p>

<p>访问调试在您的浏览器按F12,并选择"控制台"在调试器菜单:</p>

<script>
//在Web浏览器中,窗口对象也是全局对象:
console.log(this === window); // true

a = 50;
console.log(window.a); // 50

this.b = "baidu.com";
console.log(window.b) // "nhooo.com"
console.log(b) // "nhooo.com"
</script>

</body>
</html>

一篇文章带你了解JavaScript this关键字

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

2. 函数上下文

在函数内部,this值取决于函数的调用方式。由于以下代码不在严格模式下,this因此默认为全局对象,即浏览器中的[object Window]。


function myFunc() {
return this;
}

在严格模式,然而this的值是undefined。


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

因此,在严格模式下,如果执行上下文未定义它,则它将保持未定义状态。

三、this在DOM事件处理程序中

当一个函数用作事件处理程序时,this将被设置为触发事件的元素:

示例

let btn = document.querySelector("button");

btn.onclick = function() {
this.style.display = "none";
};

从内联事件处理程序调用代码时,会将this设置为放置监听器的元素:

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

一篇文章带你了解JavaScript this关键字

一篇文章带你了解JavaScript this关键字

四、显式函数绑定

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

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

<script>
function add(c, d) {
return this.a + this.b + c + d;
}

var obj = {
a: 5,
b: 10
};

//第一个参数是用作
//'this',后续参数作为
//函数调用中的参数
document.writeln(add.call(obj, 5, 7)); // 27

//第一个参数是要使用的对象
// 'this',第二个是一个数组
//成员用作函数调用中的参数
document.writeln(add.apply(obj, [10, 20])); // 45
</script>

一篇文章带你了解JavaScript this关键字

箭头函数(=>)

在箭头函数(=>)中,this始终指向它被创建时所处的词法作用域中的this。全局代码中,它将被设置为全局对象:


<script>
var globalObj = this;
var myFunc = (() => this);

document.write(myFunc() === globalObj);// true
</script>

一篇文章带你了解JavaScript this关键字

五、总结


本文基于JavaScript 基础,介绍了this 关键字,与其他语言相比,this关键字在JavaScript中的行为略有不同,对this ,包括(全局,函数,函数绑定)常见的用法进行了详细的讲解。希望能够通过文章的学习,让读者更好的认识,学习JavaScript。

**-----**------**-----**---**** End **-----**--------**-----**-****

一篇文章带你了解JavaScript this关键字

往期精彩文章推荐:

一篇文章带你了解JavaScript this关键字

欢迎各位大佬点击链接加入群聊【helloworld开发者社区】:https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。

点赞
收藏
评论区
推荐文章
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Karen110 Karen110
3年前
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript有函数作用域:这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域:它们只能在函数中访问。JS://codeherecann
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
JavaScript学习总结(十七)——Javascript原型链的原理
一、JavaScript原型链ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。在JavaScript中,用__proto__属性来表示一个对象的原型链。当查找一个对象的属性时,JavaScript会向上遍历原型
Stella981 Stella981
3年前
JavaScript的 基本数据类型
第一:Javascript对象是第二:Javascript中第三:Javascript的对象是数据;第四:JavaScript中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个JavaScript字符串参考https://www
Wesley13 Wesley13
3年前
BOOM和DOOM操作
\TOC\BOMBOM操作指的是浏览器对象模型,它可以是JavaScript可以于浏览器进行对话,在JavaScript中与浏览器交互就是对window对象进行操作window对象window对象是客户端JavaScript最高层对象之一,由于window对象是其他大部分对象的共同的祖先,在调用window对象的
Stella981 Stella981
3年前
JavaScript面向对象编程的15种设计模式
在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”。在JavaScript中并没有类这种概念,面向对象编程不是基于类,而是基于原型去面向对象编程,JS中的函数属于一等对象,而基于JS中闭包与弱类型等特性,在实现一些设计模式的方式上与众不同。ps:本文之讲述面向对象编程的设计模式策略,JavaScript原型的基础请参考阮一峰面向
Wesley13 Wesley13
3年前
JS篇(004)
答案:1.脚本语言。JavaScript是一种解释型的脚本语言,C、C等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。2.基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。3.简单。JavaScript语言中采用的是弱类型的变量
Stella981 Stella981
3年前
Javascript定义类(class)的三种方法
在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法。Javascript语言不支持"类",但是可以用一些变通的方法,模拟出"类"。一、构造函数法这是经典方法,也是教科书必教的方法。它用构造函数模拟"类",在其内部用this关键字指代实例对象。  function