深入浅析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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
SVG实现时钟效果
Jul 17 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
解决layer.prompt无效的问题
Sep 24 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
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
javascript新手语法小结
2008/06/15 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
python实现排序算法
2014/02/14 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
简单了解django索引的相关知识
2019/07/17 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
python用Configobj模块读取配置文件
2020/09/26 Python
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
婚前协议书
2014/04/15 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
文明社区申报材料
2014/08/21 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
孟佩杰观后感
2015/06/17 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
vue实力踩坑之push当前页无效
2022/04/10 Vue.js