🟡JavaScript函数

本文最后更新于:2024年4月25日 上午

函数定义

🥝函数声明

使用函数声明会发生函数声明提升在声明前使用函数也不会报错

1
2
3
function sum (a, b) {
return a + b
}

🥝函数表达式

1
2
3
const sum = function (a, b) {
return a + b
}

🥝箭头函数

箭头函数不可使用(arguments,super,new.target)

箭头函数不会改变this,this为定义箭头函数时的this

1
2
3
4
5
6
7
8
9
10
11
12
const sum = (a, b) => {
return a + b
}

// 不使用花括号的单行之间return
const sum = (a, b) => a+b

// 单参数可不用括号
const doubleValue = a => 2 * a

// 无参数需使用括号
const sayHi = () => alert('Hellow World!')

函数参数

🍌arguments

使用function定义的函数可使用类数组对象arguments来访问函数接收参数

函数可接受任意个参数

1
2
3
4
5
6
7
8
9
const sum = function (a = 1, b = 1) {
let res = 0
for(let i = 0;i < arguments.length;i++)
res += arguments[i]
return res
}

console.log(sum(1, 2, 3, 4))
// 10

结果

arguments.callee([args])方法调用自身

🍌默认参数

使用ES6语法可为函数方便的提供默认值

默认值不可使用函数块内的变量

默认值按顺序定义,前面的参数不可使用后面的默认参数

arguments不接收默认值

1
2
3
4
5
6
const sum = function (a = 1, b = Math.random()) {
return `sum: ${a + b}, arguments: ${arguments.length}`
}

console.log(sum())
// sum: 1.7805692838745435, arguments: 0

结果

函数内部参数

🥑new.target

🥑this

函数属性与方法

🍉name属性

函数名指向函数的首地址

🍉length属性

该属性表示函数定义参数个数

1
2
3
4
const sum = (a, b) => a + b

console.log(sum.lengh)
// 2

结果

🍉prototype.apply()方法

可以改变调用函数的this指向,参数只可传一个arguments对象或数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.name = 'Yun'
window.age = 20

const A = {
name: 'Lin',
age: 19,
}

const msg = function(a, b) {
alert(`name: ${this.name}, age: ${this.age}, args: ${a}, ${b}`)
}

msg(1, 2)
// name: Yun, age: 20, args: 1, 2
msg.call(A, [1, 2])
// name: Lin, age: 19, args: 1, 2

结果

🍉prototype.call()方法

可以改变调用函数的this指向,参数只可一个一个指明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.name = 'Yun'
window.age = 20

const A = {
name: 'Lin',
age: 19,
}

const msg = function(a, b) {
alert(`name: ${this.name}, age: ${this.age}, args: ${a}, ${b}`)
}

msg(1, 2)
// name: Yun, age: 20, args: 1, 2
msg.apply(A, 1, 2)
// name: Lin, age: 19, args: 1, 2

结果

🍉prototype.bind()方法

bind

1
2
3
4
5
const nums1 = [1, 2, 3, 4]
const nums2 = [-1, -2, -3, -4]

Math.max(...nums1)
Math.max(.bind()

闭包

尾调用优化

🍒条件

  • 在严格模式下
  • 调用函数的返回值即为外层函数返回值
  • 调用函数未使用外层函数闭包变量

高阶函数

柯里化

参考文档:

《JavaScript高级程序设计 第四版》


🟡JavaScript函数
https://qingshaner.com/JavaScript函数/
作者
清山
发布于
2022年2月22日
许可协议