javascript中的with语句是什么?

        with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性。要给对象创建新的属性,必须明确地引用该对象。  

  

  看起来不懂吗?

<!DOCTYPE html>
<html>
<head>
<title>with语句</title>
</head>
<body> <div id="div0" onclick="a = 1">div</div>
<script>
var eDiv = document.getElementById("div0");
eDiv.a = 0;
//因为eDiv下没有b这个属性, 所以b的值变成了window下的属性, 这个没有问题
with(eDiv) {
b = 0;
}; var obj = {
c : 2
};
//因为obj下有c属性, 当我们设置值的时候, c会变成设置obj的c属性;
with(obj){
console.log(c);
c = 0;
};
//输出 obj = { c : 0 }
console.log(obj);
</script> </body>
</html>

  好吧, 我懂了,但是这个with有毛用呢(要特别注意with语句的花括号里面的语句跟this不一样的)?

  

<!DOCTYPE html>
<html>
<head>
<title>with语句</title>
</head>
<body> <script>
window.l = function(){console.log( arguments[0] )};
with(location) {
l(hostname);
l(href)
}; </script>
</body>
</html>

  呵呵 ,好像就是少写几个代码的意思么么哒;

  (少年, 你好像知道的太多了哦);

  说这个有毛用啊, 有没有干货,你这个搞毛的干活, 浪费我的时间呢, 混蛋。

  

<!DOCTYPE html>
<html>
<head>
<title>with语句</title>
</head>
<body> <input id="ipt0" value="111" onclick="console.log(value+attributes.hehe.value)" hehe="aiyobucuoo" />
<!--输出了 ==>> 111aiyobucuoo --> 卧槽,这个是怎么回事, 没有用到this为什么可以把value直接输出出来啦;
</body>
</html>

  js内部对写在行内的onclick处理成了

  function(){

    with(document){

      with(this){

        //代码;

      }

    }

  }

  情不自禁的感叹,  又长见识了

  然后呢?

<!DOCTYPE html>
<html>
<head>
<title>with语句</title>
</head>
<body>
<script>
document.c = "dasb";
</script>
<form>
<input value="1" type="text" name="xx" />
<input value="2" type="text" name="age"/>
<!---这里扩展了自己的作用域
form的作用域
以及documen的作用域
---->
点击弹出clickMe12dasb
<input type="button" value="clickMe" onclick="alert(value+age.value+xx.value+c)" />
</form> <script>
/*form扩展的作用域的方式可以看成是;
with(document){
with(this.form){
with(this){ }
}
}
*/
</script>
</body>
</html>

  懂了没:略懂略懂....

js中的with语句的更多相关文章

  1. js中的条件语句

    //js中的条件语句 ; //example1 单分支语句 ){ console.log("你已经不年轻了!"); }else{ console.log("你依然很有活力 ...

  2. js中的循环语句

    js中的循环语句可分为三种:1.while:2.do……while:3.for. while的语法为 while (exp) {    //statements;} var a=1,b=0; whil ...

  3. JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构

    JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...

  4. 在js中插入html语句

    连上数据库之后,填充数据时往往需要在js中插入html语句 做法是: <body> <div class="modal-body" id="delete ...

  5. JS中的特有语句-for in

    <script> /* *js中特有语句for in *for(变量 in 对象)//对对象进行变量的语句 *{ *} */ var arr = [32,80,65]; for(i in ...

  6. JS中条件判断语句

    用pycharm敲代码时,在.js文件中敲,敲完之后复制代码到浏览器的console中去回车执行 1.if(  ){} 2.switch(a){} 3.for循环 循环列表 循环字典 循环字符串 另外 ...

  7. JS中的if语句内如何加or使多个条件通过

    if(a==1&&b==2){ //do something }//条件是a等于1  并且  b等于2时才能成立,两个条件必须同时满足 if(a==1||b==2){ //do som ...

  8. js中特有语句-with

    <script type="text/javascript"> /* *为了简化对象调用内容的书写. *可以用js中的特有语句with来完成. *格式 *with{ * ...

  9. JS中 计算器的简单制作

    今天学习的是JS中的if语句,除此之外老师还教给我们switch语句的用法, 我们用来写了简单计算器的算法,如下: <script> var a=prompt("请输入一个数字& ...

随机推荐

  1. 【实践】jdbc批量插入数据

    参考文献:http://my.oschina.net/u/1452675/blog/203670 http://superjavason.iteye.com/blog/255423 /*测试批量写入数 ...

  2. 常用中文字体 Unicode 编码

    各大网站的字体选择 网站 字体 腾讯 font: 12px "宋体","Arial Narrow",HELVETICA; 淘宝 font: 12px/1.5 t ...

  3. HDU 2899 Strange fuction 【三分】

    三分可以用来求单峰函数的极值. 首先对一个函数要使用三分时,必须确保该函数在范围内是单峰的. 又因为凸函数必定是单峰的. 证明一个函数是凸函数的方法: 所以就变成证明该函数的一阶导数是否单调递增,或者 ...

  4. POJ 1754 Splay

    单点更新,区间最值,用来练Splay刚好. 将位置作为排序的规则,利用Splay不会改变顺序的特点,求某一段区间[l,r]的最值时,将l-1伸展到根,将r+1伸展到l-1的右子树,这时r+1的左子树就 ...

  5. Android 屏幕适配(一)百分比布局库(percent-support-lib) 解析与扩展

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46695347: 本文出自:[张鸿洋的博客] 一.概述 周末游戏打得过猛,于是周 ...

  6. 八、Foundation -常用结构体

    一.NSRange 在foundation/NSRange.h中对NSRange的定义 typedef struct _NSRange{ NSUInteger location; NSUInteger ...

  7. ssh相关操作

    连接:ssh username@ip 拷贝ssh客户端文件到ssh服务器: cp 文件名 username@ip:文件名 拷贝ssh服务器文件夹到ssh客户端: scp -r wanglianghe@ ...

  8. CENTOS7 添加自定义快捷键(启动TERMINAL,显示桌面等)

    centos7中不自带启动终端的快捷键,可以自定义添加. 点击右上角的用户名,点击设置,在设置面板点击键盘,选择快捷键选项卡进入快捷键设置界面. 点击“+”添加快捷键.名称自定义(如"启动终 ...

  9. Table AdvanceTable针对表内行禁用multipleSelection , singleSelection

    OATableBean table = (OATableBean)webBean.findChildRecursive("LineTable"); table.setInserta ...

  10. EL表达式 (详解)

    L表达式      1.EL简介 1)语法结构        ${expression} 2)[]与.运算符      EL 提供.和[]两种运算符来存取数据.      当要存取的属性名称中包含一些 ...