【学习笔记15】JavaScript的函数
2023-09-11 14:14:57 时间
一、函数
(一)什么是函数
- 🙄
前端
的函数, 与数学
的函数, 完全是两个概念
- 🙄 可以粗暴的理解为 一个
盒子
- 🙄 当一段需要
多次
使用的复杂代码段
, 我们可以把它放在(抽离)一个盒子中(就是函数)- 🙄在需要使用的地方去
调用即可
(二)如何拥有(使用)函数
函数分为
定义(创建)
和调用
- 😕
定义(创建)
: 必须要有, 没有的话, 无法调用- 😕
调用
: 也必须要有, 没有的话, 定义就没有意义了
1、定义函数
1 语法:
function () {}
- 😕 赋值式定义 :var fn = function () {}
- 😕 声明式定义 :function 函数名() {}
2 具体含义
- 🥰
function
—> 关键字- 🥰
函数名
(可以不写) —> 不写的函数, 我们称之为匿名函数, 如果有 叫具名函数(函数)- 🥰
()
—> 书写参数的位置(形参)- 🥰
{}
—> 代码, 函数调用要执行的代码
2、函数调用
- 😕 函数的定义分2种方式, 调用
只有1种
- 🙄 语法:
函数名()
var fn1 = function () {
// 这里边写上将来调用时要执行的代码
console.log('我是函数fn1, 我是赋值式定义的')
}
fn1()
function fn2() {
// 这里边写上将来调用时要执行的代码
console.log('我是函数fn2, 我是声明式定义的')
}
fn2()
(三)明式与赋值式的区别
- 😛赋值式定义, 不能再定义前调用函数, 声明式可以
1、赋值式函数
fn() //fn is not a function
var fn = function () {
console.log(1);
}
2、声明式函数
fn() //2
function fn() {
console.log(2);
}
二、变量提升
- 在浏览器读JS代码的时候,有一个
预解析
, 此时会有一个变量提升
(一)什么是变量提升
- 在预解析时, 将JS内部的变量, 全部提升到当前
作用域顶端
(当前代码的最上边)- 变量提升的时候,
值
不会到最顶端, 可以理解为, 把声明变量
提升到最顶端, 但是没赋值
(二)赋值式变量提升
fn()
var fn = function () {
console.log(1);
}
fn()
自己写的代码:
fn()
var fn = function () {
console.log(1)
}
fn()
浏览器预解析
fn() ---> 不需要变量提升
var fn = function () { ---> 需要变量提升
console.log(1)
}
fn() ---> 不需要变量提升
变量提升后
var fn; ---> fn == undefined
fn() ---> undefined()
fn = function () {console.log(1)}
fn() ---> 打印1
(三)声明式变量提升
fn()
function fn() {
console.log(1);
}
fn()
自己写的代码
fn()
function fn() {
console.log(1)
}
fn()
浏览器预解析
fn() ---> 不需要提升
function fn() { ---> 需要 函数声明提升
console.log(1)
}
fn() ---> 不需要提升
函数声明提升后
function fn() {
console.log(1)
}
fn() ---> 正常打印
fn() ---> 正常打印
三、函数的参数
(一)为什么要有参数
/**
* 为什么要有参数?
* 如果没有参数, 那么函数的功能相对单一, 不够灵活
* 函数的参数他的作用 ---> 能够让函数的功能更加灵活, 更方便在多个地方调用
* 参数也可以让我们的函数更具有差异性
*
* 参数语法
* 1. 形参 ---> function或者函数名后的小括号
* 2. 实参 ---> 函数调用时的小括号中
*
* 参数的作用
* 1. 形参
* 每书写一个形参, 就相当于在函数内部创建一个变量, 形参的值是由实参传递进来的
* 2. 实参
* 按照书写顺序 一一对应, 传递给形参
*/
1、不传参数
function fn() {
console.log(1); // 想想这是一段很复杂的功能
console.log(1); // 想想这是一段很复杂的功能
console.log(1); // 想想这是一段很复杂的功能
console.log(1); // 想想这是一段很复杂的功能
console.log(1); // 想想这是一段很复杂的功能
}
fn()
2、传参数
function fn(i) {
console.log(i) // 想想这是一段很复杂的功能
console.log(i) // 想想这是一段很复杂的功能
console.log(i) // 想想这是一段很复杂的功能
console.log(i) // 想想这是一段很复杂的功能
console.log(i) // 想想这是一段很复杂的功能
}
var num = fn(1) // 调用的时候打印1
console.log(num)
(二)函数参数的数量
参数数量不一致
😏 1. 形参少, 实参多
😥 2. 实参少, 形参多
1、形参少, 实参多
function fn(a) {
console.log(a) // 1
}
fn(1, 2, 3)
我们当前案例, 传递 1个形参, 3个实参
第一个实参, 传递给对应的形参
后续的所有参数, 都不能通过形参获取
2、实参少, 形参多
function fn(a, b, c) {
// 100 undefined undefined
console.log(a, b, c);
}
fn(100)
我们当前案例, 传递3个形参, 1个实参
第一个实参, 传递给对应的形参
后续没有实参
所以, 后续的形参相当于 之声明不赋值 ===> undefined
四、函数参数的默认值
- 🤔 创建
形参
的时候,直接赋值
- 🤗 如果
传递
对应实参,按照实参的值
- 😛 如果
没有传递
对应实参,按照默认值
function fn(a, b, c) {
// 100 undefined undefined
console.log(a, b, c)
}
fn(100)
function fn1(a, b = 100, c = 200) {
console.log(a, b, c)
}
fn1(50) // 50, 100, 200
fn1(50, 500) // 50, 500, 200
fn1(50, 500, 1000) // 50, 500, 1000
五、函数的返回值
😮 1. 每一个函数都有
返回值
, 不管是否写了返回值
😮 2. 每个函数默认都会有返回值 —> 默认返回undefined
😮 3. 如果我们自己手写了返回值, 那么就不会返回默认值了, 返回的是我们书写的
😮 4. 函数返回值书写语法:return 要返回的内容
😮 5. 注意点: 函数的返回值具有中断函数
的功能, 所以我们手写返回值需要放在最后
function fn1() {
// console.log(1)
}
// fn函数的返回值, 会赋值给变量myFn
var myFn = fn1()
// undefined
console.log(myFn)
function fn2() {
return '我是fn2的返回值'
}
var myFn1 = fn2()
console.log(myFn1) // 我是fn1的返回值
return中断效果
function fn(i) {
if (i == 0 ) {
return '参数i==0, 函数被中断执行'
}
console.log('参数不是0, 正常执行函数')
return '参数i不等0, 就是我想要的结果'
}
var num = fn(1)
console.log(num)
相关文章
- JavaScript经典代码【二】【javascript判断用户点了鼠标左键还是右键】
- [Javascript] Await a JavaScript Promise in an async Function with the await Operator
- [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)
- [Javascript] JavaScript赋值时的传值与传址
- [Javascript] JavaScript Array Methods in Depth - push
- [Javascript] Safely Access a Property on a JavaScript Array with Optional Chaining
- [Javascript] Linting JavaScript with ESLint
- Javascript 学习 笔记六
- Javascript 学习 笔记五
- Javascript 学习 笔记一
- JavaScript 异步执行的学习笔记 - 什么是事件循环 Event loop?
- Javascript 学习 笔记三
- Javascript 学习 笔记二
- Javascript 学习 笔记四
- JavaScript 异步执行的学习笔记 - 什么是事件循环 Event loop?
- DOM笔记(十):JavaScript正則表達式
- JS与ES6高级编程学习笔记(三)——JavaScript面向对象编程
- 《Javascript权威指南》十六学习笔记:BOM资源---BOM基本应用
- javascript学习笔记
- JavaScript入门学习笔记(四)
- JavaScript入门学习笔记(一)