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>
相关推荐
最近开发一个项目时，有微信H5网页自定义分享功能，使用了微信JS-SDK的分享到好友和分享到朋友圈功能。 微信开发文档这样写的 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0） wx.ready(function () {...
详解JS WebSocket断开原因和心跳机制 1、断开原因 WebSocket断开的原因有很多，最好在WebSocket断开时，将错误打印出来。 ws.onclose = function (e) { console.log('websocket 断开: ' + e.code + ' ' + e....
javascript 面向对象function详解 js中的函数有三种表示方式： //函数的第一种表示方式：函数关键字的方式 function f1() { alert("f1"); } //函数的第二种表示方式：函数字面量的方式 var f2 = ...
js对象的读取速度实例详解 1、访问字面量和局部变量最快，而访问数组元素和对象成员相对较慢。访问对象成员时，就像作用域链一样，在原型链上搜索。 2、如果找到的成员在原型链中的位置太深，访问速度就会变慢。...
内含： 01-native.js 02-utils.js 03-hash.js 04-array.js 05-browser.js ...08-function.js 09-number.js 10-string.js 11-event.js 12-class.js 13-class.extras.js mootools1.2中文文档(html版)
详解js创建对象的几种方式和对象方法 这篇文章是看js红宝书第8章，记的关于对象的笔记（第二篇）。 创建对象的几种模式： 工厂是函数的意思。工厂模式核心是定义一个返回全新对象的函数。 function getObj...
<script src=hook.js> var myHook = new Hooks(); myHook.initEnv(); //普通全局函数 var _alert = null; function myalert(param){console.log("before hook");} alert.hook("_alert",myalert); alert.unhook("_...
1箭头函数和function的this对比.js 1鸣人分身.js 2.0示例脚本合集.js 2.js 2.离线文字转语音~发声器.js 2018-05-16.js 2018年刑侦科推理题.js 2019-10-13蚂蚁森林.js 2048全自动(1).js 2048全自动.js ...
在web开发中，我们经常需要用js将时间戳转yyyy-MM-dd HH-mm-ss类似的格式，这样才适合我们的观感，那么我们该如何在js中将时间戳转换成这种格式呢？其实很简单，我们开发一个时间戳工具类，如下： 第一种:最简单的是...
主要介绍了JavaScript引用类型Function,结合实例形式详细分析了javascript引用类型Function概念、定义、原理、相关使用技巧与操作注意事项,需要的朋友可以参考下
详解JavaScript闭包问题 闭包是纯函数式编程语言的传统特性之一。通过将闭包视为核心语言构件的组成部分，JavaScript语言展示了其与函数式编程语言的紧密联系。由于能够简化复杂的操作，闭包在主流JavaScript库...
9.5.7 Function对象 9.5.8 再论关键字with 9.6 应知应会 练习 第10章 浏览器对象模型：BOM 10.1 JavaScript及浏览器对象模型 10.1.1 navigator对象的使用 10.1.2 window对象的...
JS组件Bootstrap Table使用方法详解 转载 2016年03月21日 15:06:09 标签： Bootstrap Table 最近客户提出需求，想将原有的管理系统，做下优化，通过手机也能很好展现，想到2个方案: a方案：保留原有的页面，新设计...
本篇主要介绍普通函数、匿名函数、闭包函数 ...在Js中函数是没有重载，定义相同函数名、不同参数签名的函数，后面的函数会覆盖前面的函数。调用时，只会调用后面的函数。 var n1 = 1; function add(value1) { retur
主要介绍了javascript中Function类型详解的相关资料,需要的朋友可以参考下
关键字function用来定义函数。...在JavaScript中，函数是Function类的具体实例。而且都与其它引用类型一样具有属性和方法。 函数名实际上是指向函数对象的指针，函数可以作为参数参与到传参和返回值中。 函数的
项目中有个需求，下拉框既可以下拉选择，也可以手动填写 ...js代码 $('#noMean').editableSelect({ filter:false, effects: 'fade', duration: 200, onCreate:function () { console.log(下拉框创建) }, onShow