• with的基本使用
  • 尴尬的with关键字

一、with的基本使用

with是用来扩展语句作用域的,什么意思呢?先来看看语法和示例:

语法:

with(expression){
statement
}

expression:将给定的表达式添加到评估语句时使用的作用域上。

statement:任何语句。

示例:

 var obj = {
name:"他乡踏雪",
age:3,
stature:666
}
with(obj){
console.log(name);//他乡踏雪
console.log(age);//
console.log(stature);//
}

描述:

with语句可以形成作用域,并且将传入的对象上的属性解析为该作用域下的变量,且取对象属性的值为变量的初始值。并且在作用域内使用变量如果被修改,expression的属性值会跟着被修改。

应用小示例:

 var a, x, y;
var r = 10; with (Math) {
a = PI * r * r;
x = r * cos(PI);
y = r * sin(PI / 2);
}

二、尴尬的with

关于with这个关键字,它的出现本身的出现是为了给代码除了方法以外,可以创建一个独立里作用域,并且可以结构对象属性成为作用域下的变量,减少代码量。而且在一定程度上还能够提升代码的执行效率。但其优势也是其劣势,而且ES5的严格模式下是不能使用的。而ES6的相关语法的出现继承了它的优势,还弥补了一些它的劣势,是不是非常尴尬。接下来具体看看with的优势与劣势:

优势:

with语句可以在不造成性能损失的情况下,减少变量的长度。其造成的附加计算量很少。使用with可以减少读取对象属性的值时,可减少对象命名空间的指针定位。

弊端:

with语句使得程序在查找变量值时,都是先在指定的对象中查找。所以那些本来不是这个对象中的属性的变量查找起来会很慢。如果对性能要求较高的场合,with下面的statement语句中的变量,只应该包含这个指定对象的属性。

上面是从性能方面考虑,接着从代码读写(语义)角度来考虑,with语句打散了对象与属性的关联性(书写和阅读),不利于代码的阅读。

接着从兼容性角度来考虑,with不能在严格模式下使用;而且还无法向前兼容,而ES6更是有一些语法可以替代with一些功能,比如let可以绑定作用域来替代with生成的作用域等。

 function f(foo, values) {
with (foo) {
console.log(values)
}
}
f([1,2,3], obj)

上面这个示例代码在ES5中没什么问题,但是ES6Array.prototype添加了一个新属性values,所以数组实例将继承这个属性。with语句中的values就变成了[1,2,3].values。

最后为什么with作为一个开发中不被推荐使用的关键字为什么会频繁的出现在面试题中?

如果需要解析with的内部机制和特性就必然会涉及到作用域、变量查找、this指向(如果传入对象上有方法,这个方法内部指向肯定指向这个传入的对象)、ES6、原型链、严格模式、甚至性能问题这些都可以被提及和延申出来,不推荐使用就很大程度上不受关注,也可以考察到面试者对语言底层特性的熟悉程度,这对面试官来说显然是一个不错的问题引入点。

JavaScript中with不推荐使用,为什么总是出现在面试题中?的更多相关文章

  1. JavaScript表达式--掌握最全的表达式,一切尽在掌握中,让表达不再是难事

    一.JavaScript表达式: 算术表达式: 字符串表达式: 关系(比较)表达式: 逻辑表达式 二.JavaScript运算符: ●什么是表达式--表达式是产生一个结果值的式子,常量,变量,运算符. ...

  2. 《剑指offer》— JavaScript(31)整数中1出现的次数(从1到n整数中1出现的次数)

    整数中1出现的次数(从1到n整数中1出现的次数) 题目描述 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12 ...

  3. 剑指Offer(三十一):整数中1出现的次数(从1到n整数中1出现的次数)

    剑指Offer(三十一):整数中1出现的次数(从1到n整数中1出现的次数) 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https:// ...

  4. (转载)详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  5. JavaScript数组方法大全(推荐)

    原网址:http://www.jb51.net/article/87930.htm 数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习, ...

  6. 在chrome中屏蔽百度推荐

    在chrome中屏蔽百度推荐 方法1:可以使用adblock plus来进行屏蔽: 需要将chrome的扩展程序打开为调试者模式: 下载地址:http://chromecj.com/productiv ...

  7. JavaScript中一些你不一定知道的问题(持续更新中。。。。)

    一些js的问题与解析 1) ["1","2","3"].map(parseInt);的运行结果是? A.["1",&qu ...

  8. 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  9. 【广州.NET社区推荐】【译】Visual Studio 2019 中 WPF & UWP 的 XAML 开发工具新特性

    原文 | Dmitry 翻译 | 郑子铭 自Visual Studio 2019推出以来,我们为使用WPF或UWP桌面应用程序的XAML开发人员发布了许多新功能.在本周的 Visual Studio ...

随机推荐

  1. dts是如何来描述iommu与PCI(e)之间的关系?

    1. 在一颗树的根下每个PCI(e)设备被它的请求id(AKA RID)独一无二的标识,一个请求ID由三部分组成,总线号,设备号和功能号,如: Bits [15:8] 是总线号 Bits [7:3]是 ...

  2. 处理输入为非对角阵的Clustering by fast search and find of density peak代码

    Clustering by fast search and find of density peak. Alex Rodriguez, Alessandro Laio 是发表在Science上的一篇很 ...

  3. 数据分析 - Excel 函数, 技巧, 分析工具

    数据分析工具使用场景 函数 分类 文本清洗函数 FIND - 查找 find 函数查询指定位置的某字符的的位置 快捷键 : 选中后双击右下角的 + 可以快速生成当前一列结果 FIND("查询 ...

  4. FastDFS 学习总结

    1.1   什么是FastDFS FastDFS是用c语言编写的一款开源的分布式文件系统.FastDFS为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,使用 ...

  5. MySQL 性能优化系列之一 单表预处理

    MySQL 性能优化系列之一 单表预处理 背景介绍 我们经常在写多表关联的SQL时,会想到 left jion(左关联),right jion(右关联),inner jion(内关联)等. 但是,当表 ...

  6. 【JVM学习笔记】异常表的重要作用以及locals属性的含义

    有如下代码 public class Test { public void work() { try { InputStream is = new FileInputStream("test ...

  7. window 10 安装vs2013启动web项目报错Id端口不能启动iis

    https://www.cnblogs.com/leolion/p/3789732.html 如果我们想在Visual Studio2013上调试64位ASP.NET MVC的网站(本机环境X64), ...

  8. java数据结构之WeakHashMap

    一.JAVA中的四种引用类型 1.强引用(StrongReference):强引用是最为普遍的一种引用,如果对象被强引用,那么垃圾回收器无论如何都不会回收它,当内存不足时会抛出OutOfMemoryE ...

  9. vue的双向绑定和依赖收集

    在掘金上买了一个关于解读vue源码的小册,因为是付费的,所以还比较放心 在小册里看到了关于vue双向绑定和依赖收集的部分,总感觉有些怪怪的,然后就自己跟着敲了一遍. 敲完后,发现完全无法运行,  坑啊 ...

  10. 1.React中的虚拟DOM

    1.state 数据 2.JSX模板 3.数据+ 模板 结合,生成真实的DOM,来显示 4.state发生改变 5.数据 + 模板 结合,生成真实的DOM,替换原始的DOM 缺陷: 第一次生成了一个完 ...