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


Posted in Javascript onSeptember 17, 2009

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

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

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

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

function Hello() {
alert("hello , everybody!");
};
 
Hello();
 
function SayHelloTo(somebody) {
alert("hello , " + somebody + "!");
};
 
SayHelloTo("张三");

      上面分别创建了Hello和SayHelloTo方法。Hello不带有参数,直接通过Hello()来完成调用。SayHelloTo方法带有一个参数,向谁问候时需要知道是在问候谁。在调用SayHelloTo(“张三”)时要传入参数。这些代码和java、C#都没有什么太大区别。在方法重载上却有较大改变,javascript本身并不支持什么重载,一个方法名就对应一个方法。如果强制的写出多个同名方法,其实会出现先写的方法被覆盖掉的情况。

function Hello() {
alert("hello , everybody!");
};
 
Hello();
 
function Hello(somebody) {
alert("hello , " + somebody + "!");
};
 
Hello("张三");

 

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

      第一个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);

          javascript 面向对象编程  function是方法(函数)
      试着用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);
      基于参数类型不同的重载。

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

function() {
……
};

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

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);
});

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

//在窗体加载时,在标题上显示当前时间
window.onload = function() {
document.title = new Date().toString();
};
 
//也可以将匿名方法传入定时器中
setInterval(function() {
document.title = new Date().toString();
}, 1000);

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

var Hello = function() {
alert("hello , everybody!");
};

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

(function() {
alert("hello , everybody!");
})();
 
(function(somebody) {
alert("hello , " + somebody + "!");
})("张三");

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

var student = {
Name: "张三",
Age: 20,
Introduce: function() {
alert("我叫" + this.Name + ",今年" + this.Age + "岁了!");
} };
window.onload = (function(obj) { return function() { obj.Introduce(); }; })(student);

      因为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));

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

function Point() {

};

      先??碌秸猓?麓卧倏纯蠢唷?/P>

Javascript 相关文章推荐
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
ES6对象操作实例详解
May 23 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
浅谈 JavaScript 沙箱Sandbox
Nov 02 Javascript
javascript 面向对象编程 聊聊对象的事
Sep 17 #Javascript
javascript 面向对象编程 万物皆对象
Sep 17 #Javascript
javascript 面向对象编程 function也是类
Sep 17 #Javascript
类似CSDN图片切换效果脚本
Sep 17 #Javascript
var与Javascript变量隐式声明
Sep 17 #Javascript
html数组字符串拼接的最快方法
Sep 16 #Javascript
在IE下获取object(ActiveX)的Param的代码
Sep 15 #Javascript
You might like
php 验证码实例代码
2010/06/01 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
HTML DOM的nodeType值介绍
2011/03/31 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
python基础教程之对象和类的实际运用
2014/08/29 Python
python和c语言的主要区别总结
2019/07/07 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
大学毕业登记表自我鉴定
2013/10/09 职场文书
后进生转化工作制度
2014/01/17 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书