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 相关文章推荐
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
vue 中的keep-alive实例代码
Jul 20 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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 feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python re正则表达式模块(Regular Expression)
2014/07/16 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
python入门教程之识别验证码
2017/03/04 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
金融专业个人的自我评价
2013/10/18 职场文书
电子商务专业推荐信范文
2013/12/02 职场文书
学校开学标语
2014/10/06 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
pandas求平均数和中位数的方法实例
2021/08/04 Python
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL