点击查看【music163】
6. with-eval-严格模式 - 图1

with

with语句 扩展一个语句的作用域链。with 常用的用途也是让对象形成自己的作用域，然后方便输出对象中的数据。

  • 注意：with 已经不推荐使用了，仅作了解。严格模式下 with 也会报错。 ```javascript let message = ‘hhhh’

function foo() { // 函数作用域访问全局作用域 console.log(message); // hhhh } foo()

let obj = { message: ‘666’ } // 对象字面量不存在作用域，属于全局作用域

function fn() { with(obj) { // with语句让对象形成了自己的作用域 // message 沿着作用域链查找，就会先查找 obj 对象的作用域 console.log(message); // 666 } } fn()

  1. <a name="UWXvF"></a>
  2. # eval 函数
  4. eval是一个特殊的全局函数，它可以将传入的字符串当做JavaScript代码来运行。
  5. ```javascript
  6. let jsString = 'let message = "hhhh"; console.log(message);'
  8. eval(jsString) // hhhh

不建议在开发中使用eval：

  • eval代码的可读性非常的差（代码的可读性是高质量代码的重要原则）；
  • eval是一个字符串，那么有可能在执行的过程中被刻意篡改，那么可能会造成被攻击的风险；
  • eval的执行必须经过JS解释器，不能被JS引擎优化；

严格模式

在ECMAScript5标准中，JavaScript提出了严格模式的概念（Strict Mode）：

  • 严格模式很好理解，是一种具有限制性的JavaScript模式，从而使代码隐式的脱离了“懒散（sloppy）模式”；
  • 支持严格模式的浏览器在检测到代码中有严格模式时，会以更加严格的方式对代码进行检测和执行；

严格模式对正常的JavaScript语义进行了一些限制：

  • 严格模式通过 抛出错误 来消除一些原有的 静默（silent）错误；
    • 比如123.name = 123;这种错误代码没有造成很大影响，之前是不会有任何提示的，现在会报错
  • 严格模式让JS引擎在执行代码时可以进行更多的优化（不需要对一些特殊的语法进行处理）；
    • 比如写了一些没意义的代码，可是JS引擎还是要解析优化，浪费了性能时间
  • 严格模式禁用了在ECMAScript未来版本中可能会定义的一些语法；
    • 比如一些保留字，将来可能会使用，现在就不会允许使用了，而之前的却可以

开启严格模式

可以支持在 js 文件中开启严格模式；也支持对某一个函数开启严格模式。

  1. "use strict"
  3. let name;
  4. 123.name = 'hhh' // 报错
  1. function foo() {
  2.   "use strict"
  3.   // code
  4. }

常见的严格模式下错误

以下这些情况在非严格模式下是不报错的，语法太懒散。严格模式限制了它们。

1. 无法意外的创建全局变量

  1. "use strict"
  3. //1. 禁止意外创建全局变量
  4. message = "Hello World" // 没有关键字 var 都是全局的
  5. console.log(message) // message is not defined
  7. function foo() {
  8.   age = 20 // 都是全局的
  9. }
  11. foo()
  12. console.log(age)

2. 严格模式会使引起静默失败(silently fail,注:不报错也没有任何效果)的赋值操作抛出异常

  1. "use strict"
  3. true.name = "abc" // Cannot create property 'name' on boolean 'true'
  4. NaN = 123

3. 严格模式下试图删除不可删除的属性

  1. "use strict"
  3. var obj = {}
  4. Object.defineProperty(obj, "name", {
  5.   configurable: false,
  6.   writable: false,
  7.   value: "why"
  8. })
  9. console.log(obj.name)
  11. delete obj.name // Cannot delete property 'name' of #<Object>

4. 严格模式不允许函数参数有相同的名称

  1. "use strict"
  3. function foo(x, y, x) { // Duplicate parameter name not allowed in this context
  4.   console.log(x, y, x)
  5. }
  7. foo(10, 20, 30)

5. 不允许0的八进制语法

  1. "use strict"
  3. // 非严格模式下的定义八进制 0 + 数字，严格模式不允许了
  4. var n = 0123 // Octal literals are not allowed in strict mode.
  6. // es6 添加了进制的定义方式
  7. var num = 0o123 // 八进制
  8. var num2 = 0x123 // 十六进制
  9. var num3 = 0b100 // 二进制
  10. console.log(num, num2, num3)

6. 在严格模式下，不允许使用with

  1. let obj = { message: '666' } 
  3. function fn() {
  4.   with(obj) { // Strict mode code may not include a with statement
  5.     console.log(message); 
  6.   }
  7. }
  8. fn()

7. 在严格模式下，eval不再为上层引用变量

  1. "use strict"
  3. let jsString = 'let message = "hhhh"; console.log(message);'
  5. eval(jsString) // hhhh
  7. // 非严格模式，eval 执行的变量会定义到上一层作用域中，比如这里 message 就定义到了全局
  8. console.log(message) // hhhh
  10. // 严格模式
  11. console.log(message) // message is not defined

严格模式下，this 绑定不会默认转成对象

严格模式下，独立调用的代码 this 不是默认绑定 window，而是指向 undefined

  1. "use strict"
  3. // 在严格模式下, 自执行函数(默认绑定)会指向undefined
  4. function foo() {
  5.   console.log(this)
  6. }
  8. var obj = {
  9.   name: "why",
  10.   foo: foo
  11. }
  13. foo() // undefined
  15. obj.foo()
  16. var bar = obj.foo
  17. bar() // undefined
  1. // setTimeout的 this
  3. // 参数函数是箭头函数，向上寻找，所以是 Window
  4. setTimeout(() => {
  5.   "use strict"
  6.   console.log(this) // Window
  7.   }, 1000);
  9. // 但是参数函数若不是箭头函数，这时候就需要考虑一个问题
  10. // 参数函数在setTimeout() 里面是怎么被执行的？
  11. // 若是独立调用，则严格模式下 this 指向 undefined。若不是，则指向 Window。具体这得看源码了
  13. // 非严格模式
  14. setTimeout(function() {
  15.   console.log(this) // Window
  16. }, 1000);
  18. // 严格模式
  19. setTimeout(function() {
  20.   console.log(this) // Window
  21. }, 1000);
  23. // 无论是严格模式还是非严格模式，参数this都指向 Window
  24. // 说明setTimeout内部实现可能是apply 调用，显示绑定的 this，fn.apply(this = Window)