日期:2014-05-16  浏览次数:20347 次

Douglas Crockford - JavaScript function 3 of 4

?function能像其他类型的值一样被传递、返回、存储。
直接使用function定义一个函数,等同于使用var定义一个变量,并将它赋值为一个function。

function foo() {}


等同于

var foo = function foo() {};


(function后的foo可省略)
内部函数(嵌套函数)

?一个function能被定义在其他function的内部,并且能访问外部function中定义的变量和参数。

闭包

?当外部的function返回后,内部function仍然能够执行并继续访问外部function的变量。

function fade(id) {
   var dom = document.getElementById(id);
   var level = 1;
   function step() {
      var h = level.toString(16);
      dom.style.backgroundColor = '#FFFF' + h + h;
      if (level < 15) {
          level += 1;
          setTimeout(step, 100);
      }
  }
  setTimeout(step, 100);
}

?函数对象

Function属于对象类型中的一种,所以它也能有自己“name/value对”,当function定义并作为一个对象的属性值存储时,将该function称为method。能用这些特性来模拟其他面向对象语言中构造函数的行为。

当用多于function定义时声明的参数个数调用function时,将忽略传递进来的多余参数;当少于定义时声明的参数个数,这些缺少的参数将被赋值为undefined。

?

function调用方式

function form: functionObject(arguments);

通常意义上的函数调用。this引用的是全局对象(对于浏览器就是window对象)

method form: thisObject.methodName(arguments);

此时将有一个隐含的this在起作用,该this引用thisObject。

constructor form: new functionObject(arguments);

一个新的对象将被创建,this引用这个新创建的对象。如果没有明确地写return,this(新创建的对象)将被返回。

apply(call) form: functionObject(thisObject,[arguments]);

?

调用方式 this引用指向
?function ?the global object
?method ?the object
?constructor ?the new object

?

  • this相当于一个额外的参数,它的值取决于调用方式
  • this让method调用时可以访问到其他的对象
  • this是在运行时被绑定的

函数参数对象

是一个array-like的对象,(并非真正的array,只是访问方式类似)。前面所说的调用函数时多余的参数将被忽略,但argument里却包含了调用函数时传递给它的所有参数。

function sum() {
   var i;
   var n = arguments.length;
   var total = 0;
   for (i=0; i < n; i++)
      total += arguments[i];
   return total;
}

?隐含的全局变量

?对于任何声明在function之外的变量或者在function之内声明,但前面没有var的变量都是全局的。JSLint能帮助你找到那些隐含的全局变量。http://www.JSLint.com。

?整个页面充斥着全局变量就会有冲突的危险。可以使用对象来组织自己的变量、函数等。

<script>
   Ext = {};
   Ext.data = {};
   Ext.data.JsonReader = function() {};
</script>

?此时,页面上只有一个全局变量Ext。

?

再谈封装

可以使用匿名的函数来包装自己的程序。

Yahoo.Trivia = function() {
   //define your common vars
   return {
      getNextPoser: function(cat, diff) {
 
      },
      showPoser: function() {
         
     }
  };
} ();

?可以从使用方式上来分析上面的代码。使用的方式大概如下:

Yahoo.Trivia.getNextPoser();
Yahoo.Trivia.showPoser();

?样子很像面向对象语言中的静态类了,不需要通过new便可调用类中的方法。实际上,当程序员书写到Yahoo.Trivia,便已经调用执行了函数并返回一个对象(也就是说Trivia被赋值为函数执行返回的结果):该对象包含两个属性,getNextPoser,showPoser。属性的值是Function类型。

?

挑了自己理解听懂的做了翻译,感兴趣的可以看他老人家的原版presentation

http://video.yahoo.com/watch/111595/1710607