JavaScript 函数、函数构造、函数调用、参数、函数返回值、变量的作用域、预解析

合集 - web前端(29)

1.1-web前端 基础标签 、图片、超链接2023-09-192.2-web前端 音频、视频、表格、表单2023-09-193.3-web前端 css 网页样式语言，基础语言、盒子模型、浮动2023-09-194.5-web前端 定位position2023-09-195.6-web前端的特效 平面转换transfrom2023-09-196.7-web前端 空间转换，3D效果2023-09-197.8-web前端 动画 案例2023-09-198.9-web前端 flex弹性布局2023-09-199.10-JavaScript 点击事件 随机点名器2023-09-2010.11-JavaScript 逻辑条件 ，if判断 ，while循环，算数运算相关的案例演示2023-09-2311.12-web前端轮播图案例 （小米商城）2023-09-2712.css字体样式2023-10-0813.css样式对单行和多行文本的隐藏2023-10-1014.css伪类和伪元素2023-10-1215.web前端html+css页面内容的六种隐藏方式2023-10-1616.JavaScript的基础语法和数据类型2023-10-2617.JavaScript 数组Array存储方式及对象Object2023-10-2718.JavaScript数据类型的转换2023-10-3019.JavaScript运算符及优先级2023-10-3120.JavaScript条件判断if 语句2023-11-0121.JavaScript for循环控制语句2023-11-0222.JavaScript 其他循环语句和跳转语句2023-11-03

23.JavaScript 函数、函数构造、函数调用、参数、函数返回值、变量的作用域、预解析2023-11-04

24.JavaScript函数变量的生命周期，自执行函数、闭包、反转数组案例及冒泡排序案例2023-11-0425.JavaScript Array对象（属性、方法） 留言板案例2023-11-0426.JavaScript string对象（属性，方法）获取图片后缀案例 输入和输出结果转换形式案例2023-11-0727.JavaScript Date对象 、日期求差案例 、 购物秒杀倒计时、日历2023-11-1328.JavaScript事件 2023-11-1829.JavaScript BOM对象2023-11-18

收起

一、函数及函数的构造

函数是一个可重用的代码块，用来完成某个特定功能。每当需要反复执行一段代码时，可以利用函数来避免重复书写相同代码。

函数包含着的代码只能在函数被调用时才会执行，就可以避免页面载入时执行该脚本

简单来说就是一个封装,封装的是一个特定的功能,重复使用

函数的三种定义方法：

Function构造函数定义函数

var 函数名 = new Function(“参数1”，”参数2”，”参数3”……”函数体”);

function语句定义函数

function 函数名 (参数1，参数2……[形参]){
  <语句块>
  return 返回值
}

在表达式中直接定义函数

var 函数名 = function (参数1，参数2，…){函数体};

注意：

函数名的书写规范，不能一数字特殊符号和关键字命名，一般命名方式小驼峰

二、调用函数

1.直接调用

  // //直接调用，window.窗口调用
        // window.show() //show()

2.事件处理中调用

//事件中调用
        //<div onclick="show()">hello</div>

3.将函数的返回值赋给变量

 //将函数的返回值赋给变量
        var t = show()

三、参数

形參：定义函数时，函数名后面()中的参数；JavaScript中的函数允许给行参赋初始值

实参：调用函数时，传递的参数

参数的匹配： 默认情况下，形參和实参是一一对应的 但是当传递的参数个数与函数定义好的参数个数可以不匹配当不匹配时

• 如果传递的参数个数小于函数定义的参数个数，JavaScript会自动将多余的参数值设为undefined；

• 如果传递的参数个数大于函数定义的参数个数，那么多余传递的参数将会被忽略掉。

如果传递的参数是一个数组的话，一一对应太过麻烦，我们就用arguments，获取所有实参

 function show (a,b){
            console.log(arguments.length);
        }
 show('guo','yuan')

function Test(a,b){
    alert(typeof(arguments)); // 获得类型
    alert(arguments[1]);      // 获取下标为1的参数值
    alert(arguments.length);  // 获取参数的长度
    alert(arguments.callee);  // 获取函数的所有内容
}
Test("zhang","li");

四、函数的返回值

return特点:
	1)函数内部的值(局部变量),想要在函数外部进行(全局变量)使用,就可以使用return
	2)如果没有return,那么return的返回值默认值undefined
	3)return可以返回值,但是只能返回一个;如果想要返回多个,可以使用数组进行返回
	4)在函数中,只要看到return,就表示函数的结束,后面的代码都不会执行

五、变量作用域

全局变量： 在函数外声明的的变量为全局，在整个JS文档中生效

局部变量： 在函数内用var声明的变量为局部变量，只能在函数内部使用。

局部变量变成全局:
	return 返回
	去除 var 关键词

什么是作用域链

• 只要在js中创建变量，就会存在作用域【全局作用域】

• 写在函数内部的被称为局部作用域

• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个新的作用域

• 在函数中如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这样一个查找过程形成的链条就叫做作用域链。

六、预解析

预解析，又称之为变量提升，在js代码真正执行之前，进行提前加载，把所有带有var和function的关键字进行预

//预解析:
            var function 
            console.log(fn) // 函数体
            var fn = 10;
            function fn(){
            }
            console.log(fn) // 变量

同时出现变量和函数的提升，在他们两个之前输出的话解析的是函数体，预解析的优先级大于变量的

如果在他们两个之后输出的话解析的是变量，因为根据优先栈内存找到数据的执行代码顺序先找到的var变量

预解析相关案例练习：

// 案例1
var num = 10;
fun();
function fun(){
  console.log(num);
  var num = 20;
}
// 案例二
var num = 10;
function fun() {
    console.log(num);
    var num = 20;
    console.log(num);
}
fun();

// 案例三
var a = 18;
f1();
function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = 13;
}

// 案例四
console.log(a,b,c);
var a = b = c = 5;

// 案例四
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
// 案例五
fn();//报错 只预解析“=”左边的，右边的是指针，不参与预解析
var fn=function(){
    console.log(11);
}
// 案例六
function fn(){
    console.log(a);
    a=100;
}
fn();
console.log(a);
//注意：js中，如果在不进行任何特殊处理的情况下，上面的代码报错，下面的代码不再执行

// 案例七
console.log(show);
function show(){
  console.log(123);
}
var show = 10;

// 案例八
function show(){
  console.log(123);
}
var show = 10;
console.log(show);