20 JavaScript学习:变量提升和严格模式

简介: 20 JavaScript学习:变量提升和严格模式

JavaScript 变量声明提升

JavaScript 中的变量声明提升是指在代码执行过程中,变量的声明会被提升到当前作用域的顶部,而变量的赋值则会保留在原来的位置。这意味着可以在变量声明之前就使用变量,而不会报错。

例如:

console.log(x); // undefined
var x = 10;

在上面的例子中,变量 x 在声明之前就被使用了,但并没有报错,这是因为 JavaScript 在执行代码时会将变量声明提升到作用域的顶部,所以可以在声明之前就使用变量。

需要注意的是,只有变量的声明会被提升,而变量的赋值不会被提升。因此,如果在变量声明之前就使用了变量并且对其进行赋值,那么变量的值会是 undefined。

另外,使用 let 和 const 声明的变量不会发生变量声明提升,只有使用 var 声明的变量才会发生变量声明提升

JavaScript 初始化不会提升

在 JavaScript 中,只有变量声明会被提升,而变量的初始化(赋值)不会被提升。这意味着在变量声明之前就使用变量并对其进行初始化时,变量的值仍然会是 undefined。

例如:

console.log(x); // undefined
var x = 10;

在上面的例子中,变量 x 在声明之前就被使用了,但由于变量的初始化不会被提升,所以变量 x 的值仍然是 undefined。

另外,如果使用 let 或 const 声明变量,变量的初始化也不会被提升。因此,无论使用哪种方式声明变量,变量的初始化都不会影响变量声明提升的规则。

在头部声明你的变量

在 JavaScript 中,建议将变量的声明放在作用域的顶部,即在函数内部的第一行声明所有变量。这样做可以避免变量声明提升可能导致的混乱和错误。

例如:

function example() {
    var x;
    var y;
    
    // 其他代码
    x = 10;
    y = 20;
}

在上面的例子中,变量 x 和 y 在函数内部的顶部被声明,然后在后面的代码中进行初始化。这种做法可以使代码更加清晰和易于阅读,避免由于变量声明提升可能带来的意外行为。

总的来说,将变量的声明放在作用域的顶部是一种良好的编程习惯,可以提高代码的可读性和可维护性。

JavaScript 严格模式(use strict)

JavaScript 中的严格模式(strict mode)是一种在代码执行时更加严格的解析和错误处理模式。通过在代码开头添加 'use strict';,可以启用严格模式。

使用严格模式的好处包括:

  1. 阻止使用未声明的变量:在严格模式下,如果使用未声明的变量会导致 ReferenceError 错误。
  2. 阻止删除变量或函数:在严格模式下,使用 delete 操作符删除变量或函数会导致语法错误。
  3. 阻止重复的参数:在严格模式下,如果函数有重复的参数名称会导致语法错误。
  4. 禁止使用 eval 和 arguments:在严格模式下,不能使用 eval 函数和 arguments 对象。
  5. 提升安全性:严格模式下会禁止一些不安全的 JavaScript 语法,提高代码的安全性。

启用严格模式的方式是在代码开头添加 'use strict';

'use strict';
// 严格模式下的代码

需要注意的是,严格模式是可选的,可以选择性地在整个脚本文件或函数内启用。建议在新的代码中始终使用严格模式,以提高代码质量和安全性。

使用 “use strict” 指令

在 JavaScript 中,可以通过在代码的开头添加 "use strict"; 来启用严格模式。这个指令告诉 JavaScript 引擎在严格模式下解析代码。

示例:

"use strict";
// 严格模式下的代码
function example() {
    "use strict";
    // 严格模式下的函数内部代码
}

在上面的示例中,通过在代码开头和函数内部添加 "use strict";,就可以启用严格模式。在严格模式下,会有更严格的语法检查和错误处理,可以帮助开发者编写更加健壮和安全的代码。

需要注意的是,使用 "use strict"; 只能放在代码的开头或函数内部的开头,不能放在函数内部的其他位置。并且,如果在脚本的某个地方启用了严格模式,在该脚本的其他地方也会遵循严格模式的规则。

严格模式声明方式

在 JavaScript 中,可以使用 “use strict” 指令来启用严格模式。除了在整个脚本文件的开头添加 “use strict”,还可以在函数内部的开头添加 “use strict”,以使该函数内部遵循严格模式的规则。

示例:

function regularFunction() {
    // 正常模式下的函数代码
}
function strictFunction() {
    "use strict";
    // 严格模式下的函数代码
}

在上面的示例中,regularFunction 是一个普通的函数,在正常模式下执行。而 strictFunction 是一个启用了严格模式的函数,在该函数内部遵循严格模式的规则。

在函数内部使用 “use strict” 可以让开发者更灵活地控制代码的严格模式,只在需要的地方启用严格模式,而不是整个脚本文件都遵循严格模式。

需要注意的是,严格模式声明 “use strict” 必须放在函数内部的第一行,否则会导致语法错误。

严格模式的限制

JavaScript 的严格模式(strict mode)会对代码执行时的一些行为进行限制和改变,以提高代码质量和安全性。一些严格模式的限制包括:

  1. 禁止使用未声明的变量:在严格模式下,使用未声明的变量会导致 ReferenceError 错误。
  2. 禁止删除变量或函数:在严格模式下,使用 delete 操作符删除变量或函数会导致语法错误。
  3. 禁止重复的参数:在严格模式下,如果函数有重复的参数名称会导致语法错误。
  4. 禁止使用 eval 和 arguments:在严格模式下,不能使用 eval 函数和 arguments 对象。
  5. 禁止对只读属性赋值:在严格模式下,对只读属性赋值会导致 TypeError 错误。
  6. 禁止使用八进制字面量:在严格模式下,不能使用八进制字面量,会导致语法错误。
  7. 禁止使用 with 语句:在严格模式下,禁止使用 with 语句,会导致语法错误。
  8. this 的值为 undefined:在严格模式下,全局作用域中的 this 的值为 undefined,而不是 window 对象。

这些限制可以帮助开发者避免一些常见的错误和不安全的行为,提高代码的可靠性和可维护性。因此,建议在编写新的 JavaScript 代码时使用严格模式。

保留关键字

在 JavaScript 中,有一些保留关键字(Reserved Keywords),这些关键字在语言中有特殊的含义,不能用作变量名或函数名。使用这些保留关键字作为标识符会导致语法错误。

以下是 JavaScript 中的一些保留关键字:

  • abstract
  • boolean
  • break
  • case
  • catch
  • class
  • const
  • continue
  • debugger
  • default
  • delete
  • do
  • else
  • enum
  • export
  • extends
  • false
  • finally
  • for
  • function
  • if
  • implements
  • import
  • in
  • instanceof
  • interface
  • let
  • new
  • null
  • package
  • private
  • protected
  • public
  • return
  • static
  • super
  • switch
  • this
  • throw
  • true
  • try
  • typeof
  • var
  • void
  • while
  • with
  • yield

如果在代码中使用了这些保留关键字作为变量名或函数名,会导致语法错误。因此,在编写 JavaScript 代码时,应避免使用这些保留关键字作为标识符。如果确实需要使用这些关键字的含义,可以考虑添加额外的字符或下划线来区分,以避免冲突。

关注我,不迷路,共学习,同进步

关注我,不迷路,共学习,同进步

相关文章
|
1月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
57 3
|
2月前
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
30天前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
36 4
js学习--制作猜数字
|
29天前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
42 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
2月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
21天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
2月前
|
JavaScript 前端开发 API
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
该文章跟随月影老师的指导,探讨了编写优质JavaScript代码的三大原则:各司其职、组件封装与过程抽象,通过具体示例讲解了如何在实际开发中应用这些原则以提高代码质量和可维护性。
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
|
30天前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
36 4
|
29天前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
16 2
|
29天前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
15 2