Home > Web Front-end > JS Tutorial > JavaScript advanced syntax learning in strict mode

JavaScript advanced syntax learning in strict mode

WBOY
Release: 2022-05-24 13:45:41
forward
1780 people have browsed it

This article brings you relevant knowledge about javascript, which mainly introduces related issues about strict mode. Strict mode is easy to understand and is a restrictive JavaScript mode. This makes the code implicitly break away from the "lazy mode". Let's take a look at it. I hope it will be helpful to everyone.

JavaScript advanced syntax learning in strict mode

[Related recommendations: javascript video tutorial, web front-end

1. Understanding strict mode

  • In the ECMAScript5 standard, JavaScript proposed the concept of strict mode:

    • Strict mode is easy to understand and is a restrictive JavaScript mode, thus making the code implicitly break out of "lazy mode".

    • Browsers that support strict mode will detect and execute the code in a more strict manner when they detect strict mode in the code.

  • Strict mode imposes some restrictions on normal JavaScript semantics:

    • Strict mode throws via Error to eliminate some of the original silent errors.

    • Strict mode allows the JS engine to perform more optimizations when executing code (without the need to process some special syntax).

    • Strict mode disables some syntax that may be defined in future versions of ECMAScript.

2. Turn on strict mode

So how to turn on strict mode? Strict mode supports granular migration:

  • can support turning on strict mode in js files;
  • also supports turning on strict mode for a certain function;

3. Strict Mode Restrictions

JavaScript is designed to be easier for novice developers to get started with, so sometimes if you buy incorrect syntax, don’t think it can be parsed normally;
But this method may give It brings security risks;
In strict mode, this kind of transaction will be treated as an error so that it can be quickly discovered and corrected;
Summarizes some common limitations:

1. Unable to accidentally create global variables

There are two ways to accidentally create global variables:

  • Globally declare global variables directly without using keywords
  • Do not use keywords to declare variables inside the function. The function is promoted to a global variable by default
    The sample code is as follows:
'use strict'
// 禁止意外创建全局变量
message = '意外创建全局变量'
console.log(message) // 报错信息为:Uncaught ReferenceError: message is not defined

function foo () {
    age = 20
    console.log(age)
}
foo() // ReferenceError: age is not defined
Copy after login

2. In strict mode, it will cause silent failure The assignment operation reports an error exception

The sample code is as follows:

//开启严格模式,将问题直接转化为报错
'use strict'
const v = 100;//(定义常量)
v = 1.14;//重新赋值(为变量)

console.log(v); // Uncaught TypeError: Assignment to constant variable.
Copy after login

3. Trying to delete an undeletable attribute in strict mode

In strict mode, you cannot use the deselect operator on variables.

(1). Use the delete keyword for variables

  // 开启严格模式
'use strict'

var v = 100;
delete v;//非严格模式下:此处为静默失败,既没有报错也没有删除变量v
console.log(v);//100
//开启严格模式后,改为报错Delete of an unqualified identifier in strict mode.
Copy after login

(2). Use the delete keyword for arrays and method attributes

In strict mode, use the delete keyword for arrays and pairs Use the delete keyword for method attributes, and the effect remains unchanged.

// 开启严格模式
'use strict'

// 1、严格模式下删除数组内容
var arr = [1,2,3,4]
delete arr[0];
console.log(arr);//[ <1 empty item>, 2, 3, 4 ]

// 2、严格模式下delete函数的属性
var obj  =  {
    name : '猪猪侠 '
}
delete obj.name;
console.log(obj.name)//undefined
Copy after login

4. Strict mode does not allow function parameters to have the same name

The sample code is as follows:

'use strict'
// 不允许函数有相同的参数名称
function foo2 (x, y, x) {
    console.log(x, y, x)
}
foo2(10, 20, 30) // SyntaxError: Duplicate parameter name not allowed in this context
Copy after login

5. 0 is not allowed The octal syntax

sample code is as follows:

// 不允许使用原先的八进制格式
var num1 = 0123
var num2 = 0o123 // 可以写成这种格式 八进制
var num3 = 0x123 // 可以写成这种格式 十六进制
var num4 = 0b100 // 可以写成这种格式 二进制

console.log(num1) // SyntaxError: Octal literals are not allowed in strict mode.
console.log(num2, num3, num4) // 83 291 4
Copy after login

6. In strict mode, the use with

is not allowed. The sample code is as follows:

'use strict'
var message = 'Hello World';

var obj = { name: 'jam', age: 20 }
// with语句可以形成自己的作用域,在with语句中打印age时,会输出obj对象中的age属性,但在with语句中打印不存在的属性message时,会向外层的作用域一层一层去查找
function foo () {
    with (obj) {
        console.log(age) 
        console.log(message) 
    }
    console.log(message)
}
foo() // SyntaxError: Strict mode code may not include a with statement
Copy after login

7. In strict mode, eval no longer refers to variables for the upper layer

The sample code is as follows:

var jsString = "var message = 'hello world';console.log(message)"
eval(jsString) // 输出  hello world
console.log(message) // 报错信息为:ReferenceError: message is not defined
Copy after login

When strict mode is turned on, the eval function will not refer upward to the variable, so there is no message variable in the global scope, so an error will be reported

8. In strict mode, this binding will not be transferred by default Object

The sample code is as follows:

'use strict'
// 在严格模式下,自执行函数(默认绑定)会指向undefined  ,非严格模式下会指向window
function foo () {
    console.log(this)
}
foo() // undefined
Copy after login

[Related recommendations: javascript video tutorial, web front-end]

The above is the detailed content of JavaScript advanced syntax learning in strict mode. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template