深入浅析JavaScript中with语句的理解


Posted in Javascript onMay 12, 2016

JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象.

with语句的作用是暂时改变作用域链、减少的重复输入。

其语法结构为:

with(object){ 
//statements 
}

举一个实际例子吧:

with(document.forms[]){ 
name.value = "lee king"; 
address.value = "Peking"; 
zipcode.value = ""; 
}

与之对应的传统的写法是:

document.forms[].name.value = "lee king"; 
document.forms[].address.value = "Peking"; 
document.forms[].zipcode.value = "";

可以看出with语句的简洁明了,不过在代码的世界里是很难找到真正的完美。

js的解释器需要检查with块中的变量是否属于with包含的对象,这将使with语句执行速度大大下降,并且导致js语句很难被优化。为了兼顾速度与代码量可以找到一个比较折衷的方案:

var form = document.forms[]; 
form.name.value = "lee king"; 
form.address.value = "Peking"; 
form.zipcode.value = "";

所以在以后的高效代码开发中我们应该尽可能的避免使用with语句。

经过测试:

var a = 123;
var b = {a : 321};
with(b){
console.log(a); // 321
}
var a = 123;
var b = {}; 这里去掉b中的a属性
with(b){
console.log(a); // 123
}从作用域链来分析

在javascript中,函数也是对象,实际上,javascript中的一切都是对象。函数内部有一个只给javascript引擎访问的内部属性是[[scope]],该属性包含了函数创建时的作用域中对象的集合,这个集合就叫做作用域链。

比如下面代码:

function add(num1,num2) { 
var sum = num1 + num2; 
return sum; 
}

在函数创建时,它的作用域链中会填入一个全局对象,该全局对象包含了所有全局变量,如下图:

深入浅析JavaScript中with语句的理解

当函数被执行时,会创建一个活动对象,该对象包含了函数所有局部变量、命名参数以及this,然后该对象会被推入作用域链的前端,当函数执行完毕,该对象也随之销毁。

可以看到,全局变量会被活动对象推到作用域链的最后端,这也就是为什么全局变量访问速度慢的原因!

with

一般情况下,作用域链只会被with和catch语句影响。当使创建用with的时候,函数会创建一个新的活动对象,推到最前端,该对象就是with的对象。这就意味着所有的局部变量都处于第二个作用域链对象中去了,这也就是为什么要避免使用with的原因。

以上所述是小编给大家介绍的JavaScript中with语句的理解,希望对大家有所帮助,如果大家想了解更多资讯敬请关注三水点靠木网站!

Javascript 相关文章推荐
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
微信小程序实现多图上传
Jun 19 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 #Javascript
使用bootstrap3开发响应式网站
May 12 #Javascript
You might like
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
理解javascript闭包
2015/12/15 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
自我鉴定三原则
2014/01/13 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
文案策划求职信
2014/03/18 职场文书
小学生优秀评语大全
2014/04/22 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js