深入浅析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 快捷键设置实现代码
Mar 13 Javascript
Javascript Global对象
Aug 13 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
js 获取、清空input type="file"的值示例代码
Feb 19 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
小程序实现tab标签页
Nov 16 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
Cpy和Python的效率对比
2015/03/20 Python
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python subprocess模块详细解读
2018/01/29 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
python递归下载文件夹下所有文件
2019/08/31 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
半年思想汇报
2013/12/30 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
党员思想汇报材料
2014/12/19 职场文书
建立共青团委员会的请示
2019/04/02 职场文书