码迷,mamicode.com
首页 > 编程语言 > 详细

javascript匿名方法

时间:2014-07-22 23:10:33      阅读:500      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   使用   

首先,看一段很有意思的代码:

mamicode.com,码迷
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>匿名</title>
    <script type="text/javascript">
        (function() {
            aa = 1;
        })();
        alert(aa);
    </script>
</head>
<body>
</body>
</html>
mamicode.com,码迷

这个结果是什么?

很多时候在看第三方js插件时,会看的(function(){})(); 这种样子的代码。.net程序猿很费解。

这种写法是非常好的方式。

javascript是一种上手简单,往后学就会觉得比较难,再往后又会觉得简单的语言。(看的资料上很多这么说,不幸的是我一直觉得它很难。)写javascript千万不能把它当类似C语言的写法写。javascript可以说都是对象。(function(){})();这么个写法,不知道专业人员怎么说,我的理解是函数表达式和执行函数。因为没有var 所以可以节省变量,不会给window下添加新的对象。

不会给window下添加新的对象,这句话怎么理解呢?

首先应该说下javascript的变量作用域,javascript是没有块作用域,变量一旦声明,就会在整个方法体中。下面代码;alert出的结果是2。而不会报变量未定义的错误。但在A方法外,i 变量就出作用域了。

mamicode.com,码迷
<script type="text/javascript">
function A() {
for(var i=0;i<2;i++) {} alert(i); } A();
</script>
 
mamicode.com,码迷

下段代码会弹出undefined 和2。这时候A(); 也可以通过window.A();来调用。 注意这里 为何是 undefined  而不是报的 a is not defined ?

mamicode.com,码迷
function A()
{
    alert(a);
    var a = "2";
    alert(a);
}
A();//可以换成 window.A();
mamicode.com,码迷

变量a,也会添加到window下。可以这么调用  window.a;   看下面代码:

<script type="text/javascript">
var a;
</script>

接下来再说函数表达式。var A=function(){alert(1);};

这种声明方法和function A(){} 大体相同,不同就是有执行先后顺序的区别。就像定义变量一样。看下面代码:这时可以弹出1。

A():
function A()
{
    alert(1);
}

换成下面这种则会报A is not a function。 var A =function(){alert(1);}必须要在 A(); 之前。

A();
var A = function () {
     alert(1);//必须在A();执行方法 前面。
};

有了这些知识。理解(function(){alert();})();这种方式的代码就简单了。 就是一个函数表达式 立即执行。

(function()
{
    alert(1);
})();

把function(){alert(1);} 换成上面的A.因为 A==function (){alert(1);}  所以就成上面的样子。

 

变量A存放方法的引用地址。

这样window下也没有新增对象。 有些地方会说不会污染全局变量。

在写js插件时,只暴露一个对象,供调用。可以这么写,看下面代码:

 

mamicode.com,码迷
(function(){
    window.cjc={
        A:function(){
       alert(1);
     }, Sum:function(a,b){
     alert(a+b);
     } }; })();
mamicode.com,码迷

 

暴露出 cjc  一个变量。使用A方法时,cjc.A(); 使用Sum方法时,cjc.Sum(1,2);

还可以这么写。看面代码:

mamicode.com,码迷
(function (nc) {
      nc.A = function () {
            alert(1);
       };
       nc.Sum = function (a, b) {
            alert(a + b);
       };
 })(cjc = {});
//调用Sum方法
cjc.Sum(1,2);
mamicode.com,码迷

当暴露的变量有冲突时,可以换,只要把 cjc={} 换成别的就行如下面代码:

mamicode.com,码迷
(function (nc) {
      nc.A = function () {
            alert(1);
       };
       nc.Sum = function (a, b) {
            alert(a + b);
       };
 })(test = {});
//调用Sum方法
test.Sum(1,2);
mamicode.com,码迷


为何可以使用test={} 这种形式?js的语法,上面的代码可以等效成下面这种。

mamicode.com,码迷
var test={};
(function (nc) {
      nc.A = function () {
            alert(1);
       };
       nc.Sum = function (a, b) {
            alert(a + b);
       };
 })(test);
//调用Sum方法
test.Sum(1,2);
mamicode.com,码迷

 看下面这段代码。

if(a=1)
{
    alert(a);
}

结果是 alert出1。

 

javascript语法特性跟别的C、C#这类语言,区别还是不小的。此外javascript特性还有很多,function就有不少,像原型扩展等。感觉开始接触时实战好点。当能做出简单的东西时,要想提高还是得看基础。

 能力不足,有地方理解不到位。

javascript匿名方法,码迷,mamicode.com

javascript匿名方法

标签:style   blog   http   java   color   使用   

原文地址:http://www.cnblogs.com/chengjunchao/p/3700118.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!