<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
因为 ECMAScript 中的函数名本身就是变量,所以函数也可以作为值来使用。
也就是说,不仅可以像传递参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回。
来看看下面的函数:
*/
function callSomeFunction(someFunction, someArgument) {
return someFunction(someArgument)
}
/*
这个函数接受两个参数。第一个参数是一个函数,第二个参数是要传递给函数的一个值。
然后,就可以像下面的例子一样传递函数了。
*/
function add10(num) {
return num + 10
}
var result1 = callSomeFunction(add10, 50)
console.log(result1) // 60
function getGreeting(name) {
return 'Hello,' + name
}
var result2 = callSomeFunction(getGreeting, 'jack')
console.log(result2) // Hello,jack
/*
当然,可以从一个函数中返回另一个函数,而且这也是极为有用的一种技术。
例如:假设有一个对象数组,我们想要根据某个对象属性对数组进行排序。
而传递给数组 sort() 方法的比较函数要接收两个参数,即要比较的值。可是,我们需要一种方式来指明按照哪个属性来排序。
要解决这个问题,可以定义一个函数,它接收一个属性名,然后根据这个属性名来创建一个比较函数,下面就是这个函数的定义:
*/
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
}
}
}
/*
这个函数定义看起来有点复杂,但实际上无非就是一个函数中嵌套了另一个函数,而且内部函数前面加了一个 return 操作符。
在内部函数接收到 propertyName 参数后,它会使用方括号表示法来取得给定属性的值。取得了想要的属性值之后,定义比较函数就非常简单了。
上面的函数可以像在下面例子中这样使用。
*/
var data = [{name: 'aaa', age: 28}, {name: 'bbb', age: 29}]
data.sort(createComparisonFunction('name'))
console.log(data[0].name)
data.sort(createComparisonFunction('age'))
console.log(data[0].age)
/*
函数内部属性
在函数内部,有两个特殊的对象:arguments 和 this
其中,arguments 是一个类数组对象,包含着传入函数中的所有参数。虽然 arguments 的主要用途是保存函数参数,
但这个对象还有一个名叫 callee 的属性,该属性是一个指针,指向拥有这个 arguments 对象的函数。
请看下面经典的阶乘函数:
*/
function factorial(num) {
if (num <= 1) {
return 1
} else {
return num * factorial(num - 1)
}
}
/*
定义阶乘函数一般都要用到递归算法:在函数有名字,而且名字以后也不会变的情况下,这样定义没有问题。
但问题是这个函数的执行与函数名 factorial 紧紧耦合在了一起。为了消除这种紧密耦合的现象,可以像下面这样使用 arguments.callee
*/
function factorial_(num) {
if (num <= 1) {
return 1
} else {
return num * arguments.callee(num - 1)
}
}
/*
函数内部的另一个特殊对象是 this ,其行为与 java c# 中的 this 大致类似。
换句话说,this 引用的是函数执行的环境对象 --- 或者也可以说是 this 值(当在网页的全局作用域中调用函数时,this 对象引用的就是 window)
*/
/*
函数的属性和方法
ECMAScript 中的函数是对象,因此函数也有属性和方法。
每个函数都包含两个属性:length 和 prototype 。
length 属性: 表示函数希望接收的命名参数的个数
prototype 属性:
在 ECMAScript 核心所定义的全部属性中,最耐人寻味的就要数 prototype 属性了。
对于 ECMAScript 中的引用类型而言,prototype 是保存它们所有实例方法的真正所在。
换句话说,诸如 toString() 和 valueOf() 等方法实际上都保存在 prototype 名下,只不过是通过各自对象的实例访问罢了。
在创建自定义引用类型以及实现继承时,prototype 属性的作用是极为重要的。
在 ECMAScript5 中,prototype 属性是不可枚举的,因此使用 for-in 无法实现。
每个函数都包含两个非继承而来的方法:apply() 和 call() 。
这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内 this 对象的值。
首先,apply() 方法接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组。
其中,第二个参数可以是 Array 的实例,也可以是 arguments 对象。
例如:
*/
function sum(num1, num2) {
return num1 + num2
}
function callSum1(num1, num2) {
return sum.apply(this, arguments) // 传入arguments
}
function callSum2(num1, num2) {
return sum.apply(this, [num1, num2]) // 传入数组
}
console.log(callSum1(10, 10)) // 20
console.log(callSum2(30, 30)) // 60
/*
call() 方法和 apply() 方法相同,它们的区别仅在于接收参数的方式不同。
对于 call() 方法而言,第一个参数是 this 值没有变化,变化的是其余参数都直接传递给函数。
换句话说,在使用 call() 方法时,传递给函数的参数必须逐个列举出来,如下:
*/
function sum3(num3, num4) {
return num3 + num4
}
function callSum3(num3, num4) {
return sum3.call(this, num3, num4)
}
console.log(callSum3(20, 20))
/*
事实上,传递参数并非是 apply() 和 call() 真正的用武之地,它们真正强大的地方是能够扩充函数赖以运行的作用域。
使用 call() 或 apply() 来扩充作用域的最大好处,就是对象不需要与方法有任何耦合关系
*/
/*
ECMAScript5 还定义了一个方法:bind()
这个方法会创建一个函数的实例,其 this 值会被绑定到传给 bind() 函数的值。例如:
*/
window.color = 'red'
var o = { color: 'blue' }
function sayColor() {
console.log(this.color) // blue
}
var objectSayColor = sayColor.bind(o)
objectSayColor()
</script>
</body>
</html>
02_Function类型_作为值得函数
最新推荐文章于 2024-08-14 09:04:24 发布