With statement

The with statement is no longer recommended because it can be a source of confusing errors and compatibility issues – and is not allowed in strict mode

const info = {
  name: 'Klaus'
}

const name = 'global'

// with and if are statements
// An object can be passed in () with
// when a variable or function is searched, it takes precedence over the object it is passed
// If not, follow the original scope chain
with(info) {
  console.log(name) // => Klaus
}
Copy the code

eval

Eval is a special function that runs a string passed as JavaScript code

Eval parameters are passed directly to the JS interpreter for compilation and parsing, so execution is relatively fast

But eval has several drawbacks:

  1. Eval code is very poorly readable (code readability is an important principle of high-quality code)
  2. Val is a string, so it could be tampered with intentionally during execution, which could pose a risk of attack
  3. Eval execution must go through the JS interpreter and cannot be optimized by the JS engine, so performance is poor

Therefore, using the eval function in development is not recommended

// Because there are no line breaks in writing code using strings
// So the end of each line of code must be separated with a semicolon
const str = "var name = 'Klaus'; console.log(name)"

eval(str) // => Klaus
Copy the code

strict mode

In the ECMAScript5 standard, JavaScript introduces Strict Mode.

Strict mode is well understood as a restrictive JavaScript mode that implicitly removes code from “sloppy mode.”

Browsers that support strict patterns detect and execute code in a more strict manner when they detect strict patterns in code

Strict mode imposes some restrictions on normal JavaScript semantics:

  • Strict mode eliminates some pre-existing silent errors by throwing errors
    • A silent error is when a statement is wrong, but the browser does not report it, but simply ignores it and does not execute it
    • Strict mode allows the JS engine to do more optimization when executing code (without having to do some fault tolerance)
    • Strict mode disables some syntax that may be defined in future versions of ECMAScript
      • In non-strict mode, JS can use reserved words as variable names, but in strict mode, it is not allowed

How to turn on strict mode

The file size

// Strict mode of file granularity -- write "use strict" on the first line of the file
// "use strict" allows only strict mode for the current file,
// If strict mode needs to be turned on in another file, it needs to be turned on manually

"use strict"

const info = {}

Object.defineProperty(info, 'age', {
  value: 23.writable: false
})

// The following line of code is silent error in non-strict mode
// In strict mode, however, an error will be reported
info.age = 18
console.log()
Copy the code

Function granularity

function foo() {
  "use strict"
  username = 'Klaus'
}

foo()
Copy the code

Restrictions common in strict mode

  1. You cannot accidentally create global variables

  2. Strict mode will cause assignment operations that silently fail to throw exceptions

  3. Attempted to delete non-deletable attributes in strict mode

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

  5. The octal syntax of 0 is not allowed, and ES6 can use numbers starting with O0 to represent octal

  6. In strict mode, with is not allowed

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

"use strict"

const str = "var name = 'Klaus'; console.log(name)"
eval(str) // => Klaus

// In non-strict mode, STR name is added to the global environment when eval is executed
// In strict mode, however, a separate execution environment is opened for the eval function
// We can't get the value of name after eval
console.log(name)
Copy the code
Of course, we can also turn strict mode on separately for the code executed by the eval function
const str = "'use strict'; var name = 'Klaus'; console.log(name)"
eval(str)

console.log(name)
Copy the code
  1. In strict mode, this cannot point to globalThis and is set to undefined
"use strict"

function foo() {
  console.log(this) // => undefined
}

foo()
Copy the code
// But this rule only applies to this in functions, using the default this binding
// In a timer such as setTimeout, this is still pointing to globalThis
// Because this is bound internally with apply

"use strict"

setTimeout(function() {
  console.log(this) // => globalThis
}, 2000)
Copy the code