问题导向
函数的基本使用?
如果你都有了答案,可以忽略本文章,或去JS学习地图寻找更多答案
function函数
在JS中,函数是一种特殊的数据类型,它让JS动了起来,有了能力,它可以是一个方法,或者是一个功能,提供某种能力
它常用来 封装 一些方法,供应用重复调用
函数特点
- 具有特定功能/作用的
- 能够重复调用的
- 闭合状态的代码块
- 能够兼容代码变化的
参数
形参:函数声明时填的参数
实参:函数调用时填的参数
例子:使用function关键字声明一个函数
function sayHi(name, age){
//声明()里的是形参
console.log(`你好,我是${
name},我今年${
age}岁了`)
}
sayHi('小李', 18) //调用()里的是实参
输出:你好,我是小李,我今年18岁了
封装
两个概念:公共与私有
抽离公共逻辑,传递私有参数
怎么封装:取决于想怎么调用
如上面的例子:两个人都有打招呼的方法,打招呼的语句是共有的,名字和年龄是私有的
function sayHi(name,age){
console.log(`你好,我是${
name},我今年${
age}岁了`)
}
sayHi('小李', 18) 你好,我是小李,我今年18岁了
sayHi('小陈', 19) 你好,我是小陈,我今年19岁了
只要调用函数,输入需要的参数即可,可根据实际业务封装想要的方法
函数深入
函数的几种写法
函数声明
function fn(x, y){
console.log(x + y)
}
fn(5,3) //8
函数表达式(表达式就是 什么 = 什么)
let fn = function(x, y){
console.log(x + y)
}
fn(4,3) //7
箭头函数:ES6写法
const fn = () => {
console.log('hello js') }
fn()
匿名函数
window.onload = function(){
console.log('匿名函数')
}
立即执行函数,自调用
(function(x, y){
console.log(x + y)
})(6,7)
函数提升hoisting
预解析:代码执行时,JS会预先解析代码,再一行一行执行(过两遍)
函数提升:先调用,再声明,函数声明可以提升,函数表达式不可以提升
正常执行:代码是1行1行往下执行的,执行在前,声明在后,任可正常执行,说明函数的声明被提前解析了
fn()
function fn(){
console.log('函数提升')
}
报错
fn()
const fn = function(){
console.log('hello')
}
函数的书写结构
有参数,有返回值
注意:没传实参是undefined,少写实参是NaN
因为undefined + 数字 = NaN(not a number)
function fn(a, b){
return a + b
}
const result = fn(2,5) //将结果返回,赋值给result
console.log(result) //7
有参数,无返回值
function fn(a, b){
console.log(a + b)
}
fn(3, 4) //7
无参数,有返回值
注意:实参无效,能得到结果
function fn(){
console.log(1 + 2)
}
fn(3,4) //3
return返回值
将值或函数返回给函数,单独成行,后面的代码不再执行
直接返回,fn存了a + b的结果,调用fn就可以得到它
function fn(a,b){
return a + b
console.log('这句不再执行')
}
console.log(fn(2,5)) //7
返回变量
function fn(a, b) {
let num = a + b
return num
}
console.log(fn(2, 5))
返回函数
function fn(a, b){
return function(){
return a + b
}
}
let result = fn(2,3) //fn现在存的是一个return的匿名函数,需要再次调用result才能得到结果
console.log(result()) //5
一等公民
函数不仅可以声明与调用,还可以像简单值一样,赋值,传参,返回
1.函数可以像普通值一样,作为属性的值
var obj = {
'eat': function () {
console.log('吃东西')
}
};
obj.eat() //吃东西
2.函数可以像普通值一样,赋值给变量