整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

JavaScript this关键字：为何如此关键？如何正确绑定？

JavaScript中，this关键字的指向是动态变化的，它依赖于函数的调用方式。理解this的指向是JavaScript编程中的一项重要技能，因为它直接影响到函数内部访问到的对象。下面详细解释几种常见的this指向情况：

1. 全局环境中的this

在全局作用域（浏览器中的全局对象是window，Node.js中的全局对象是global）中，this指向全局对象。

console.log(this === window); // 在浏览器中输出 true  
console.log(this.document !== undefined); // 验证this指向全局对象

2. 函数调用中的this

在普通函数调用时（非严格模式下），this指向全局对象（浏览器中是window，Node.js中是global）。在严格模式（'use strict';）下，this是undefined。

function test() {  
    console.log(this === window); // 非严格模式下为 true  
}  
  
test();  
  
function strictTest() {  
    'use strict';  
    console.log(this === undefined); // 严格模式下为 true  
}  
  
strictTest();

3. 方法调用中的this

当一个函数被保存为某个对象的属性时，我们称之为方法。在方法调用中，this指向调用该方法的对象。

const obj = {  
    method: function() {  
        console.log(this === obj); // 输出 true  
    }  
};  
  
obj.method();

4. 构造函数中的this

在构造函数中，this指向新创建的对象实例。

function Car(make, model) {  
    this.make = make;  
    this.model = model;  
}  
  
const myCar = new Car('Ford', 'Mustang');  
console.log(myCar.make); // 输出 Ford

5. 箭头函数中的this

箭头函数不绑定自己的this，它会捕获其所在上下文的this值，作为自己的this值。

const obj = {  
    method: function() {  
        return () => {  
            console.log(this === obj); // 输出 true  
        };  
    }  
};  
  
const func = obj.method();  
func();

6. 显式设置this

使用call()、apply()和bind()方法可以显式设置函数执行时this的指向。

  • call(thisArg, arg1, arg2, ...)
  • apply(thisArg, [argsArray])
  • bind(thisArg, arg1, arg2, ...)

这些方法都允许你调用一个函数，并显式地设置函数体内this的值，call和apply会立即执行函数，而bind会返回一个新的函数，这个新函数在被调用时，this会被设置为bind的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

使用call()

call()方法调用一个函数，其具有一个指定的this值和分别提供的参数（参数的列表）。

function greet(greeting, punctuation) {  
    console.log(this.name + ' says, ' + greeting + punctuation);  
}  
  
const person = {  
    name: 'Alice'  
};  
  
// 使用call()显式设置this指向person对象  
greet.call(person, 'Hello', '!');  
// 输出: Alice says, Hello!

使用apply()

apply()方法调用一个函数，其具有一个指定的this值，以及作为一个数组（或类数组对象）提供的参数。

function greet(greeting, punctuation) {  
    console.log(this.name + ' says, ' + greeting + punctuation);  
}  
  
const person = {  
    name: 'Bob'  
};  
  
// 使用apply()显式设置this指向person对象，参数作为数组传递  
greet.apply(person, ['Hi', '.']);  
// 输出: Bob says, Hi.

使用bind()

bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被指定为bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

function greet(greeting, punctuation) {  
    console.log(this.name + ' says, ' + greeting + punctuation);  
}  
  
const person = {  
    name: 'Charlie'  
};  
  
// 使用bind()创建一个新函数，其this指向person对象  
const greetCharlie = greet.bind(person, 'Hey', '!');  
  
// 调用新函数  
greetCharlie();  
// 输出: Charlie says, Hey!  
  
// 注意：bind()不会立即执行函数，而是返回一个新函数

理解这些this的指向规则，对于编写清晰、可维护的JavaScript代码至关重要。

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

生命不必每时每刻都要冲刺

低沉时

就当给自己放了一个悠长假期

- 2024.04.24 -

JavaScript关键字是一种特殊的标识符，它们在语言中有固定的含义，不能用作变量名或函数名。这些关键字是JavaScript的基础，理解它们是掌握JavaScript的关键。

今天，我们将一起探索JavaScript中的26个关键字，了解这些关键字各自独特的含义、特性和使用方法。



一、JavaScript关键字是什么

Javascript关键字（Keyword）是指在Javascript语言中有特定含义，成为Javascript语法中一部分的那些字，是 JavaScript 语言内部使用的一组名字（或称为命令）。

Javascript关键字是不能作为变量名和函数名使用的。使用Javascript关键字作为变量名或函数名，会使Javascript在载入过程中出现编译错误。


Java中的关键字可用于表示控制语句的开始或结束，或者用于执行特定操作等。按照规则，关键字也是语言保留的，不能用作标识符。


下面我们来详细介绍一下JavaScript关键字的作用和使用方法。


二、JavaScript的26个关键字

JavaScript是一种广泛使用的编程语言，它具有丰富的关键字，这些关键字在JavaScript语言中发挥着重要的作用，JavaScript一共提供了26个关键字：

break, case, catch, continue, debugger, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with

其中，debugger在ECMAScript 5 新增的。


1、break：跳出 循环

break用于跳出循环结构。循环结构是一种重复执行某个代码块的结构，break关键字可以用于循环结构中的条件语句中，用于跳出循环。例如：

for (var i = 0; i < 10; i++) {
if (i == 5) {
break; // 当i等于5时跳出循环
}
console.log(i);
}



2、case：捕捉

它用于在switch语句中定义一个分支。switch语句是一种根据表达式的值执行不同代码块的结构，case关键字可以用于switch语句中，用于定义不同的分支。例如：

switch (n) {

case 1:
console.log('n等于1');
break;
case 2:
console.log('n等于2');
break;
default:
console.log('n不等于1或2');
break;
}



3、catch：配合try进行错误判断

catch是JavaScript中的一个关键字，它用于捕获异常。异常是一种程序运行时出现的错误，catch关键字可以用于try-catch语句中，用于捕获并处理异常。例如：

try {
// 代码
} catch (e) {
console.log('发生异常：' + e.message);
}



4、continue：继续

continue用于跳过当前循环中的某个迭代。循环结构是一种重复执行某个代码块的结构，continue关键字可以用于循环结构中的条件语句中，用于跳过当前迭代。例如：

for (var i = 0; i < 10; i++) {
if (i == 5) {
continue; // 当i等于5时跳过当前迭代
}
console.log(i);
}



5、debugger：设置断点

它用于在代码中设置断点，方便调试代码。调试是一种在代码运行时发现和解决问题的过程，debugger关键字可以用于代码中，用于设置断点。例如：

function foo() {
var x = 10;
debugger; // 在这里设置断点
console.log(x);
}



6、default：配合switch，当条件不存在时使用该项

default用于在switch语句中定义一个默认分支。switch语句是一种根据表达式的值执行不同代码块的结构，default关键字可以用于switch语句中，用于定义默认分支。例如：

switch (n) {
case 1:
console.log('n等于1');
break;
case 2:
console.log('n等于2');
break;
default:
console.log('n不等于1或2');
break;
}


7、delete：删除了一个属性

delete用于删除对象的属性或数组中的元素。对象是JavaScript中的一种数据类型，它由一组属性组成，delete关键字可以用于对象的属性中，用于删除属性。例如：

var obj = {a: 1, b: 2, c: 3};
delete obj.b; // 删除对象obj的属性b
console.log(obj); // 输出{a: 1, c: 3}



8、do：声明一个循环

do用于定义一个do-while循环结构。循环结构是一种重复执行某个代码块的结构，do关键字可以用于do-while循环中，用于定义循环体。例如：

var i = 0;
do {
console.log(i);
i++;
} while (i < 10);


9、else：否则//配合if条件判断，用于条件选择的跳转

else用于在if语句中定义一个分支。if语句是一种根据条件执行不同代码块的结构，else关键字可以用于if语句中，用于定义另一个分支。例如：

if (n == 1) {
console.log('n等于1');
} else {
console.log('n不等于1');
}



10、finally：预防出现异常时用的

finally用于定义一个try-catch-finally语句中的finally块。try-catch-finally语句是一种用于处理异常的结构，finally关键字可以用于finally块中，用于定义一些必须执行的代码。例如：

try {
// 可能会抛出异常的代码
} catch (e) {
// 处理异常的代码
} finally {
// 必须执行的代码
}


11、for：循环语句

for用于定义一个for循环结构。循环结构是一种重复执行某个代码块的结构，for关键字可以用于for循环中，用于定义循环条件。例如：

for (var i = 0; i < 10; i++) {
console.log(i);
}



12、function：定义函数的关键字

function用于定义一个函数。函数是一种封装了一段代码的结构，它可以接受参数并返回结果。function关键字可以用于函数定义中，用于定义函数名和参数列表。例如：

function add(a, b) {
return a + b;
}
console.log(add(1, 2)); // 输出3



13、if：定义一个if语句

if用于定义一个if语句。if语句是一种根据条件执行不同代码块的结构，if关键字可以用于if语句中，用于定义条件。例如：

if (n == 1) {
console.log('n等于1');
} else {
console.log('n不等于1');
}



14、in：判断某个属性属于某个对象

in用于判断一个对象是否包含某个属性。对象是JavaScript中的一种数据类型，它由一组属性组成，in关键字可以用于对象中，用于判断对象是否包含某个属性。例如：

var obj = {a: 1, b: 2, c: 3};
if ('a' in obj) {
console.log('obj包含属性a');
} else {
console.log('obj不包含属性a');
}



15、instanceof：某个对象是不是另一个对象的实例

instanceof用于判断一个对象是否是某个类的实例。类是JavaScript中的一种数据类型，它由一组属性和方法组成，instanceof关键字可以用于类中，用于判断对象是否是该类的实例。例如：

function Person(name) {
this.name = name;
}
var p = new Person('张三');
if (p instanceof Person) {
console.log('p是Person类的实例');
} else {
console.log('p不是Person类的实例');
}



16、new：创建一个新对象

new用于创建一个对象。对象是JavaScript中的一种数据类型，它由一组属性和方法组成，new关键字可以用于类中，用于创建该类的实例。例如：

function Person(name) {
this.name = name;
}
var p = new Person('张三');
console.log(p.name); // 输出张三



17、return：返回

return用于从函数中返回一个值。函数是JavaScript中的一种数据类型，它由一段代码块组成，return关键字可以用于函数中，用于返回函数的执行结果。例如：

function add(a, b) {
return a + b;
}

console.log(add(1, 2)); // 输出3



18、switch：弥补if的多重判断语句

switch用于根据不同的条件执行不同的代码块。switch语句是一种根据条件执行不同代码块的结构，switch关键字可以用于switch语句中，用于定义条件。例如：

var day = 3;
switch (day) {
case 1:
console.log('星期一');
break;
case 2:
console.log('星期二');
break;
case 3:
console.log('星期三');
break;
default:
console.log('不是星期一、二、三');
}



19、this：总是指向调用该方法的对象

this用于引用当前对象。对象是JavaScript中的一种数据类型，它由一组属性和方法组成，this关键字可以用于对象中，用于引用当前对象的属性和方法。例如：

var obj = {
name: '张三',
sayName: function() {
console.log(this.name);
}
};
obj.sayName(); // 输出张三



20、throw：抛出异常

throw是JavaScript中的一个关键字，它用于抛出一个异常。异常是JavaScript中的一种错误类型，它可以用于在程序运行过程中发现错误并停止程序的执行。throw关键字可以用于函数中，用于抛出异常。例如：

function divide(a, b) {
if (b === 0) {
throw new Error('除数不能为0');

}
return a / b;
}
console.log(divide(10, 0)); // 抛出异常



21、try：接受异常并做出判断

try是JavaScript中的一个关键字，它用于捕获异常。异常是JavaScript中的一种错误类型，它可以用于在程序运行过程中发现错误并停止程序的执行。try语句是一种捕获异常的结构，try关键字可以用于try语句中，用于捕获异常。例如：

function divide(a, b) {
if (b === 0) {
throw new Error('除数不能为0');
}
return a / b;
}
try {
console.log(divide(10, 0)); // 抛出异常
} catch (e) {
console.log(e.message); // 输出除数不能为0
}



22、typeof：检测变量的数据类型

typeof是JavaScript中的一个关键字，它用于获取变量的类型。变量是JavaScript中的一种数据类型，它可以是数字、字符串、布尔值等。typeof关键字可以用于变量中，用于获取变量的类型。例如：

var a = 10;
console.log(typeof a); // 输出number



23、var：声明变量

var是JavaScript中的一个关键字，它用于声明变量。变量是JavaScript中的一种数据类型，它可以用于存储数据。var关键字可以用于变量中，用于声明变量。例如：

var a = 10;
console.log(a); // 输出10


24、void:空/ 声明没有返回值

void是JavaScript中的一个关键字，它用于执行一个表达式并返回undefined。undefined是JavaScript中的一种特殊值，它表示一个未定义的值。void关键字可以用于表达式中，用于执行表达式并返回undefined。例如：

function doSomething() {
console.log('执行了doSomething函数');
}
var result = void doSomething();
console.log(result); // 输出undefined



25、while

while是JavaScript中的一个关键字，它用于创建一个循环结构。循环是JavaScript中的一种控制结构，它可以用于重复执行一段代码。while关键字可以用于循环中，用于创建一个基于条件的循环。例如：

var i = 0;
while (i < 10) {
console.log(i);
i++;
}



26、with

with是JavaScript中的一个关键字，它用于创建一个作用域。作用域是JavaScript中的一种机制，它可以用于控制变量的作用范围。with关键字可以用于代码块中，用于创建一个作用域。例如：

var obj = {
name: '张三',
age: 20
};
with (obj) {
console.log(name); // 输出张三
console.log(age); // 输出20
}

想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！云端源想-程序员必看的精品课程

三、JS关键字注意事项

在开发过程中使用关键字我们需要注意以下几点：



区分大小写：JavaScript是区分大小写的，因此关键字的大小写必须正确。

不能用作变量名：关键字不能被用作变量名，函数名等等，会出现问题。

不需要硬记关键字：关键字不用去硬记，我们在编写代码时根据系统的提示去规避就可以了。

保留字：JavaScript有一些保留字，不能用作变量名、函数名或属性名。

不要使用全局变量：尽量避免使用全局变量，以免与其他脚本或库发生冲突。可以使用立即执行函数表达式（IIFE）或模块模式来避免全局变量污染。

使用严格模式：在代码中添加"use strict"指令，以启用严格模式。这将有助于避免一些常见的错误，例如未声明的变量、隐式类型转换等。

避免使用eval()函数：eval()函数用于动态执行字符串中的JavaScript代码，但可能导致性能问题和安全风险。尽量避免使用eval()，寻找其他替代方案。

不要使用with语句：with语句会改变代码的作用域链，可能导致意外的错误。尽量避免使用with语句，改用局部变量或对象属性访问。

避免使用重复的标识符：确保变量名、函数名和属性名在同一作用域内是唯一的，以避免命名冲突。

遵循编码规范：遵循一致的命名约定、缩进风格和代码结构，以提高代码的可读性和可维护性。


四、关于保留字的了解

除了关键字还有个“保留字”的概念，所谓保留字，实际上就是预留的“关键字”。意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当充当变量名、函数名等标识符。


下面是JavaScript中保留字的含义，大家同样不用记，了解一下就行了。


以上就是关于JavaScript关键字的相关内容了，通过了解这26个JavaScript关键字的含义、特性和使用方法，你已经迈出了成为编程高手的重要一步。


记住，实践是学习的关键，不断地编写代码并应用这些关键字，你将逐渐掌握JavaScript的精髓。


如果觉得本文对你有所帮助，别忘了点赞和分享哦！

我们下期再见！


END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

avaScript的组成部分

  1. ECMAScript：JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)。
  2. 文档对象模型：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。
  3. 浏览器对象模型：BOM（浏览器对象模型）对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口，移动、改变和关闭浏览器窗口等等。

JavaScript关键字和保留字

JavaScript描述了一组具有特定用途的关键字，一般用于控制语句的开始或结束，或者用于执行特定的操作等。

JavaScriptScript全部关键字
​

break

else

new

var

case

finally

return

void

catch

for

switch

while

continue

function

this

with

default

if

throw


delete

in

try


do

instanceof

typeof


JavaScript还描述了另一组不能用作标识符的保留字。尽管保留字在JavaScript中还没有特定的用途，但它们很有可能在将来被用作关键字。

​JavaScriptScript全部保留字
​

abstract

enum

int

short

boolean

export

interface

static

byte

extends

long

super

char

final

native

synchronized

class

float

package

throws

const

goto

private

transient

debugger

implements

protected

volatile

double

import

public


​JavaScriptScript浏览器定义的保留字
​

alert

eval

location

open

array

focus

math

outerHeight

blur

funtion

name

parent

boolean

history

navigator

parseFloat

date

image

number

regExp

document

isNaN

object

status

escape

length

onLoad

string

JavaScript变量

什么是变量？

  1. 在JavaScript中，变量指的是一个可以改变的量。也就是说，变量的值在程序运行过程中是可以改变的。
  2. 变量是用于存储数据的"容器"。我们通过「变量名」获取数据，甚至可以修改数据。
  3. 变量的本质是程序在内存中申请的一块用来存放数据的空间。

变量的命名

1.变量的名字就和我们的名字一样，程序也需要通过名字来找到对应的数据。

例如：曹老师，我想要JavaScript的视频。曹老师就是变量的名字，JavaScript的视频就是变量的值。

2.在JavaScript中，给一个变量命名，我们需要遵循以下的原则：

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）
  • JavaScript 语句和 JavaScript 变量都对大小写敏感
  • 变量的声明不能使用保留字和关键字

变量的使用

1.定义变量时要使用var操作符（var是关键），后面跟一个变量名（变量名是标识符）。

例：var a = 100;

如下图所示：

全套前端课程及资料请伽薇xiaole45666


2.一个var也可以同时声明多个变量名，其中变量名之间必须用英文逗号（,）隔开，例如：

var a=10,b=20,c=30;

JavaScript的常量

在JavaScript中，常量指的是一个不能改变的量。也就是说，常量的值从定义开始就是固定的，一直到程序结束都不会改变。

在JavaScript中，我们可以把常量看成是一种特殊的变量，之所以特殊，是因为它的值是不会变的。一般情况下，常量名全部大写，别人一看就知道这个值很特殊，有特殊用途，如：var DEBUG = 1

目前我们只需要简单了解常量的知识，在之后的课程中我们会详细讲解。如需全套完整前端开发教程及配套资料请伽薇xiaole45666


在线咨询
上一篇：推荐五个html5/css3手机网页模版
下一篇：HTML与CSS的链接方式分类

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 泰安 达尔罕茂明安联合旗 石鼓区 汉寿县 琼结县 五华县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服