深入浅析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 相关文章推荐
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
用php和MySql来与ODBC数据连接
2006/10/09 PHP
一个捕获函数输出的函数
2007/02/14 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
Javascript的匿名函数小结
2009/12/31 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
python计算圆周率pi的方法
2015/07/11 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
python爬虫如何解决图片验证码
2021/02/14 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
领导的自我鉴定
2013/12/28 职场文书
战友聚会邀请函
2014/01/18 职场文书
小学生期末评语大全
2014/04/21 职场文书
创业培训计划书
2014/05/03 职场文书
财务管理专业求职信
2014/06/11 职场文书
团日活动总结模板
2014/06/25 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
升国旗演讲稿
2014/09/05 职场文书
个人贷款收入证明
2014/10/26 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
刑事撤诉申请书
2015/05/18 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
Golang: 内建容器的用法
2021/05/05 Golang