原生JS开发避坑指南：这些写法必须禁止

块级函数

在ES6标准实施前的严格模式下，应当禁止使用块级函数。自ES6起，虽然允许在块级作用域内声明函数，但其作用域被限制在该块内部。然而，在非严格模式下，块级函数的行为存在歧义且不符合规范，因此仍应禁止使用。


if(true) {
    function test() { //块级函数
        console.log(1);
    }
}
test();

直接修改对象的 prototype 原型

现代浏览器会对原型链进行性能优化，在实例化对象前预先规划方法的内存位置。直接修改 prototype 会破坏这种优化机制，导致性能下降或行为异常，因此以下两种修改方式均被禁止。

使用 Object.setPrototypeOf 修改原型


function a(){}
a.prototype = {
  a_prop: "a val"
};
function b(){}
var proto = {
  b_prop: "b val"
};
Object.setPrototypeOf(
  proto, a.prototype
);
b.prototype = proto;
var test = new b;
console.log(test.a_prop); // a val
console.log(test.b_prop); // b val

直接修改对象的 __proto__ 属性


function a(){}
a.prototype = {
  a_prop: "a val"
};
function b(){}
var proto = {
  b_prop: "b val",
  __proto__: a.prototype //直接修改 b 对象的 __prototype__ 属性
};
b.prototype = proto;
var test = new b;
console.log(test.a_prop); // a val
console.log(test.b_prop); // b val

with

with 语句的用法示例如下：


var a = {
    p1: 1,
    p2: 2
}
with (a) {
    p1 = 3;
}
console.log(a.p1);

应当禁止使用 with 语句，例如以下代码展示了其潜在问题：


function a(arg1, arg2) {
  with (arg2){
    console.log(arg1); // 无法确定是要输出第一个参数还是要输出 arg2 的 arg1 属性
  }
}
var arg2 = {arg1:1}
a("arg1", arg2)

callee

arguments.callee 指向当前正在执行的函数本身：


function a(arg1) {
    if (arg1 > 1) {
        return arg1 * arguments.callee(arg1 - 1);
    }
    else {
        return 1;
    }
}
console.log(a(3)); // 6

当函数需要递归调用自身时，应禁止使用 arguments.callee()，而应直接通过函数名称进行调用，以确保代码清晰且兼容严格模式。


function a(arg1) {
    if (arg1 > 1) {
        return arg1 * a(arg1 - 1); // 直接通过函数名称调用
    }
    else {
        return 1;
    }
}
console.log(a(3)); // 6

caller

caller 属性用于表示函数的调用者，该特性并非 ECMAScript 标准的一部分，且存在安全风险，因此应禁止使用。


function a() {
    console.log(a.caller); // function b() { a(); }
}
function b() {
    a();
}
b();

eval

eval() 函数会将传入的字符串参数解析并作为 JavaScript 代码执行。


eval("var a = 1, b = 2; console.log(a+b)"); // 3

严禁使用 eval。由于浏览器无法对 eval 执行的代码进行静态分析和优化，其执行效率远低于普通 JavaScript 代码。此外，eval 存在严重的安全隐患，因为它以调用者的权限执行代码，并暴露当前作用域。推荐使用 Function 构造函数作为替代方案：


var a = new Function("a", "b", "console.log(a+b)")
a(1,2); // 3

以上即为原生JavaScript中应禁止使用的几种典型写法。如需了解更多相关技术细节，请查阅本站其他文章。

原生JS开发中应禁止使用的五种写法