javascript 面向对象编程 function是方法(函数)

摘要：好程序不是写给computer的，而是写给human的。遇到复杂功能，应该想着把它简化、组件化，把小功能封装成小组件，小功能块可以任意的组合...

好程序不是写给computer的，而是写给human的。遇到复杂功能，应该想着把它简化、组件化，把小功能封装成小组件，小功能块可以任意的组合得到千变万化的复杂功能。function就可以帮助我们把功能进行封装。那什么是封装呢。要我说，只要把具体实现给打包，对外提供调用接口那就是封装，方法也好、类也好就做了这些事。

javascript中的function可以用来创建方法、也可以用来创建类，实际上我们可以认为是用function来模拟出的类(说到类一般都会要去了解闭包的知识)。还是先看一下方法吧。

javascript函数分为有名函数、匿名函数和在匿名函数基础上延伸出来的立即执行函数。

普通函数就是用function直接声明的有名函数。

function Hello() {

alert("hello , everybody!");

};

Hello();

function SayHelloTo(somebody) {

alert("hello , " + somebody + "!");

};

SayHelloTo("张三");

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 上面分别创建了Hello和SayHelloTo方法。Hello不带有参数，直接通过Hello()来完成调用。SayHelloTo方法带有一个参数，向谁问候时需要知道是在问候谁。在调用SayHelloTo(“张三”)时要传入参数。这些代码和java、C#都没有什么太大区别。在方法重载上却有较大改变，javascript本身并不支持什么重载，一个方法名就对应一个方法。如果强制的写出多个同名方法，其实会出现先写的方法被覆盖掉的情况。

function Hello() {

alert("hello , everybody!");

};

Hello();

function Hello(somebody) {

alert("hello , " + somebody + "!");

};

Hello("张三"); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

javascript 面向对象编程 function是方法(函数)1

javascript 面向对象编程 function是方法(函数)2

第一个Hello方法被覆盖掉，执行时直接调用Hello()则认为调用第二个Hello方法但没有传递参数值，所以弹出了undefined信息。调用Hello(“张三”)时很正常的完成执行。其实javascript也可以用一些直白的方式来完成重载。学过C#的人都会知道有个params关键字，通过它可以实现向方法传递不定个数的参数。我们可以通过对参数的信息做手动的判断也可以模拟出类似重载的效果。而在javascript中根本就不需要什么params关键字，就可以很自然的实现任意个数参数的传递。function中有个arguments属性，可以把它看成一个数组，它按传递进来的参数的顺序来保存所有的参数。也就是说我们在定义方法时可以不声明参数名。

function ShowArguments() {

var args = "";

for (var i = 0; i < arguments.length; i++) {

args += arguments[i] + ",";

};

alert(args.substr(0, args.length - 1));

};

ShowArguments(1, 2, 3, 4, 5, 6, 7); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

javascript 面向对象编程 function是方法(函数)3

试着用argements来模拟一下重载。

function Hello() {

if (arguments.length == 0) {

alert("hello , everybody!");

}

else {

alert("hello , " + arguments[0] + "!");

};

Hello();

Hello("张三");

function Increase(arg) {

if (typeof arg == "undefined") {

alert("请输入参数");

}

if (typeof arg == "string") {

alert(String.fromCharCode(arg.charCodeAt(0) + 1));

}

if (typeof arg == "number") {

alert(arg + 1);

}

};

Increase();

Increase("a");

Increase(1); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 基于参数类型不同的重载。

函数除了有名函数之外也可以是匿名函数，匿名函数就是没有名子的函数，不论函数有名还是没有名子，都是一个完整的函数对象。匿名函数还是用function来声明，但不用为它指定名称。其它的方面，比如参数等等和有名函数没什么区别。

function() {

……

}; .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

匿名函数一般可以满足临时的函数需求，不需要有变量对其进行引用（有名的函数可以认为是有变量引用的函数）。比如需要一个函数做为值对象做为参数传入方法、需要编程的方式为对象添加事件，用匿名函数都可以很好的完成。当然你也可以单独声明变量来引用某个匿名函数对象，这和普通有名函数就没什么区别了。

function Each(array, fun) {

for (var i = 0; i < array.length; i++) {

fun(array[i]);

};

var nums = [1, 2, 3, 4, 5, 6, 7];

Each(nums, function(arg) {

alert(arg);

}); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

上面代码执行，依次输出数组中的元素。

//在窗体加载时,在标题上显示当前时间

window.onload = function() {

document.title = new Date().toString();

};

//也可以将匿名方法传入定时器中

setInterval(function() {

document.title = new Date().toString();

}, 1000); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

使用匿名函数绑定事件和进行定时操作。

var Hello = function() {

alert("hello , everybody!");

如果将匿名函数赋给变量，那和有名的普通函数就没区别了。但不管是变量引用还是普通地有名函数，这样的函数在内存上都持久的占有一定资源。有时候我们只想执行一次大不必使用有引用的函数，直接执行匿名函数可能是最好的选择。把匿名函数包起来，加个括号执行，一切ok，这就是由匿名函数延伸出来的立即执行函数。

(function() {

alert("hello , everybody!");

})();

(function(somebody) {

alert("hello , " + somebody + "!");

})("张三"); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

立即执行函数在做事件绑定，设置回调函数等方面往往会有意想不到的效果，可以解决诸如对象引用等问题。

var student = {

Name: "张三",

Age: 20,

Introduce: function() {

alert("我叫" + this.Name + ",今年" + this.Age + "岁了!");

} };

因为javascript中函数的这些特点加之它的对象的特征，我们还可以写出一些有functional意味的程序出来。其实javascript中function真的是老大。

function Sum(fun, x) {

if (x <= 0)

return 0;

return fun(x) + Sum(fun, x - 1);

};

alert(Sum(function(i) { return i * i; }, 100)); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

下面这又是什么呢？是方法吗？是类吗？

function Point() {

先啰嗦到这，下次再看看类。

【javascript 面向对象编程 function是方法(函数)】相关文章：

★ 深入浅析JavaScript面向对象和原型函数

★ javascript清空table表格的方法

★ 简单分析javascript面向对象与原型

★ javascript用函数实现对象的方法

★ javascript带回调函数的异步脚本载入方法实例分析

★ javascript获取select值的方法分析

★ javascript中一些util方法汇总

★ javascript无刷新评论实现方法

★ Javascript监视变量变化的方法

★ javascript实现动态改变层大小的方法

上一篇： javascript 面向对象编程聊聊对象的事

下一篇： jQuery 事件队列调整方法

学习工具