• 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. 实体类(VO,DO,DTO)的划分

    实体类(VO,DO,DTO)的划分 (2011-12-21 15:50:27) 转载▼ 标签: it   经常会接触到VO,DO,DTO的概念,本文从领域建模中的实体划分和项目中的实际应用情况两个角度 ...

  2. C++ STL——异常

    目录 一 C++异常机制概述 二 栈解旋(unwinding) 三 异常接口的声明 四 异常类型和异常变量的生命周期 五 C++标准异常库 六 异常的继承 注:原创不易,转载请务必注明原作者和出处,感 ...

  3. LC 529. Minesweeper

    Let's play the minesweeper game (Wikipedia, online game)! You are given a 2D char matrix representin ...

  4. 机器学习之DBSCAN聚类算法

    可以看该博客:https://www.cnblogs.com/aijianiula/p/4339960.html 1.知识点 """ 基本概念: 1.核心对象:某个点的密 ...

  5. Microsoft 防跨站点脚本库AntiXSS Library

    AntiXSS 库目前处于版本 4.2.1,下载地址:http://www.microsoft.com/download/en/details.aspx?id=28589.它经历了一次非常棒的重新编写 ...

  6. [Feature] Compare the effect of different scalers

    Ref: Compare the effect of different scalers on data with outliers 主要是对该代码的学习研究. from sklearn.prepro ...

  7. three.js后期之自定义shader通道实现扫光效果

    如果你还不知道如何在three.js中添加后期渲染通道,请先看一下官方的一个最简单的demo : github. 正如demo中所示的那样,我们的扫光效果,也是一个自定义的ShaderPass. 所以 ...

  8. Docker Swarm常用命令

    #查看集群节点 docker node ls #创建nginx服务 #docker pull hub.test.com:5000/almi/nginx:0.1 #下载私有仓库镜像 docker ser ...

  9. 四、VSCode调试vue项目

    1.先决条件设置 你必须安装好 Chrome 和 VS Code.同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本. 在可以从 VS Code 调试你 ...

  10. 状态管理之 Flux、Redux、Vuex、MobX(概念篇)

    本文是对 Flux.Redux.Vuex.MobX 几种常用状态管理模式的总结,偏向于概念层面,不涉及过多代码. 状态管理 什么是状态管理? 状态管理就是,把组件之间需要共享的状态抽取出来,遵循特定的 ...