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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
vue中动态添加class类名的方法
Sep 05 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 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
一个域名查询的程序
2006/10/09 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
Python排序算法实例代码
2017/08/10 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
Python hashlib模块加密过程解析
2019/11/05 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
2014厂务公开实施方案
2014/02/17 职场文书
网络管理专业求职信
2014/03/15 职场文书
2014年党课学习材料
2014/05/11 职场文书
单位接收函格式
2015/01/30 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL