在 Javascript 中, 函数是“一等公民”, 它是 Javascript 的中心对象。
1. 函数是值,可以用在值被用到的任何地方。 可以存储在变量中, 用于表达式中,放在数组里, 放在对象的值对里, 作为参数传入函数, 作为函数返回值; 2. 函数是对象, 可以拥有数据属性, 拥有方法, 指向原型对象; 3. 函数拥有可调用的代码块,有多种调用模式; 可以制造闭包和回调, 这两种编程模式是非常强大的。 代码运行: 打开 chrome 浏览器, 工具 --- Javascript 控制台。 参考文献: 《Javascript: The Good Parts》 Douglas Crockford 一. 函数是值 让我们从最常规的函数调用形式开始吧!
1. 函数存储在变量中。 先看一段普通的代码:
function numAdd(a,b) { return a+b; } numAdd(5, 7);
实际上,它的含义是:
var numAdd = function(a,b) { return a+b; } numAdd(5, 7);
函数对象被存储在变量 numAdd 中, 可以通过该变量进行引用; 2. 函数用于表达式中
var choice = function(boolvar) { return boolvar ? function(num) { return num*num } : function(num) { return num / 2; } } var square = choice(true); square(2); // print 4 var half = choice(false); half(4); // print 2
这段代码根据传入的布尔值, 分别返回不同的函数对象; 如果为真, 则返回平方值函数, 如果为假,则返回取半函数。 它也演示了函数如何作为返回值。 3. 函数作为参数传入函数
var worker = function(callback) { var arrparams = [1, 2, 3, 4, 5]; callback(arrparams); }; worker(function(arrparams) { document.write('You get me print it !'); document.write(arrparams.join(' ')); }); worker(function(arrparams) { document.write('You get me print it reversed !'); var reversed = arrparams.reverse(); document.write(reversed.join(' ')); });
函数作为参数传入函数, 可以演变成回调。 回调是一种非常强大的编程模式。回调请参考文章 4. 函数作为对象的值对
var person = { name : 'Shuqin', say : function() { document.write("I am " + this.name); } } person.say();
上述代码演示了 Javascript 中的对象封装基本方法。 二、 函数是对象 对象拥有数据属性, 拥有方法, 拥有原型对象。 函数的原型对象是 Function.prototype . 继续前面的例子:
worker.salary = '6K'; document.write("My salary is " + worker.salary); document.write("My type is " + worker.typename); Function.prototype.typename = 'func'; // 将所有函数的 typename 属性设置为 func document.write("My type is " + worker.typename); document.write("My type is " + choice.typename); Function.prototype.fsay = function() { // 为所有函数添加 fsay 方法 document.write('Hey, i am a function, the first class object in javascript'); } worker.fsay(); choice.fsay(); worker.mycareer = function(career) { // 仅为 worker 函数添加方法 document.write('I am worker ' + career); } worker.mycareer(' a programmer'); choice.mycareer(' a choice'); // Error: Has no method 'mycareer'
基于原型的继承机制的最大优点就是动态灵活, 可以在运行时动态地添加任何属性和方法。 当然, 过度滥用会导致混乱。 三、 闭包 函数可以嵌套在另一函数中, 内层函数可以访问外层函数的私有变量,从而延伸了其作用域。
var secretMan = function() { var count = 1; var secret = 'very very important secret. Poison case happened in tsinghua 19 years ago'; return function() { count +=1; return secret + " ********* " + count; } } document.write("The secret: " + secret); //Error: ReferenceError: secret is not defined var revealTruth = secretMan(); document.write('Now is the time to reveal it out: ' + revealTruth()); // 页面打印: Now is the time to reveal it out: very very important secret. Poison case happened in tsinghua 19 years ago ********* 2 document.write('Now is the time to reveal it out: ' + revealTruth()); // 页面打印: Now is the time to reveal it out: very very important secret. Poison case happened in tsinghua 19 years ago ********* 3
注意到, 当执行完 var revealTruth = secretMan() 之后, 作为局部变量的 count, secret 均应该退出其作用域(退出参数栈而不存), 但由于内层函数的存在,它们依然存在着并可以继续使用, 例如 在 第二遍 revealTruth() 调用时依然可以访问 count 的值。
四、 调用模式与 this 函数有四种调用模式: 通过变量引用, 通过对象方法, 通过构造器, 通过 apply 函数. 1. 变量引用: 将函数对象存储在变量中, 从而通过变量引用来调用。 this 绑定在全局对象中; 2. 对象方法: 函数作为对象方法而调用, this 动态绑定给当前调用函数的对象; 绑定发生在调用时; 3. 构造器: 函数用于创建和初始化新对象, this 绑定给新创建的对象; 4. apply : 函数作为参数传入 apply 函数, this 绑定给指定的对象。 第一种情况:var outer = function() { document.write('Outer this: ' + this); // [object Window] var inner = function() { document.write('Inner this: ' + this); // [object Window] }; inner(); } outer();
第二种情况:
var person = { name : 'Shuqin', sayme : function() { document.write("Object this: " + this.name); // Shuqin ( function() { document.write('Inner this: ' + this); // [object Window] , this 被切换了! })(); } } person.sayme();
第三种情况:
var Man = function(name, power) { this.name = name; // this 绑定到将要被创建的新对象 this.sex = 'Man'; this.power = power; this.ability = function() { document.write('Name: ' + this.name + 'Sex: ' + this.sex + 'Power: ' + this.power); if (this.power < 80) { document.write('Oh, no , you power is little, you must strengthen it!'); } } } var me = new Man('Shuqin', 60); me.ability();
第四种情况:
var generalsum = function(callback, args) { document.write("generalsum this: " + this); var result = 0; var caller ; if (typeof this == 'function') { caller = this; } else { caller = callback; } document.write((typeof caller) + ' ' + args.join(' ')) for (i=0; i < args.length; i++) { result += caller(args[i]); document.write(result); } return result; }; var plainsumdef = function(num) { return num; } generalsum(plainsumdef, [1, 2, 3, 4, 5]); // this: [object Window] var plainsum = generalsum.apply(plainsumdef, [null, [1,2,3,4,5]]); // this: function (num) { return num; }
在这种情况下, this 被绑定到指定对象。
小结
本文初步探讨了 Javascript 的函数,所给例子倾向于阐明它的基本特征。在实际中, 还需要深入去使用它, 衍化出各种高级技巧。 理解它, 将成为理解 javascript 的一把钥匙。