理解javascript中的with关键字

当我们在使用JS进行开发时,可能会遇到使用with关键字的代码。with可以被用来打破常规的JS作用域规则,允许我们更方便地访问某些对象中的属性和方法。然而,with关键字在使用上很容易出错,也容易导致代码不易阅读和维护。因此,在使用with语句时,需要谨慎使用,遵循一些约定和最佳实践,下面将详细讲解“理解JavaScript中的with关键字”,帮助读者更好地理解with语句。

什么是With语句

在JavaScript中,with语句是一种让你在多次访问同一个对象的时候,可以省略对象名进行访问的方式。

一般语法如下:

with (expression) statement

例如:

var obj = {num:42};
with(obj) {
    console.log(num); // 42
}

With语句的用法

JavaScript的with语句可以让你在多次访问同一个对象的时候,可以省略对象名进行访问的方式,这无疑带来了一定的便利。 然而,使用with语句不仅会降低代码的可读性、可调试性,而且还可能造成性能上的问题,并且有安全漏洞,因此在实际应用中,我们应该尽量避免使用它。

with语句当中expression所返回的对象,会被绑定到with语句体内的一个新变量当中。我们随后就可以通过省略对象名,直接调用这个对象内的所有方法和属性了。

例如:

var obj = {num: 42};

with (obj){
    console.log(num); // 42
}

通过上面的代码,我们可以看到,with语句中的obj对象被绑定到了num变量上,并且可以直接访问到num属性。

With语句的缺点

虽然with语句可能使编码更容易,但它也有很多缺点:

  1. 可读性差:代码在使用 with语句时变得混乱。代码没有清晰地表达出操作的对象,尤其是钩子代码和回调函数,会被嵌入到 with 上下文中,使其难以确定。

  2. 性能问题:with 语句会使 JavaScript 引擎难以优化代码,从而导致程序运行缓慢。如果应用程序需要处理许多对象,那么大量使用 with 语句会增加资源消耗的可能性。

  3. 安全问题:with语句存在安全漏洞,使用with语句,就意味着你信任数值传递到with语句中的属性名称,如果传递了一个恶意对象而不是可预料的对象,攻击者可能可以定义有害行为,并可能比使用显式对象引用错误更难发现和诊断这些行为。

因此,我们不建议使用 with 语句,相反请使用显式对象引用,例如:

var obj = {num: 42};

console.log(obj.num); // 42

不要使用 With 语句的情况。

一般来说,我们不建议使用 with 语句,下面是使用 with 的情况列表:

  1. 速度

如果您的 JavaScript 程序需要处理许多对象,则大量使用 with 语句会增加资源消耗的可能性,因此会导致程序运行缓慢。

  1. 可读性

代码在使用 with 语句时变得混乱。如果您使用回调,将难以判断回调的目标对象。

  1. 安全

如果编写不可预测的代码,with 语句会导致 JavaScript 漏洞。

为了弥补 with 语句 带来的缺点,可以使用立即执行函数(Immediately Invoked Function Expressions, IIFEs),也就是JavaScript中的自执行函数:

var obj = {num: 42};

(function(obj){
    console.log(obj.num); // 42
})(obj);

在以上代码中,我们使用了自执行函数并将obj作为它的参数传递进去,这样就避免了with语句的缺点。

示例1:

  var book = {
    "name": "《JavaScript高级程序设计》",
    "author": "尼古拉斯·C.萨卡斯",
    "publishTime": "2013年3月6日",
    "price": 89.00
  };

with(book) {
    console.log("书名 = ", name);
    console.log("作者 = " , author);
    console.log("发布时间 = ",publishTime);
    console.log("价格 = ", price);
}

代码执行效果如下:

书名 = 《JavaScript高级程序设计》
作者 =  尼古拉斯·C.萨卡斯
发布时间 =  2013年3月6日
价格 =  89

示例2:

var x = 1, y = 2;

with({x: 3, y: 4}){
    console.log(x + y);  // 7
    console.log(x - y);  // -1
}

代码执行效果如下:

7
-1

因为我们在with语句中传入了一个新的对象,这个新对象属性值和原先的变量名是一样的,但是结果不一样,从这里我们可以看出,代码中的x和y示例,是有时候不一定会指向全局变量。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:理解javascript中的with关键字 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JS前端的内存处理的方法全面详解

    JS前端的内存处理的方法全面详解 引言 在开发JS前端应用程序时,内存的使用和处理是至关重要的一部分。正确认识和处理内存,能够提高程序的性能和稳定性。在本文中,我们将对JS前端内存处理的方法进行全面详解,让读者具备清晰的认知和技能。 内存管理的重要性 内存管理是一项关键任务,在避免内存泄漏和提高系统性能方面具有很大的潜力。JavaScript是一种动态类型编…

    JavaScript 2023年6月10日
    00
  • javascript正则表达式和字符串RegExp and String(一)

    下面是关于“javascript正则表达式和字符串RegExp and String(一)”的完整攻略: 简介 JavaScript 正则表达式是匹配模式,它们可用于搜索字符串中的特定模式,从而帮助我们实现强大的文本匹配和处理功能。RegExp 和 String 对象是 JavaScript 中正则表达式常用的操作对象。String 对象提供了一些常用的方法…

    JavaScript 2023年5月28日
    00
  • JSON格式的键盘编码对照表

    JSON格式的键盘编码对照表是一个基于JSON数据格式的简单工具,用于提供不同编码环境下的按键码对照表。这个工具的实用性很强,可以帮助开发者快速查询各种按键的编码,从而方便开发。下面我会提供详细的讲解和两个示例。 分析JSON格式的键盘编码对照表 JSON格式的键盘编码对照表的结构 这个工具的主要结构如下所示: { "keyCodes":…

    JavaScript 2023年5月19日
    00
  • JavaScript接入百度地图API的方法步骤

    JavaScript接入百度地图API的方法步骤: 1.在百度地图开放平台上申请API key 首先需要在百度地图开放平台上注册账号并申请一个API key,申请成功后可以将这个key填入JavaScript中相关的API调用代码中。API key同时也是百度地图开放平台对使用者的身份认证标识。 2.引入百度地图JavaScript API库 在HTML代码…

    JavaScript 2023年6月11日
    00
  • JavaScript的内置对象Math和字符串详解

    Math是JavaScript内置的对象,它包含了数学相关的函数和属性。在编写数字计算相关的代码时,Math对象是非常有用的。本文将详细讲解Math对象的常见函数和属性以及字符串相关的内容。 Math对象 Math对象中封装了大量常用的数学函数和常量,可以用来进行随机数生成、取整、取绝对值、求平方根等一系列常用的操作。 常见函数和用法 下面是常用函数的列表:…

    JavaScript 2023年5月27日
    00
  • 使用原生js写ajax实例(推荐)

    使用原生JavaScript写AJAX实例是一个非常常见的前端开发技巧。下面是该攻略的完整步骤: 一、定义AJAX对象 使用原生JavaScript实现AJAX请求需要创建一个XMLHttpRequest对象(简称XHR)。使用XHR对象来与服务器交互数据,可以不用刷新页面就能更新数据。创建XHR对象的代码如下: let xhr = new XMLHttpR…

    JavaScript 2023年6月11日
    00
  • 详解JS中统计函数执行次数与执行时间

    首先我们需要明确一下,统计函数执行次数和执行时间是一个常见的需求,它有助于我们优化代码,找到潜在的性能瓶颈,提高应用程序的性能。那么,在JS中如何统计函数执行次数和执行时间呢? 统计函数执行次数 我们可以定义一个计数器来记录函数执行的次数。例如,下面的代码演示了如何统计函数foo的执行次数: let count = 0; function foo() { /…

    JavaScript 2023年5月27日
    00
  • JavaScript中Form表单技术汇总(推荐)

    JavaScript中Form表单技术汇总(推荐)是一篇介绍JavaScript中与表单相关的技术的文章,包含了许多实用的技巧和示例。以下是对这篇文章的详细解读: 概述 该文章主要介绍了JavaScript中的表单技术,涉及到表单的验证、提交、动态创建表单等等。读者可以通过学习这篇文章来了解JavaScript中表单相关的技术,从而提升自己的开发能力。 表单…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部