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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
js+css实现导航效果实例
Feb 10 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
资料注册后发信小技巧
2006/10/09 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
使用js实现数据格式化
2014/12/03 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python中as用法实例分析
2015/04/30 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
实现Python与STM32通信方式
2019/12/18 Python
Pytorch之parameters的使用
2019/12/31 Python
如何利用python生成MD5并去重
2020/12/07 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
介绍一下gcc特性
2012/01/20 面试题
专科应届生求职信
2013/11/24 职场文书
教室布置标语
2014/06/26 职场文书
会计个人实习计划书
2014/08/15 职场文书