深入浅析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 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
Vue中使用clipboard实现复制功能
Sep 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
PHP中的表达式简述
2016/05/29 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
javascript 禁止复制网页
2009/06/11 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
Python 调用Java实例详解
2017/06/02 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python 移动光标位置的方法
2019/01/20 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
大学生最新职业生涯规划书范文
2014/01/12 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
python在package下继续嵌套一个package
2022/04/14 Python