深入浅析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 去字符串空格终极版(支持utf8)
Nov 14 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 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 array_intersect()函数使用代码
2009/01/14 PHP
php session 预定义数组
2009/03/16 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
Linux中为php配置伪静态
2014/12/17 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
对python中的argv和argc使用详解
2018/12/15 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
python binascii 进制转换实例
2019/06/12 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
有机童装:Toby Tiger
2018/05/23 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书