原生JS中应该禁止出现的写法

 更新时间:2021年05月04日 11:46:15   作者:浅笑·  
这篇文章主要介绍了原生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 表示函数的调用者,应禁止使用,该特性不是标准的。

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执行要慢,因为浏览器对 javascript 进行了优化。eval 方法也不安全,因为它使用与调用者相同的权限执行代码,而且 eval() 被调用时,它的作用域也会暴露。应该用 Function 代替:

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

以上就是原生JS中应该禁止出现的写法的详细内容,更多关于原生JS中应该禁止的写法的资料请关注脚本之家其它相关文章!

相关文章

  • canvas实现环形进度条效果

    canvas实现环形进度条效果

    本文主要介绍了canvas实现环形进度条效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JS数组方法shift()、unshift()用法实例分析

    JS数组方法shift()、unshift()用法实例分析

    这篇文章主要介绍了JS数组方法shift()、unshift()用法,结合实例形式分析了JavaScript数组shift()与unshift()方法功能、用法及相关操作注意事项,需要的朋友可以参考下
    2020-01-01
  • pc加载更多功能和移动端下拉刷新加载数据

    pc加载更多功能和移动端下拉刷新加载数据

    这篇文章主要为大家详细介绍了pc加载更多功能和移动端下拉刷新加载数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支

    JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和

    这篇文章主要介绍了JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支,结合实例形式总结分析了JS页面加载事件,数组操作,DOM节点操作,循环和分支所涉及的相关事件、函数及操作注意事项,需要的朋友可以参考下
    2019-07-07
  • 解决微信内置浏览器返回上一页强制刷新问题方法

    解决微信内置浏览器返回上一页强制刷新问题方法

    微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验。而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置。下面跟着小编一起来看下吧
    2017-02-02
  • javascript中Function类型详解

    javascript中Function类型详解

    这篇文章主要介绍了javascript中Function类型详解的相关资料,需要的朋友可以参考下
    2015-04-04
  • JS烟花背景效果实现方法

    JS烟花背景效果实现方法

    这篇文章主要介绍了JS烟花背景效果实现方法,实例分析了javascript操作dom元素实现烟花特效的技巧,需要的朋友可以参考下
    2015-03-03
  • nodejs入门详解(多篇文章结合)

    nodejs入门详解(多篇文章结合)

    Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始。比较独特的是,Node.js会假设你是在POSIX环境下运行它Linux 或 Mac OS X
    2012-03-03
  • 微信小程序movable view移动图片和双指缩放实例代码

    微信小程序movable view移动图片和双指缩放实例代码

    movable-area是微信小程序的新组件,可以用来移动视图区域movable-view。这篇文章主要介绍了微信小程序movable view移动图片和双指缩放实例代码,需要的朋友可以参考下
    2017-08-08
  • 微信小程序分享功能onShareAppMessage(options)用法分析

    微信小程序分享功能onShareAppMessage(options)用法分析

    这篇文章主要介绍了微信小程序分享功能onShareAppMessage(options)用法,结合具体实例形式分析了微信小程序分享功能onShareAppMessage(options)具体使用技巧与相关操作注意事项,需要的朋友可以参考下
    2019-04-04

最新评论