1、函数的定义
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
//第一种定义方式
function fn1() {
alert("fn1");
}
//函数就是一个非常特殊的对象，是一个Function类的实例，其实在内存中存储的操作是通过一个键值对来存储的
alert(typeof fn1);
//由于函数是一个对象，所以可以通过如下方式定义
//以下是通过函数的拷贝来完成赋值，两个引用并没有指向同一个对象
var fn2 = fn1;
fn2();
fn1 = function() {
alert("fnn1");
}
/**
* 函数虽然是一个对象，但是却和对象有一些区别，对象是通过引用的指向完成对象的赋值的，而函数却是通过对象的拷贝来完成的
* 所以fn1虽然变了，并不会影响fn2
*/
fn2();
fn1();
/**
* 对于对象而言，是通过引用的指向来完成赋值的，此时修改o1或者o2会将两个值都完成修改
*/
var o1 = new Object();
var o2 = o1;
o2.name = "Leon";
alert(o1.name);
</script>
</head>
<body>
</body>
</html>
2、函数的重载
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
// function sum(num1,num2) {
// return num1+num2;
// }
/**
* 等同于以上函数
*/
var sum = function(num1,num2) {
return num1+num2;
}
// function sum(num1) {
// return num1+100;
// }
/**
* 此时sum所指向的空间已经从有两个参数的函数变化到只有num1的函数中
* 在调用的时候就只会调用只有num1的函数
* 特别指出：函数的参数和调用没有关系，如果函数只有一个参数，但是却传入
* 了两个参数，仅仅只会匹配一个
* 所以在js中函数不存在重载
*/
var sum = function(num1) {
return num1+100;
}
alert(sum(19)); //119
alert(sum(19,20)); //119
//函数有如下一种定义方式
/**
* 如下定义方式等于定义了一个
* function fn(num1,num2){
* alert(num1+num2);
* }
* 所以通过以下的例子，充分的说明函数就是一个对象
*/
var fn = new Function("num1","num2","alert('fun:'+(num1+num2))");
fn(12,22);
</script>
</head>
<body>
</body>
</html>
3、函数的传值
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
/**
* 由于函数是对象，所以可以直接把函数通过参数传递进来
*/
function callFun(fun,arg) {
//第一个参数就是函数对象
return fun(arg);
}
function sum(num) {
return num+100;
}
function say(str) {
alert("hello "+str);
}
//var say = xxx
//调用了say函数
callFun(say,"Leon");
//调用了sum函数
alert(callFun(sum,20)); //120
function fn1(arg) {
/**
* 此时返回的是一个函数对象
*/
var rel = function(num) {
return arg+num;
}
return rel;
}
//此时f是一个函数对象，可以完成调用
var f = fn1(20);
alert(f); //function(num) {return arg+num;} 此时的arg = 10
alert(f(20)); //40
alert(f(11)); //31
</script>
</head>
<body>
</body>
</html>
4、函数排序
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
</head>
<body>
<div id="person"></div>
<script type="text/javascript">
/**
* 根据数字来进行排序的函数
*/
// function sortByNum(a,b) {
// return parseInt(a)-parseInt(b);
// }
// alert("11"+1); //111
// //当进行减法的时候，会自动完成转换
// alert("11"-1); //10
// var as = [1,2,"11px",33,"12px",190];
// //对于js而言，默认是按照字符串来进行排序的
// as.sort(sortByNum);
// alert(as); ////1,2,"11px","12px",33,190
//测试根据对象排序
function Person(name,age) {
this.name = name;
this.age = age;
}
var p1 = new Person("Leno",39);
var p2 = new Person("John",23);
var p3 = new Person("Ada",41);
var ps = [p1,p2,p3];
// ps.sort(sortByAge);
//p1.name,p1["name"]
/**
* 使用以下方法来处理排序，带来的问题是需要为每一个属性都设置一个函数，显然不灵活
* 但是如果通过函数的返回值调用就不一样了
*/
// function sortByName(obj1,obj2) {
// if(obj1.name>obj2.name) return 1;
// else if(obj1.name==obj2.name) return 0;
// else return -1;
// }
// function sortByAge(obj1,obj2) {
// return obj1.age-obj2.age;
// }
//
ps.sort(sortByProperty("age"))
function sortByProperty(propertyName) {
var sortFun = function(obj1,obj2) {
if(obj1[propertyName]>obj2[propertyName]) return 1;
else if(obj1[propertyName]==obj2[propertyName])return 0;
else return -1;
}
return sortFun;
}
function show() {
var p = document.getElementById("person");
for(var i=0;i<ps.length;i++) {
p.innerHTML+=ps[i].name+","+ps[i].age+"<br/>";
}
}
show();
</script>
</body>
</html>
5、函数的arguments内部属性
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
</head>
<body>
<div id="person"></div>
<script type="text/javascript">
function say(num) {
/*
* 在函数对象中有一个属性(内部属性)叫做arguments,通过这个属性可以获取相应的参数值，这个属性
* 是一个数组，其实就是传递进来的参数
*/
alert(arguments.length);
for(var i=0;i<arguments.length;i++) {
alert(arguments[i]);
}
alert(num);
}
/**
* 在arguments这个对象中有一个callee的方法，arguments.callee(arg)可以反向的调用函数本身
*/
// say(1,2,3);
function factorial(num) {
if(num<=1) return 1;
//此时和函数名耦合在一起
// else return num*factorial(num-1);
//以下就实现了函数名的解耦合，在js中通常都是使用这种方式做递归
else return num*arguments.callee(num-1);
}
/**
* 以上是一个求阶乘的函数,以上递归调用的函数名称和原有函数名耦合在一起了，如果将来这个函数名称更改之后，
* 递归调用就会失效
*/
var cf = factorial;
//此时不会报错
alert(cf(5));
factorial = null;
//此时由于cf这个函数依然使用factorial这个名称来调用，但是factorial已经指向null了，所以就会报错
//如上情况就需要使用arguments.callee方法来调用
alert(cf(5));
</script>
</body>
</html>
6、函数的this内部属性
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
</head>
<body>
<div id="person"></div>
<script type="text/javascript">
/**
* 当需要创建一个类的时候，设置类的属性和方法需要通过this关键字来引用
* 但是特别注意:this关键字在调用时会根据不同的调用对象变得不同
*/
var color = "red";
function showColor() {
alert(this.color);
}
/**
* 创建了一个类，有一个color的属性和一个show的方法
*/
function Circle(color) {
this.color = color;
this.showColor = showColor;
}
var c = new Circle("yellow");
//使用c来调用showColor方法，等于调用了showColor()方法
//此时的this是c，所以color就是yellow
c.showColor();//yellow
//此时调用的对象等于是window,showColor的this就是window,所以就会找window中color
showColor();//red
</script>
</body>
</html>
7、函数的length
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
</head>
<body>
<div id="person"></div>
<script type="text/javascript">
function fn1() {
}
function fn2(num1,num2) {
}
function fn3(num1){
}
//函数的length就表示该函数所期望的参数值
alert(fn1.length);//0
alert(fn2.length);//2
alert(fn3.length);//1
</script>
</body>
</html>
8、函数的call与apply
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
</head>
<body>
<div>
call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的，换句话说，就是为了改变函数体内部 this的指向。因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。
二者的作用完全一样，只是接受参数的方式不太一样。例如，有一个函数 func1 定义如下：
var func1 = function(arg1, arg2) {};
就可以通过 func1.call(this, arg1, arg2); 或者 func1.apply(this, [arg1, arg2]); 来调用。其中 this 是你想指定的上下文，他可以任何一个 JavaScript 对象(JavaScript 中一切皆对象)，call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。
JavaScript 中，某个函数的参数数量是不固定的，因此要说适用条件的话，当你的参数是明确知道数量时，用 call，而不确定的时候，用 apply，然后把参数 push 进数组传递进去。当参数数量不确定时，函数内部也可以通过 arguments 这个数组来便利所有的参数。
</div>
<script type="text/javascript">
function sum(num1,num2) {
return num1+num2;
}
function callSum1(num1,num2) {
//使用sum这个函数来完成一次调用，调用的参数就是callSum1这个函数的参数
//apply的第二个参数表示一组参数数组
return sum.apply(this,arguments);
}
function callSum2(num1,num2) {
//关键就是第二个参数是数组
return sum.apply(this,[num1,num2]);
}
alert(callSum1(12,22));
alert(callSum2(22,32));
function callSum3(num1,num2) {
//call是通过参数列表来完成传递，其他和apply没有任何区别
return sum.call(this,num1,num2);
}
alert(callSum3(22,33));
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
</head>
<body>
<div id="person"></div>
<script type="text/javascript">
/**
* 当需要创建一个类的时候，设置类的属性和方法需要通过this关键字来引用
* 但是特别注意:this关键字在调用时会根据不同的调用对象变得不同
*/
var color = "red";
function showColor() {
alert(this.color);
}
/**
* 创建了一个类，有一个color的属性和一个show的方法
*/
function Circle(color) {
this.color = color;
}
var c = new Circle("yellow");
showColor.call(this);//使用上下文来调用showColor,结果是red
showColor.call(c);//上下文对象是c,结果就是yellow
/**
* 通过以上发现，使用call和apply之后，对象中可以不需要定义方法了
* 这就是call和apply的一种运用
*/
</script>
</body>
</html>
相关推荐
**加密库Crypto-JS详解** Crypto-JS是一个广泛使用的JavaScript加密库，专为在浏览器环境中进行安全的数据加密而设计。这个库提供了多种加密算法，包括对称加密、非对称加密以及哈希函数等，使得开发者能够实现数据...
《使用videojs播放RTMP视频详解》 在现代网页开发中，视频内容的展示已经成为不可或缺的一部分，而JavaScript库video.js以其强大的功能和易用性深受开发者喜爱。本教程将详细介绍如何利用video.js来播放RTMP协议的...
《z-pager.js分页插件详解》 在网页开发中，当数据量过大时，为了提高用户体验，通常会采用分页的方式来展示信息。这里我们要介绍的是一款名为`z-pager.js`的分页插件，它能帮助开发者快速、高效地实现网页分页功能...
**前端项目 - videojs-record 插件详解** `videojs-record` 是一个强大的前端插件，主要用于在Web浏览器中实现音频、视频以及图像的录制功能。这个插件基于流行的 HTML5 视频库 `video.js`，为开发者提供了一种简单...
《layui城市选择器——city-picker.js详解》 在前端开发中，用户界面的交互性和用户体验是至关重要的。layui是一款优秀的轻量级前端框架，它以其简洁的API和强大的功能受到许多开发者的喜爱。本文将详细解析基于...
`jQuery Validate`是一个非常流行的JavaScript库，用于在前端进行表单验证。这个验证框架极大地简化了用户输入数据的检查过程，使得网页应用可以确保用户提交的信息满足预设的规则。以下是对`jQuery Validate`框架的...
**ES5 Shim.js详解** `es5-shim.js` 是一个JavaScript库，旨在为不完全支持ECMAScript 5（ES5）特性的旧版浏览器提供兼容性支持。这个库由 kangax 开发，它的主要目标是使得在那些只支持ECMAScript 3或者更早版本的...
**Angular.js WUI-DatePicker 插件详解** Angular.js 是一个强大的前端JavaScript框架，它提供了丰富的功能和灵活性，用于构建动态、数据驱动的Web应用程序。而WUI-DatePicker是一款基于Angular.js开发的日期选择器...
《JS打印功能：jQuery.jqprint-0.3.js详解》 在Web开发中，有时候我们需要为用户提供打印页面的功能，JavaScript库jQuery提供了一个方便的插件——jQuery.jqprint-0.3.js，用于实现这一目标。这个插件使得开发者...
【JavaScript图像压缩器——imagecompressor详解】 在现代网页应用中，用户经常需要上传图片，而未经处理的大尺寸图片不仅占用存储空间，也可能导致页面加载速度变慢，影响用户体验。为了解决这个问题，开发者通常...
**D3.js 泡泡云图详解** D3.js（Data-Driven Documents）是一个强大的JavaScript库，用于创建数据驱动的Web图形。它以其灵活性、可扩展性和丰富的功能集而受到数据可视化开发者的广泛欢迎。"d3js--bubble_cloud...
### JS Tree菜单详解 在软件开发尤其是Web应用开发过程中，树型菜单是非常常见的数据组织与展示方式之一。本文将详细介绍两种流行的JavaScript树型菜单插件：`dTree` 和 `xTree`，并深入探讨它们的功能、使用方法及...
在web开发中，我们经常需要用js将时间戳转yyyy-MM-dd HH-mm-ss类似的格式，这样才适合我们的观感，那么我们该如何在js中将时间戳转换成这种格式呢？其实很简单，我们开发一个时间戳工具类，如下： 第一种:最简单的是...
JavaScript（简称JS）是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，实现客户端的交互功能。在给定的标题中提到了两个关键的JavaScript库：`jquery-1.11.1.min.js` 和 `jquery.validate.min.js`。 ...
如果你的ES5库并没有使用任何模块化规范进行导出，或者你需要引入一个全局可用的JavaScript库，你可以使用Node.js的require函数。例如： ```javascript // 在main.js或其他Vue组件中 const someES5Function = ...
《EXT开发基础：详解"ext-base.js"与EXT框架》 EXT是一个强大的JavaScript库，它为Web应用程序提供了丰富的用户界面组件和数据管理功能。在EXT的开发中，"ext-base.js"扮演着至关重要的角色，它是EXT框架的核心部分...
### function_exists() 函数详解 在PHP编程语言中，`function_exists()` 是一个非常实用的内置函数，用于检查指定的函数是否已经定义。这个函数在处理动态调用或需要判断某些函数是否存在时非常有用。 #### 函数...
**jQuery Barcode JS 库及其应用详解** 在网页开发中，条形码的生成与显示是一项常见需求，尤其在电子商务、库存管理和物流跟踪等领域。`jQuery Barcode` 是一款基于 JavaScript 的库，它允许开发者轻松地在网页上...
《jQuery.dataTables.js 使用详解——一、基础配置》 在网页开发中，数据展示是一个重要的环节，而jQuery.dataTables.js插件为高效、美观的数据表格呈现提供了强大的解决方案。本篇将深入探讨该插件的基础配置，...