文档章节

JavaScript学习笔记(Function类型)

lekabeen
 lekabeen
发布于 2017/09/10 17:21
字数 1092
阅读 1
收藏 0

ECMAScript中,函数就是对象,每个函数都是function类型的实例,并且具有属性和方法。为了理解这一概念,可从函数的定义方式入手。

function sum(num1, num2){
	return num1 + num2;
}

var sum = function(num1, num2){
	return num1 + num2;
}

var sum = new Function("num1","num2","return num1 + num2");  //不推荐使用

以上的三种方式都可以定义函数,前两种方式是常用的定义方式,第三种不推荐使用。但从第三种定义方式可看出,函数名就是一个引用类型的指针变量,函数就是一个对象。

既然函数名只是函数对象的指针,所以,一个函数可以有多个同时指向它的指针,即多个函数名。

 

function sum(num1, num2){
	return num1 + num2;
}
alert(sum(10,10));  //20

var anotherSum = sum;
alert(anotherSum(10,10));  //20

sum = null;
alert(anotherSum(10,10));  //20

1. 没有重载

ECMAScript中不存在函数重载,只会覆盖

var addSomeNumber = function(num){
	return num + 100;
};

addSomeNumber = function(num){
	return num + 200;
};

var result = addSomeNumber(100);  //300

既然函数名是指针,在重新赋值后自然重新指向新的内存空间

 

2. 函数声明和函数表达式

在之前所说的函数的三种定义方式中,以function开头的定义方式会被解析器最先初始化,以var开头的定义方式则不会

alert(sum(10,10));
function sum(num1, num2){
	return num1 + num2;
}
// 可以正常运行
alert(sum(10,10));
var sum = function(num1, num2){
	return num1 + num2;
}
// 运行期间产生报错

3. 作为值的函数

因为函数名本身就是变量,所以也可以作为值来使用,可以作为参数传递给另一个函数,也可以作为另一个函数的返回结果。

function callSomeFunction(someFunction, someArgument){
	return someFunction(someArgument);
}

function add10(num){
	return num + 10;
}

var result1 = callSomeFunction(add10,10);
alert(result1);  //20

function getGreeting(name){
	return "hello, " + name;
}

var result2 = callSomeFunction(getGreeting, "word");
alert(result2); //"hello, word"

以下代码根据函数可作为另一个函数的返回结果的特性,灵活地实现了对数组的自定义排序

function createComparisonFunction(propertyName){
	return function(object1, object2){
		var value1 = object1[propertyName];
		var value2 = object2[propertyName];
		
		if(value1 < value2){
			return -1;
		}else if(value1 > value2){
			return 1;
		}else{
			return 0;
		}
	}
}

var data = [{name:"zhangsan",age:28}, {name:"lisi", age:29}];

data.sort(createComparisonFunction("name"));
alert(data[0].name);  //lisi

data.sort(createComparisonFunction("age"));
alert(data[0].name);  //zhangsan

4. 内部属性arguments

arguments是函数对象中的一个属性,是一个类数组对象,包含着传入函数中的所有参数。

arguments有一个callee方法,可以调用拥有其arguments的函数,常用于做递归

function factorial(num){
	if(num <= 1){
		return 1;
	}else {
		return num * arguments.callee(num - 1);
	}
	//实现了求num的阶乘
}

alert(factorial(5));  //120

ECMAScript 5 规范了另一个函数对象的属性:caller,除了Opera早期版本,其他的浏览器都支持。这个属性中保存着调用当前函数的函数的引用,如果在全局作用域中调用当前函数,它的值为null

function outer(){
	inner();
}

function inner(){
	alert(arguments.callee.caller);
}

outer(); //outer函数的代码
inner(); //null

 

5. 内部属性this

this也是函数对象中的一个属性,引用的是函数的执行环境对象,设置类的属性和方法时需要通过this关来引用

window.color = "red";

function Circle(color){
	this.color = color;
}

function sayColor(){
	alert(this.color);
}

sayColor();  //"red"

var o = new Circle("blue");
o.sayColor = sayColor;
o.sayColor();  //"blue";

6. 函数属性prototype和length

函数的prototype属性是指向其原型的引用,JavaScript通过prototype属性实现了许多面向对象的功能

length是函数希望接收的参数个数

function sayName(name){
	alert(name);
}

function sum(num1,num2){
	return num1 + num2;
}
function sayHi(){
	alert("hi");
}

alert(sayName.length);  //1
alert(sum.length);  //2
alert(sayHi.length);  //0

7. 函数方法call、apply和bind

call()方法和apply()方法的作用相同,区别在于接收的参数不同

function sum(num1, num2){
	return num1 + num2;
}

function callSum(num1, num2){
	return sum.call(this,num1,num2);
}

function applySum(num1, num2){
	return sum.apply(this,[num1,num2]);
}
alert(callSum(10,10));  //20
alert(applySum(20,20));  //40

更重要的是,call()方法和apply()方法可以扩充函数的作用域,与prototype组合使用可以实现继承

window.color = "red";
var o = {color: "blue"};

function sayColor(){
	alert(this.color);
}

sayColor();

sayColor.call(this);  //red
sayColor.call(window); //red
sayColor.call(o);  //blue

ECMAScript 5 定义了一个方法:bind(),这个方法会创建一个函数实例,其this值会被绑定到穿个bind()函数的值

支持的浏览器:IE9+、Firefox 4+、Safari 5.1+、Opera 12+和Chrome

window.color = "red";
var o = {color: "blue"};

function sayColor(){
	alert(this.color);
}

var objectSayColor = sayColor.bind(o);
objectSayColor();  //blue

 

 

参考文献:    JavaScript高级程序设计(第3版)

© 著作权归作者所有

共有 人打赏支持
lekabeen
粉丝 0
博文 3
码字总数 3679
作品 0
厦门
程序员
私信 提问
《JavaScript权威指南》笔记(二)

第二篇笔记的内容主要涉及:数据类型转换,函数、对象、数组的创建以及null与undefined的比较。 1. javascript中类型转换的方法: (1)数字-->字符串: number+" "; String(number); number...

小微
2012/08/28
0
7
JavaWeb01-HTML篇笔记(七)

.1 案例三:完成对注册页面的数据的简单校验.1.1.1 需求: 对注册页面的数据进行非空的简单校验!!!如果有某个值没有输入,点击提交,弹出一个对话框进行提示!! 1.1.2 分析:1.1.2.1 技术分...

我是小谷粒
04/28
0
0
js的array实现栈数据结构

申明:本文是js系列笔记之一,有不正确的地方请尽管指出,大家相互学习,共同进步; 首先在阅读本文之前,默认你已经知道了javascript的数组类型,并且了解array的pop()和push方法;这里对这...

XBGG
07/03
0
0
读《JavaScript高级程序设计》

1、JavaScript学习笔记1:JavaScript学前介绍 http://my.oschina.net/bluefly/blog/478575 2、JavaScript学习笔记2:JavaScript基本概念 http://my.oschina.net/bluefly/blog/484445......

slyso
2015/07/14
0
0
JSON,异步加载(学习笔记)

JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来数据传输的,前端与后端的数据通信) JSON是静态类(不需要构造),类似于Math,内部...

Mrs_CoCo
04/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

七牛qshell工具 批量删除操作

qshell 下载地址&文档(http://developer.qiniu.com/code/v6/tool/qshell.html) 这里我们演示的是windows下的操作,将下载的工具改名为:qshell.exe 然后将文件的路径添加到PATH qshell accou...

koothon
9分钟前
0
0
Fastjson-fastjson中$ref对象重复引用问题

import java.util.ArrayList;import java.util.List;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.serializer.SerializerFeature;/** * fastjson中$ref对象......

小黄狗
14分钟前
0
0
mybatis一级缓存

mybatis执行查询的流程,最终都是通过动态代理进入到MapperProxy的invoke方法 @Override public Object invoke(Object proxy, Method method, Object[] args) throws Throwable { try......

wuyiyi
15分钟前
0
0
安装weblogic wls1033_generic.jar 遇见的坑

接别人的烂摊子,weblogic部署没部署成功不部署了 让我远程给别人部署weblogic 11g 部署完成启动域的时候启动不了报错如下 Unrecognized option: -jrockit Error: Could not create the Ja...

雁南飞丶
15分钟前
0
0
通过7个python函数理解区块链

我想对于那里的很多人来说,区块链就是这种现象,很难不让你头脑发热。我开始观看视频和阅读文章,但对我个人而言,直到我编写自己的简单区块链,我才真正理解它是什么以及它的潜在应用价值。...

笔阁
16分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部