js 多种变量定义(对象直接量,数组直接量和函数直接量)


Posted in Javascript onMay 24, 2010

对象直接量创建一个对象:

var obj = {x:[1,2],y:23};

代码跟下面是一样的。
var obj=new Object(); 
obj.x=new Array(1,2); 
obj.y=23;

测试:
for(var i in obj) alert(obj[i]);

函数直接量:它是一个表达式而不是语句。

(function(){})()

如下例:
(function(){ 
document.write("some script code"); 
})() var a=(function(s){return s})("abc"); 
alert(a); 
var b=function(s){return s}; 
alert(b("abc"));

这个如何解释呢
大家应该记得这种写法
var a=function (){}
那么怎么运行a呢,那么就是a()
同样的道理,我们不通过a这个变量来存那么是如何写法,就是
function(){}()
但是你会发现这样是错的
因为解析引擎解析的时候,解析的时候发现}判断到了函数结束了
并没有把那个函数作为块来运行
那么加上()是强制把function那块作为块

一、什么是匿名函数
在Javascript定义一个函数一般有如下三种方式:

函数关键字(function)语句:
function fnMethodName(x){alert(x);}函数字面量(Function Literals):
var fnMethodName = function(x){alert(x);}Function()构造函数:
var fnMethodName = new Function('x','alert(x);')上面三种方法定义了同一个方法函数fnMethodName,第1种就是最常用的方法,后两种都是把一个函数复制给变量fnMethodName,而这个函数是没有名字的,即匿名函数。实际上,相当多的语言都有匿名函数。

二、函数字面量和Function()构造函数的区别
虽然函数字面量是一个匿名函数,但语法允许为其指定任意一个函数名,当写递归函数时可以调用它自己,使用Function()构造函数则不行。
var f = function fact(x) {
if (x < = 1) return 1;
else return x*fact(x-1);
};
Function()构造函数允许运行时Javascript代码动态的创建和编译。在这个方式上它类似全局函数eval()。

Function()构造函数每次执行时都解析函数主体,并创建一个新的函数对象。所以当在一个循环或者频繁执行的函数中调用Function()构造函数的效率是非常低的。相反,函数字面量却不是每次遇到都重新编译的。

用Function()构造函数创建一个函数时并不遵循典型的作用域,它一直把它当作是顶级函数来执行。

var y = "global"; 
function constructFunction() { 
var y = "local"; 
return new Function("return y"); // 无法获取局部变量} 
alert(constructFunction()()); // 输出 "global" 函数直接量:

只要是表达式语法,脚本宿主就认为 function 是一个直接量函数,如果什么都不加,光以 function 开头的话则认为是一个函数声明,把 function 写进一个表达式内部,比如四则运算,宿主也会将其当作是一个直接量,如下:
var a = 10 + function(){ 
return 5; 
}();

夸张一点,如下:
(function(){ 
alert(1); 
} ) ( ); 
( function(){ 
alert(2); 
} ( ) ); 
void function(){ 
alert(3); 
}() 
0, function(){ 
alert(4); 
}(); 
-function(){ 
alert(5); 
}(); 
+function(){ 
alert(6); 
}(); 
!function(){ 
alert(7); 
}(); 
~function(){ 
alert(8); 
}(); 
typeof function(){ 
alert(9); 
}();

js中定义函数的方式有多种,函数直接量就是其中一种。如var fun = function(){},这里function如果不赋值给fun那么它就是一个匿名函数。

好,看看匿名函数的如何被调用。

1、执行后得到返回值的函数调用

//方式一,调用函数,得到返回值。强制运算符使函数调用执行 
(function(x,y){ 
alert(x+y); 
return x+y; 
}(3,4)); //方式二,调用函数,得到返回值。强制函数直接量执行再返回一个引用,引用在去调用执行 
(function(x,y){ 
alert(x+y); 
return x+y; 
})(3,4);

2、执行后忽略返回值
//方式三,调用函数,忽略返回值 
void function(x) { 
x = x-1; 
alert(x); 
}(9);

嗯,最后看看错误的调用方式
//错误的调用方式 
function(x,y){ 
alert(x+y); 
return x+y; 
}(3,4);

Javascript 相关文章推荐
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
获取body标签的两种方法
Oct 13 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
js 设置选中行的样式的实现代码
May 24 #Javascript
基于jquery的direction图片渐变动画效果
May 24 #Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 #Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 #Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 #Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 #Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 #Javascript
You might like
php基础知识:控制结构
2006/12/13 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
详解js的六大数据类型
2016/12/27 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
python装饰器实例大详解
2017/10/25 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
求职信写作要突出重点
2014/01/01 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
会计人员演讲稿
2014/09/11 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers