理解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日

相关文章

  • 一文详解最常见的六种跨域解决方案

    一文详解最常见的六种跨域解决方案 Web应用程序中,由于同源策略的限制,导致跨域问题成为Web开发过程中的一个热门话题。本文将详细讲解最常见的六种跨域解决方案,分别是: JSONP CORS postMessage document.domain iframe 代理服务器 1. JSONP JSONP 是最容易学习和使用的解决跨域问题的方式之一。JSONP …

    JavaScript 2023年6月11日
    00
  • 原生Js实现按的数据源均分时间点幻灯片效果(已封装)

    首先我们先来介绍一下“原生Js实现按的数据源均分时间点幻灯片效果(已封装)”这个内容的基本概念和核心思路。 概念 “原生Js实现按的数据源均分时间点幻灯片效果(已封装)”是一种基于JavaScript的动态网页效果,它能够将一组图片或其他内容按照时间轴分隔显示,形成一种轮播的效果,具有视觉感受强烈、增加动态感的特点。 核心思路 该功能的实现核心思想是,将网页…

    JavaScript 2023年5月27日
    00
  • ajax中data传参的两种方式分析

    当使用 AJAX 进行数据交互时,我们需要将请求的数据传递给后端进行处理。在 jQuery 中,可以通过 data 参数来传递数据。一般来说,data 传参的方式有两种:对象字面量和序列化字符串。下面分别进行详细讲解: 对象字面量的方式 对象字面量的方式是通过 JavaScript 中对象的方式来定义数据,然后传递给后端。例如: $.ajax({ url: …

    JavaScript 2023年6月11日
    00
  • JS函数进阶之prototy用法实例分析

    下面我详细讲解一下 “JS函数进阶之prototype用法实例分析” 的完整攻略。 1. 什么是JS中的prototype 在JavaScript中,每个函数都有一个prototype属性,它是函数构造器的原型对象,也是通过构造器创建的对象的原型。这个原型对象是一个普通对象,其中包含一些方法和属性,它们可以被构造器所创建的所有实例对象所共享。 2. prot…

    JavaScript 2023年5月28日
    00
  • JavaScript进阶教程(第一课)第3/3页

    下面我将为您详细讲解“JavaScript进阶教程(第一课)第3/3页”的完整攻略。 1. 确定目标 首先,我们要明确自己的目标是什么,这有助于我们更好地制定学习计划。对于“JavaScript进阶教程(第一课)第3/3页”这个教程来说,我们的目标应该是掌握以下内容: 理解 JavaScript 中的数据类型 掌握 JavaScript 对象的使用方法 学习…

    JavaScript 2023年5月17日
    00
  • Javascript之面向对象–方法

    下面是Javascript面向对象方法的完整攻略。 什么是面向对象 在开始讲解面向对象方法之前,需要先了解什么是面向对象。面向对象编程(Object Oriented Programming,OOP)是一种软件开发的方法和思想,它以对象为基础,通过封装、继承、多态等特性实现代码的灵活复用、维护和拓展。在Javascript中,我们可以通过构造函数和原型链来实…

    JavaScript 2023年5月18日
    00
  • javaScript array(数组)使用字符串作为数组下标的方法

    使用字符串作为数组下标的方法在Javascript中称为关联数组。下面是实现关联数组的步骤以及示例说明。 1. 声明一个空数组 首先,我们需要声明一个空数组作为基础。 let myArray = []; 2. 使用字符串下标存储值 接下来,我们可以使用字符串作为数组的下标存储值。 myArray["name"] = "Lucy&…

    JavaScript 2023年5月27日
    00
  • jQuery插件form-validation-engine正则表达式操作示例

    以下是对jQuery插件form-validation-engine正则表达式操作的详细攻略。 简介 form-validation-engine是一个jQuery表单验证插件,支持很多种类型的验证,并且可以自定义验证规则。其中,正则表达式是一种非常常用且强大的验证方式。 在本篇攻略中,我们将通过两个示例说明如何使用正则表达式在form-validation…

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