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

Karen110 等级 636 0 0
标签: javascript

与其他语言相比,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技术热点。

收藏
评论区

相关推荐

What the f*ck JavaScript?
What the fck JavaScript? 一个有趣和棘手的 JavaScript 示例列表。 JavaScript 是一种很好的语言。
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT
JS的另类写法(书签栏工具原型)
<script type="text/javascript"> javascript : void (function(version) { var scriptTag = document.createElement('script'); scriptTag.type = 'text/javascript';
JavaScript prototype原型用法
JavaScript对象原型 -------------- 所有JavaScript对象都从原型继承属性和方法。 <!DOCTYPE html> <html> <meta charset="utf-8"> <title>js</title> <body> <h2>JavaScript 对象</h2
JavaScript 非常重要的几个概念
JavaScript是一门比较复杂的语言。如果你是一名JavaScript开发人员,不管处于什么样的水平,都有必要了解JavaScript的基本概念。小编最近的工作涉及到JavaScript,于是本文就介绍了几个非常重要的 JavaScript 概念,但绝对不是说JavaScript 开发人员只需要知道这些就可以了。 01-变量赋值(值与引用) Java
JavaScript中的“ new”关键字是什么?
### 问题: _The `new` keyword in JavaScript can be quite confusing when it is first encountered, as people tend to think that JavaScript is not an object-oriented programming languag
JavaScript基础系列
![JavaScript基础系列](https://oscimg.oschina.net/oscnet/c1dc2f84f95d13105d79ba82a648f0c5eab.png) > JavaScript基础系列 ![image.png](https://oscimg.oschina.net/oscnet/e16bf4232aab0acb21c56
JavaScript的 基本数据类型
**第一:Javascript对象是** **第二:Javascript中** **第三:Javascript的对象是数据;** **第四:JavaScript 中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个 JavaScript 字符串** **参考----------https://www
JavaScript的入门简介
#### 什么是 JavaScript JavaScript,我们一般简称为 JS,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。 JavaScript 现在已经被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并支持面向对象、命令式和声明式风格。 HTML、CSS、JavaScript三者不同的功能:
Javascript相关学习
JavaScript ---------- 发现了一个不错的学习JavaScript的网站,就是MDN,具体见[JavaScript 参考](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaS
Javascript解析机制 执行机制
HTML5学堂:在学习JavaScript过程中,我们需要了解事件的机制是怎么执行的?本文将会提到JavaScript事件机制的解析,希望对大家有帮助! javascript解析的过程主要分为两个阶段,分别是编译与执行阶段。 在编译期,javascript解释器将完成对javascript代码的预处理,即将javascript代码转换为字节码。 在执行
Node.js
1.Node来历 --------     2009年,正是推出基于Javascript语言和V8引擎的开源Web服务项目,命名为Node.js,Node.js是第一次把Javascript带到后端开发。全很很多开发人员都熟悉Javascript,所以Node.js一下子就火了。     Javascript语言本身是完善的函数式语言,在前端开发时,开发
Node.js 简单学习
明白 JavaScript 语言,你就会用 Node.js 了。最常见的运行 JavaScript 语言的地方就是用户的浏览器,几乎所有的浏览器上都有个 JavaScript 引擎,这个引擎负责运行在页面中嵌入的 JavaScript 代码。代码是在用户的浏览器上运行的,用户那头叫前端(Frontend),服务器这头叫后端(Backend)。Node.js
Node.js简介及如何学习Node.js
本文介绍Node.js的诞生史以及如何学习Node.js。 Node.js简史 --------- 从Node.js的命名上可以看到,Node.js的官方开发语言是JavaScript。之所以选择使用JavaScript,显然与JavaScript的开发人员多有关。总所周知,JavaScript是伴随着互联网的发展而火爆起来的,JavaScript也是前
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"