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 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
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+xslt在windows平台上
2006/10/09 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
python获取当前日期和时间的方法
2015/04/30 Python
用C++封装MySQL的API的教程
2015/05/06 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
《我的第一本书》教学反思
2014/02/15 职场文书
听课评语大全
2014/04/30 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript