04-JS函数

于 2022-11-01 09:21:19 发布
阅读量215 收藏
点赞数
分类专栏： JavaScript基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41570386/article/details/127627434
版权

文章目录

一、函数类型的认识

  1. 函数的概念

    函数是具备某个功能的工具，是完成某个功能的一段代码

  2. 函数的定义及调用

    // 第一种定义方法：声明式/直接创建式
// 定义
function 函数名(){
    代码段
}
//调用
函数名()

// 第二种定义方法：赋值式/匿名函数
// 定义
var 变量名 = function(){
    代码段
}
// 调用
变量名()

// 案例：定义函数求两个数字的和
function fn(){
    var a = 1,b = 2,c = a+b;
    console.log(c);
}
fn();

    函数的注意点：

    1. 注意单词、格式、语法、符号
    2. 注意执行函数的位置，不同的创建方式可执行的位置不同
    3. 注意行为调用函数时的格式
    4. 注意不要概念复杂化

    函数的优点：

    1. 实现了代码的可重用性
    2. 实现了模块化编程

    函数的调用执行拓展：通过事件来调用匿名函数（绑定事件）

    <body>
    <button onclick="fn()">点击调用函数</button>
</body>
<script>
    function fn(){
        var a = Number(prompt("输入第一个数"))
        var b = Number(prompt("输入第二个数"))
        alert(a+b)
    }
</script>

二、函数的参数应用

function fn(a){//形参：形式上的参数
    console.log(a)
}
fn(10)//实参：实际上的参数

//需要根据参数不同显示不同的乘法表
function fn(num) {
    document.write('<table>')
    for (var i = 1; i <= num; i++) {
        document.write('<tr>')
        for (var j = 1; j <= i; j++) {
            document.write('<td>' + j + 'x' + i + "=" + i * j + '</td>')
        }
        document.write('</tr>')
    }
    document.write('</table>')
}
var num=Number(prompt("输入一个数字"))
fn(num)

参数的概念

  1. 形参：形式参数，作用是接收参数
  2. 实参：真实参数，作用是传递参数

参数使用注意点

  1. 函数的参数有多个的时候，需要用逗号隔开
  2. 在形参中书写变量，表示在函数体内声明了变量，此时还没有赋值，数据类型为undefined
  3. 当传入实参的时候，表示给形参的变量赋值

参数数量的问题

  1. 原则上，函数的形参和实参的个数和数据类型都要一一对应的
  2. 如果实参的数量比形参数量少，从左到右依次选择，没有参数的形参默认是undefined
  3. 如果实参的数量比形参数量多，从左到右依次选择，多的形参对函数体内的结果不产生任意的影响，但此时函数会默认提供一个内置对象

函数内置对象的拓展【类数组/伪数组】

  1. arguments.length 获取传入参数的个数
  2. arguments[索引] 通过索引获取对应的参数

三、函数的返回值

函数运行结束之后得到的结果

// 案例1：定义一个让指定数字递增的函数
function increase(x){
    var y = x+1;
    return y//return 程序结束后，后面的代码就不会执行了
}

// 1. 让2递增，得到的结果赋值给变量a
var a = increase(2);
document.write(a%2);//1

// 2. 让5递增，得到的结果赋值给变量b
var b = increase(5);
alert(b/2);//3

// 3. 让10递增，得到的结果赋值给c
var c = increase(10);
console.log(c+a-b);//11+3-6 = 8

// 案例2：定义三个变量，先求和再求平均数
var a = Number(prompt("输入第一个数"))
var b = Number(prompt("输入第二个数"))
var c = Number(prompt("输入第三个数"))

function sum(a,b,c){
    return (a+b+c)
}
function avg(a,b,c){
    return (a+b+c)/3
}

document.write('和是'+sum(a,b,c)+'<br>')
document.write('平均是'+avg(a,b,c))

函数的嵌套【拓展】

  1. 由于函数的调用可以写在页面的任意地方，在另外一个函数里面调用执行一个函数也可行

  2. 用函数嵌套的方式实现上面的案例2

    function sum(a,b,c){
    return (a+b+c)
}
function avg(a,b,c){
    document.write('和是'+sum(a,b,c)+'<br>')
    return (a+b+c)/3
}
document.write('平均是'+avg(a,b,c))

四、函数的预解析

  1. 浏览器中有一段程序专门用来解析JS代码，叫做JS解析器。js解析器在执行js代码的时候，分两步进行：

    1. 预解析js代码：预解析的过程，就是查找代码中的var和function这两个关键字，找到以后，将变量和函数存在了一个地方，并给他们赋一个初始值，变量的初始值为undefined，函数的初始值为代码段
    2. 开始按顺序一行一行解读代码：解读代码的时候，仓库中的变量和函数的值会随着代码的解读而发生变化，也就是变量的赋值和函数的调用

  2. 预解析分为变量的预解析和函数的预解析，也就是代码在执行之前先进行解析，这步是不可见的

  3. 总结：预解析就是将变量和函数的声明放在当前作用域的最前面，也可以叫做变量提升

    变量赋值和函数的调用保留在原来的位置不动，其他代码正常运行

// 案例1：变量提升
console.log(a)
var a = 10
//undefined  提升的是定义，不是赋值

// 案例2：声明式函数提升
fn()
function fn(){
    console.log('Hello')
}
//正常输出

// 案例3：赋值式函数提升
fn()
var fn = function(){
    console.log('Hello')
}
//报错 提升的是var fn，没有赋值。调用fn()的时候报错，不会再往下运行

变量提升总结：

  1. 用var关键字声明的变量，将变量的声明提升到当前作用域的最前面，赋值不提升
  2. 自定义的函数整体提升到当前作用域的最前面
  3. 函数同名，后面的会覆盖前面的
  4. 变量和函数同名，函数优先提升
// 第一题
console.log(fn)
fn()
var fn = function(){
	console.log(123)
}
// undefined，报错
// 赋值函数，提升的是var fn，此时fn是undefined

// 第二题
fun()
var fn = function(){
    console.log('我是fn')
}
function fun(){
    console.log('我是fun')
}
fn()
fn = 100
fn()
// 我是fun，我是fn，报错（fn赋值了100，不是函数了）

五、函数的作用域

  1. 全局作用域：不在任何函数中
  2. 局部作用域：在函数的内部中
1. 局部作用域
function fn(){
    var a = 1//局部变量
    console.log(a) //1
}
fn()
console.log(a)//在函数体的外面，并没有声明定义a变量，所以得到的结果就是报错

局部作用域总结：

  1. 在函数内部定义的变量叫做局部变量，只能在函数内部使用
  2. 全局变量不可以访问局部变量
2. 全局作用域
var b = 1 //全局变量
function fn(){
    var b = 2 //局部变量
}
fn()
console.log(b)

全局作用域总结：

  1. 在函数外面定义的变量叫做全局变量
  2. 当函数内部声明变量没有使用var的时候，情况比较特殊

  1. 特殊情况

    //特殊情况：函数内部声明的变量也是全局变量
var c=1
function fn(){
    c=2//当函数内部声明没有使用关键字的时候是会往上级查找的，可以理解为是全局变量
    //这种声明方式是“隐式声明”
}
console.log(c)

六、函数访问赋值规则

1. 访问规则
function f1(){
    var a = 2
    function f2(){
        console.log(a)//2
    }
    f2()
}
f1()

访问规则的总结

  1. 如果当前作用域有定义的时候就会直接使用当前作用域的变量
  2. 如果当前作用域没有定义就会往上级查找，上级没有就继续往上，直到找到全局
  3. 如果全局有就输出，没有就报错
2. 赋值规则
//案例1
function f1(){
    function f2(){
        a = 1
        //1. 加了var关键字代表局部变量
        //2，不加var关键字 隐式声明，全局作用域
    }
    f2()
}
f1()
console.log(a)

//案例2
function f1(){
    var a = 1
    function f2(){
        a = 2
        console.log(a)
    }
    f2()
    console.log(a)
}
f1()
console.log(a)
// 2 2 报错

赋值规则总结

  1. 往上级查找，上级存在可以重新赋值，上级没有就一直往全局查找
  2. 如果全局有就使用全局中的变量
  3. 如果全局没有定义变量，查找到全局的时候，会自己在全局定义一个变量
// 练习1
var num = 10;
fn1();
function fn1(){
    console.log(num);
    var num = 20;
}
//undefined

// 练习2
fn2();
var a = 18;
function fn2(){
    var b = 9;
    console.log(a);
    console.log(b);
}
// 练习2 预解析过程
var a
function fn2(){
    var b 
    b=9
    console.log(a)
    console.log(b)
}
fn2()
a=18
//undefined 9
// 如果a的赋值在函数调用之前，就会是18

// 练习3
fn3();
console.log(c);
console.log(b);
console.log(a);
function fn3(){
    var a=b=c=9;
    console.log(a);
    console.log(b);
    console.log(c);
}
// var a=b=c=9; 理解为 var a=9;b=9;c=9 所以a是局部作用域
//9 9 9 9 9 报错

// 练习4
var a = 4;
console.log(a);
a = 6
console.log(a);

function a(){
    console.log('哈');
}
a();
a = 10;
console.log(a);
// 练习4 预解析 
var a
function a(){
    console.log('哈')
}
a=4
console.log(a);
a=6
console.log(a);
a();//此时a是6 以函数的方式调用，会报错
a=10;
console.log(a)
// 4 6 报错

七、递归函数

  1. 在函数中调用自己
  2. 类似于循环
  3. 使用递归函数要注意返回，否则会造成死递归
  4. 递归比较消耗性能，尽量少用
//递归的语法
function fn(){
    fn()
}
fn()

//常见的递归
function fn(a){
    if(a==1){
        return 1
    }
    return fn(a-1)
}
var res = fn(10)
console.log(res)

//案例1:使用递归求1-5的和
function fn(a){
    if(a==1){
        return 1
    }
    return (a+fn(a-1))
}
var res = fn(5)
console.log(res)

// 案例2:斐波那契数列
function fn(a){
    if(a==1||a==2){
        return 1;
    }
    return fn(a-1) + fn(a-2)
}
var res=fn(10)
console.log(res)

八、事件的了解

事件触发函数

<body>
    <button id="btn1">
        声明式函数触发
    </button>
    <button id="btn2">
        赋值式函数触发
    </button>
</body>
<script>
    //声明式函数触发
    function fn(){
        alert("我是声明式函数")
    }
    btn1.onclick=fn
    //赋值式函数触发
    btn2.onclick=fn(){
        alert("我是赋值式函数")
    }
</script>


<body>
    <input type="text" placeholder="请输入一个数">
    <button>
        计算
    </button>
    
</body>
<script>
// 案例：触发事件求阶乘
// 1. 计算阶乘;2. 给标签绑定id，事件方式触发函数；3. 获取用户输入的值 DOM.value
    function fn(num){
        if(num == 1){
            return 1
        }
        return num * fn(num-1)
    }
	fn(5)
</script>

九、对象数据类型

对象的概念：用来储存数据，可以理解为容器

1. 对象的表现形式
var obj = {} //对象
var arr = [] //数组
var none = null //空
2. 对象的创建方式
//第一种：声明式/直接创建式
var obj = {}

//第二种：构造函数方式/new方式
var obj = new Object()
3. 对象存储数据的格式
//第一种：声明式/直接创建式
var obj = {
    键1:值1,
    键2:值2,
    ...
}

//第二种：构造函数方式
var obj = new Object({
    键1:值1,
    键2:值2,
    ...
})

对象存储数据的语法规则：键值对

  1. 键(key)：也叫做对象的属性，必须是字符串，但是这个字符串在不包含连字符的时候可以不加引号，建议加上。如果键有多个单词有连接符的时候，要注意加上“”，或者使用驼峰命名
  2. 值(value)：可以是任意类型，包括：数字、字符串、布尔、对象、函数
  3. 键值对之间使用逗号隔开
  4. 键值对之间没有顺序，是一个无序的数据集合
4. 对象的访问
var person = {
    "name":"小明",
    "age":10,
    "background-color":"green"
}
console.log(person.name,person.age)
console.log(person['name'],person['age'],person['background-color'])
console.log(preson['aa'])

对象访问的注意点

  1. 两种方式都可以访问对象中的数据，通过键获取得到的就是键值对的值
  2. 对象.键 这种的获取方式，如果键有连接符号的时候会报错，获取不到
  3. 如果键有连接符号的时候，需要使用 对象[“键”] 这种方法获取
  4. 对象中没有这个键的时候，返回的是undefined
5. 对象的遍历
for(var attr in obj){
    //输出需要的数据
    console.log(attr)
    console.log(attr[i])
}
//attr表示对象属性名，obj表示这个对象

对象遍历的注意点

  1. 遍历出来的数据是一个变量 对象.键 这种方式获取不到
  2. 遍历出来的数据是一个变量 对象[键] 这种方式是可以获取得到的，并且引号不用添加
  3. 如果使用for in这种方式遍历对象的话，建议使用 对象[键] 这种方式进行获取数据
6. 对象的方法
  1. 对象中的值可以是任意的数据类型
  2. 值可以是一个对象，还可以是一个函数(function=>方法)
//1.定义一个对象
var person = {
    name:'小明',
    age:26,
    sex:'男',
    // 2. 在对象中再嵌套一个对象
    brother:{
        name:'大明',
        age:30,
    }
    // 3. 对象中的值还可以是一个函数，可以理解为对象中的方法
    eat:function(){
        console.log("吃饭")
    }
    
}

console.log(person.brother.name)
//1. 之前调用函数的方法是：函数名称()
//2. 在对象中调用函数方法：键值对中的键()
person.eat()
7. 对象的操作
  1. 增加 对象.键的名字 = 值
  2. 修改 对象.键的名字 = 值
  3. 删除 delete 对象.键的名字
  4. 查询 对象.键的名字 || 对象[‘键的名字’]
var obj = {
    name = '小明',
    age = 18,
    gender = '女'
}
obj.money = 0 //增加
obj.money = 2000 //修改
delete obj.money //删除
obj = {} //置空
for(var i in obj){ //置空
    delete obj[i]
}
console.log(obj)
8. 构造函数【拓展】

只要使用了new方式创建的方法都是构造函数。任意的数据类型都可以用构造函数去创建

//1.使用构造函数创建对象
var obj = new Object()
console.log(obj)

//2.利用构造函数方式创建函数
function Fn(){}
var a = new Fn()
console.log(a)

//3.利用构造函数创建数据类型
var num = new Number()
console.log(num)

//指向window 默认情况下，this指向全局
console.log(this)

总结：关于构造函数和普通函数的区别

  1. 有没有new关键字
  2. 关于this指向的问题
  3. 首字母是否大写是区别构造函数和普通函数的最直观的表现
echozzi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
04-箭头函数.rar
11-06
总的来说，"04-箭头函数.rar"的内容应该涵盖了JavaScript中的箭头函数基础知识，以及在Vue.js项目中如何有效利用这些函数，对于想要提升前端开发技能的个人来说，这是一份宝贵的学习资源。通过深入理解箭头函数，你...
js代码-JavaScript 函数式编程
07-16
JavaScript函数是其核心组件，但函数式编程强调函数的"纯"性，即对于同一输入，始终返回相同的结果，且不依赖于任何外部状态或副作用。这意味着在函数式编程中，避免修改数据和全局变量，而是通过创建不可变的数据...
js 函数的概念，定义，调用，声明与赋值，预解析，参数，默认值，返回值
最新发布
m0_72807013的博客
10-20 824
js 函数的概念，定义，调用，声明与赋值，预解析，参数，默认值，返回值
JavaScript函数赋值变量
csc_cary的博客
02-06 3583
函数赋值变量 以函数形式返回 function print(val) { console.log(`姓名是：${val}`); } var fn = print;//将函数赋值给fn fn('angus');//姓名是：angus 以返回值形式 将函数返回的值赋值给fn，如果函数没有返回值，但又接受了，此时会返回undefined。 有返回值： function print(val) { return `姓名是：${val}`; } var fn = print('angus'); con
js 的函数赋值
qq_45896193的博客
04-04 1336
JS中的函数是非惰性求值，也就是说f（a=100）是将a=100完成计算赋值后的结果即100传入到了f函数中，传入的是值而不是逻辑，相当于f（100），同时变量a也处于函数外也即全局环境了 相当于 var a=100; f(a) ...
js函数声明与赋值详解
最自由的笑的博客
08-13 5671
直接声明函数 a(); function a(){ alert('...'); }//函数的声明会优先读取，无论函数的执行语句放在声明前面还是后面都会正常执行 表达式方法定义函数 var a = function(){ alert('...'); } a(); //函数的定义不会优先加载，函数的执行语句必须放在定义的后面，否则会报错。 以上两种方法结合起来(会统一按照第二种方法处理)
js代码-js-函数
07-16
本文将深入探讨JS中的函数，这一关键概念对于理解JavaScript的工作原理至关重要。 首先，我们要知道在JavaScript中，函数是一种可重复使用的代码块，可以接收参数并返回值。函数可以定义为变量，存储在内存中，也...
[js] 函数中变量的赋值原则 就近原则
qq_14993591的博客
09-01 419
函数中变量的赋值原则: 就近原则 自己有赋值自己变量 自己没有赋值父级程序变量 父级程序没有赋值全局变量 都没有 赋值语句升级称为 声明语句 声明一个全局作用域变量 并且赋值定义的数据 这个声明的全局作用域变量 在函数外部可以调用 绝对不会给 后代程序中的变量赋值 function fun1(){ function fun2(a,b){ var int = 300; // 后代程序 其
JS函数的赋值与执行
茉栀的博客
07-13 1361
首先:函数的声明 //一种方式 fuction one(){} //或者 var one=function(){} //这两种方式的函数名称都为one //如要将此函数绑定在某个事件上,则为 $('selector').click(one); //而不是 $('selector').click(one()); var result=one(); //表示的是:result
js将函数赋值给变量
热门推荐
u010746364的博客
11-30 2万+
function test() { var a = 10; var b = 20; } $(document).ready(function(){ $("p").click(function(){ var s = test; alert(s); }); }); test test 这里将函数test赋值给变量s，alert打印的时候，将
js函数的赋值和调用
u010523770的专栏
06-08 2889
今天遇到一个很奇特的问题，我谢了一个测试js先声明的方法，能否调用后声明的方法，结果发现了这个问题： demo.html代码如下： this i my js test! mybutton demo.js代码如下： print=function(){ alert("i print out content"); realPrint(); }; realPrint=func
js各种赋值
phhz的博客
12-02 5834
数组赋值 1.this.object= Object.assign({}, record) 2. // 这方法会改变 object // https://www.lodashjs.com/docs/lodash.assign _.assign(object, [sources]) 3._.set(this.table, 'loadData', data) this.$set( this.table,'loadData1',val) // 一般用于对象赋值，可以给到对象get和s
JS中简单赋值取值
qqjudith的专栏
11-30 2万+
对于JS中赋值问题，一般采用如下形式： var test = "value" ; 当test赋值为数字时，也可以赋值为 ：var test = 1； 但是不能赋值为： var  test =01；这样赋值会默认0不存在，而使test的值为1；需要设置数字且第一位是0时，必须采用双引号来赋值。 当需要判断test中的值得大小时，采用test.length()来判断。 JS中获取页
一个js函数中的变量赋值问题
qq_35146993的博客
09-02 1200
今早在群里看到一个问题,觉得很有趣,给记录下来 下面这段js代码 var a='test1'; function test(){ console.log(a); var a='test2'; console.log(a); } test(); 输出结果: undefined; test2; 造成上述结果的原因是,var声明的变量会将var声明提前到函数的
JS——声明式函数与赋值式函数
Jack 架构师之路
06-28 7292
引言    “程序是不会骗人的”我们项目中的一个哥们经常这样说，为什么他会有这样的感叹呢？就是有时候我么程序 员会出现的这样的问题，当我们让别人来调试错误的时候，别人什么都没有说，在我们给人家复现错误的时候发现， 错误竟然没有了，留下自己在风中凌乱。此处中枪的童鞋们请顶起来。。。。。。下面说说小编给别人调BUG时候遇 到的问题如下：    请听题：
JavaScript函数赋值给变量
My_YanZi_Brute的博客
02-26 893
function init(){ alert(“you are rule”); } window.onload=init;//把函数的赋值给onload处理程序。把函数用作一个值　window.onload=function(){ alert(“you are rule”); }//创建一个没有显式的函数名。把他的值直接赋值给window.onload属性
js、Extjs中函数的赋值和调用
masterShaw的博客
05-06 3419
在这里面，当不点击id='win'的元素时，也会调用scrollFun()这个函数。其实scrollFun()函数在页面加载时就已经执行了。当点击时id='win'的元素时，反而报错了。 为什么？ 原因是：Ext.get('win').on('click',function（）{});因为这句代码是重写Extjs中的click事件，我们把新的函数赋值给click事件。红色标记的地方是正确的，因

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

echozzi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值