函数的封装和使用

学前端的小白...

已于 2022-08-19 20:15:11 修改

阅读量2.6k

点赞数 3

文章标签： javascript 前端开发语言

于 2022-08-19 20:09:43 首次发布

本文链接：https://blog.csdn.net/qq_35784654/article/details/126427627

版权

一、函数的基本介绍

1.概念

将任意代码封装到一起、需要用的时候进行调用

2.定义的两种方式

// 声明式
function 函数名(参数1 , 参数2, ....){
    函数封装的语句块
}

// 赋值式 
var 变量名 = function(参数1 , 参数2, ....){
    函数封装的语句块
}

3.调用方式

function fun(){
    console.log('第一个函数')
}


fun()

二、函数参数

1.形参

在函数内部可以使用的变量，在函数外部不能使用
形参的值是在函数调用的时候由实参决定的

function fun(m){
    var n = 10
}

//m 、n 这两个只能在函数体内部使用的被称为形参

2.实参

在函数调用的时候给形参赋值的
也就是说，在调用的时候是给一个实际的内容的
多个参数的时候，是按照顺序一一对应的

var  x = 100
function fun(m){
   console.log(m)
}
fun(x)
//在调用函数时将x 的值赋给 m,  x被称为实参

三、返回值（return的两种用法）

1.终断函数

function fun(){
    console.log('1')
    console.log('2')
    console.log('3')
    console.log('4')
    return //结束函数
    console.log('5')
    console.log('6')
    console.log('7')
}    

//执行结果，当进行到return的时候，终止函数，只输出1 2 3 4

2.返回值

function fun(){
    var m = 100 
    var n = 200 
    var sum = 0
    sum = m + n
    
    return sum // 执行函数后，直接将sum的结果返回给调用函数
}

var num = fun() 
//num 的值为 300

四、函数的类型

1.无参无返回值

function(){
    console.log('无参无返回值')
}

2.有参无返回值

function(m){
    console.log('有参无返回值')
}

3.无参有返回值

function(){
    return false
}

4.有参有返回值

function(m){
    m += 2
    return m
}

五、优点

1. 封装代码，使代码更加简洁
2. 复用，在重复功能的时候直接调用就好
3. 代码执行时机，随时可以在我们想要执行的时候执行

七、预解析

1.解析过程

2.会发生预解析两种情况

1.var 定义的变量



console.log('预解析')


var num = 100


//预解析后

var num 


console.log('预解析')

num = 100

2.声明类函数


console.log('函数声明式')

fun()

function fun(){
    console.log('函数声明式')
}


//预解析后

function fun(){
    console.log('函数声明式')
}

console.log('函数声明式')


fun()

3.案例

/*
    1. 程序输出结果是多少?
*/
console.log(num)
var num = 10
f()
console.log(f2)
function f() {
    console.log(n)
	var n = 20
	console.log(n)
}
console.log(num)
var f2 = function () {
    console.log('我是f2')
}

1.undefined 
2.undefined
3.20
4.undefined
5.10

八、变量的作用域

1.定义

就是一个变量可以生效的范围

变量不是在所有地方都可以使用的，而这个变量的使用范围就是作用域

2.全局作用域

概念：

全局作用域是最大的作用域
在全局作用域中定义的变量可以在任何地方使用
页面打开的时候，浏览器会自动给我们生成一个全局作用域 window
这个作用域会一直存在，直到页面关闭就销毁了

var num = 100    //全局作用域
var age = 18     //全局作用域
function fun(){

    
}

3.局部作用域

概念：

局部作用域就是在全局作用域下面又开辟出来的一个相对小一些的作用域
在局部作用域中定义的变量只能在这个局部作用域内部使用
在 JS 中只有函数能生成一个局部作用域，别的都不行
每一个函数，都是一个局部作用域

var num = 100 //全局作用域

function fun(){
    var num1 = 200 //fun函数里面的作用域，可以在包含的子函数里面使用，不能拿到外面使用

    function fun1(){
        var num2 = 300 //fun1函数里面的作用域，只能在fun1函数里面使用，不能在fun里面使用
    }

}

4.作用域链

概念：

变量访问或赋值时，
先在自己的作用域查找，
如果没找到，再一层一层向上查找，至到最外层全局作用域。
这种层层查找关系，叫作用域链

九、递归调用

1.定义

函数调用语句写在函数体中，也就是在一个函数内部，调用自己，这种函数称为递归函数：

2.适用的问题类型

一个问题需要需要前面运算的输出作为下面运算输入，层层叠加，直到运算结束的问题

3.运行原理

4.案例

计算50年后的工资

function fun(year ,salary) { //salary 当年的薪资    year多少年后
    if (year == 1) {
        return salary
    }
    return fun(year - 1, salary)*(1 + 0.05)
}
var salary = fun(50 ,120000)
console.log(salary)

十、对象

1.结构

Object{
    name: '值 ',
    age: '值 ',
    sex: '值 '
}

2.定义方式

//方式一

var 对象名 = {
    属性: '属性值',
    属性：'属性值'
}
//定义一个对象的时候就将属性名和属性值一起添加了


//方式二

var obj = new Object()

obj.属性名 = 属性值

//先定义一个空对象，慢慢依次向内部添加属性和属性值

3、对象的几种方法

var obj = {
    num : ' 112643',
    name : 'lbw',
    sex : '男',
    grade : 5,
    score : 98 
}
obj.name = 'wq'  //属性值的修改
delete obj.name    //属性的删除
delete obj.score    
obj.height = 185    //属性的添加
console.log(obj)    //直接打印对象

//遍历对象
for(var key in obj){    
    console.log(key)
    console.log('name :' , key ,'value :' , obj[key]);//当属性为变量时，访问属性值(obj.[属性变量])
}

十一、数组

1.数组的索引

索引，也叫做下标，是指一个数据在数组里面排在第几个的位置

在所有的语言里面，索引都是从 0 开始的，js数组的索引也是从0开始 Array[0]表示数组的第一个值

2.定义方式

//字面量创建
var arr1 = [] //定义一个空数组
var arr2 = [1 ,2 ,3] //定义一个有内容的数组


//内置函数创建

//创建一个空数组
var arr1 = new Array()

//创建一个长度为 10 的数组 
var arr2 = new Array(10)

//创建一个内容的数组
var arr3 = new Array(1,2,3)

3.遍历数组

var score = [98,87,95,89,77]
var sum = 0
// var score = new Array(98,87,95,89,77)
console.log('所有学生成绩：')
for(var i = 0; i < score.length ; i++ ){
    console.log(score[i])
    sum += score[i]  //总成绩
}

//遍历整个数组

console.log(score)
//直接遍历

4.基本操作

var score = [98,87,95,89,77]

//数组的长度
var n = scroe.length

//赋值
score[1] = 10

5.小练习

//输出所有成绩
//计算总成绩
//输出大于平均成绩的
var score = [98,87,95,89,77]
var sum = 0
// var score = new Array(98,87,95,89,77)
console.log('所有学生成绩：')
for(var i = 0; i < score.length ; i++ ){
    console.log(score[i])
    sum += score[i]  //总成绩
}
console.log('总成绩', sum)
console.log('大于平均成绩的成绩')
var average = (sum / score.length).toFixed(2)
for(var j = 0; j < score.length ; j++){
    if(score[j] > average){
        console.log(score[j])
    }
}


//交换数组内的两个值
var sawp = [3 , 6]
//交换前
console.log('交换前')
console.log(sawp)
var num = sawp[0]
sawp[0] = sawp[1]
sawp[1] = num
//交换后
console.log('交换后')
console.log(sawp)