一. with 和 eval

1.1. with 语句

with 语句 扩展一个语句的作用域链。

  • 不建议使用with语句,因为它可能是混淆错误和兼容性问题的根源。
1
2
3
4
5
const obj = { name: "hello world", age: 18 };
with (obj) {
console.log(name);
console.log(age);
}

1.2. eval 函数

eval 是一个特殊的函数,它可以将传入的字符串当做 JavaScript 代码来运行。

1
2
3
4
// const name = "why";
// console.log(name);
const evalString = `var name = "why";console.log(name)`;
eval(evalString);

不建议在开发中使用 eval:

  • eval 代码的可读性非常的差(代码的可读性是高质量代码的重要原则);

  • eval 是一个字符串,那么有可能在执行的过程中被刻意篡改,那么可能会造成被攻击的风险;

  • eval 的执行必须经过 JS 解释器,不能被 JS 引擎优化;

二. JavaScript 严格模式

2.1. 认识严格模式

在 ECMAScript5 标准中,JavaScript 提出了严格模式的概念(Strict Mode):

  • 严格模式很好理解,是一种具有限制性的 JavaScript 模式,从而使代码隐式的脱离了 ”懒散(sloppy)模式“;

  • 支持严格模式的浏览器在检测到代码中有严格模式时,会以更加严格的方式对代码进行检测和执行;

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

  • 严格模式通过 抛出错误 来消除一些原有的 静默(silent)错误;

  • 严格模式让 JS 引擎在执行代码时可以进行更多的优化(不需要对一些特殊的语法进行处理);

  • 严格模式禁用了再 ECMAScript 未来版本中可能会定义的一些语法;

2.2. 开启严格模式

那么如何开启严格模式呢?严格模式支持粒度话的迁移:

  • 可以支持在 js 文件中开启严格模式;

  • 也支持对某一个函数开启严格模式;

严格模式通过在文件或者函数开头使用 use strict 来开启。

开启文件级别的严格模式:

1
2
3
4
5
6
7
"use strict";
// 使用let作为标识符的名称
var let = "abc"
console.log(name)

// 定义变量时不使用var
message = "Hello World"console.log(message)

开启函数级别的严格模式:

1
2
3
4
5
6
7
function foo() {
"use strict";
m = "foo";
console.log(m);
}

foo();

2.3. 严格模式限制

这里我们来说几个严格模式下的严格语法限制:

  • JavaScript 被设计为新手开发者更容易上手,所以有时候本来错误语法,被认为也是可以正常被解析的;

  • 但是这种方式可能给带来留下来安全隐患;

  • 在严格模式下,这种失误就会被当做错误,以便可以快速的发现和修正;

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

1
2
3
4
5
"use strict";

// Uncaught ReferenceError: message is not defined
message = "Hello World";
console.log(message);

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 2.静默失败
// Cannot assign to read only property 'NaN' of object
NaN = 100;
console.log(NaN);

const obj = {};
Object.defineProperty(obj, "name", {
value: "why",
writable: false
});

// Cannot assign to read only property 'name' of object
obj.name = "kobe";
console.log(obj.name);

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

1
2
3
4
5
6
7
8
9
10
// 3.删除不可删除的属性
const obj = {};
Object.defineProperty(obj, "name", {
value: "why",
configurable: false
});

// Cannot delete property 'name' of #<Object>
delete obj.name;
console.log(obj.name);

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

1
2
3
4
5
6
7
// 4.不允许有相同的属性名
// Duplicate parameter name not allowed in this context
function foo(m, n, m) {
console.log(m, n, m);
}

foo(10, 20, 30);

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

1
2
3
// Uncaught SyntaxError: Octal literals are not allowed in strict mode.
const num = 0123;
console.log(num);

注意:如果要编写八进制,可以使用 0o 开头,是允许的

6. 不允许设置原始值的属性

1
2
// Cannot create property 'name' on string '123'
"123".name = "abc";

7. 在严格模式下,不允许使用 with

1
2
3
4
5
6
7
8
9
10
11
12
"use strict";

// Uncaught SyntaxError: Strict mode code may not include a with statement
const obj = {
name: "hello world",
age: 18
};

with (obj) {
console.log(name);
console.log(age);
}

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

1
2
3
4
"use strict";
const evalString = `var message = "Hello World";console.log(message);`;
eval(evalString);
console.log(message);

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

1
2
3
4
5
6
7
8
9
"use strict";

function foo() {
console.log(this);
}

foo(); // undefined
foo.call(123); // 123
foo.call(null); // null

文章转载于coderwhy | JavaScript 高级系列(八) - with、eval、严格模式