5.12 js基础（函数，作用域）

最新推荐文章于 2024-09-17 13:42:29 发布

新时代农民工官方认证码农--菜鸭子毛毛~

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量125

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_54093765/article/details/116723794

版权

Js核心语法 day03

回顾：

原始数据类型
数据类型的转化

目标：

函数
作用域

一、函数的概念

在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

JavaScript 函数会在某代码调用它时被执行。

// 声明函数
function name() {
    //函数体代码
  console.log('allen') //该函数会打印出ok
}

二、JavaScript 函数语法

2.1函数的声明的两种方式

1.自定义函数方式

2.函数表达式

首先我们来看一下自定义函数

2.2自定义函数方式(命名函数)

JavaScript 函数通过 function 关键词进行定义(必须小写)，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：
由函数执行的代码被放置在花括号中：{}

function name(参数1,参数2) {
    //要执行的代码
  console.log(参数1,参数2)
}

2.2.1函数调用：

// 调用函数
函数名();  // 通过调用函数名来执行函数体代码

调用的时候千万不要忘记添加小括号
口诀：函数不调用，自己不执行

注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

函数调用常见的几种形式：

当事件发生时（当用户点击按钮时）
当 JavaScript 代码调用时

2.2.3函数的参数

函数参数的语法:

形参:函数定时设置,接收调用时传入
实参:函数调用时传入效果好内的真实数据

在这里插入图片描述

参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。

函数参数的运用：

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
  // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);

调用的时候实参值是传递给形参的
形参简单理解为：不用声明的变量
实参和形参的多个参数之间用逗号（,）分隔

2.2.4函数形参和实参数量不匹配时

实参个数	说明
实参个数等于形参个数	输出正确结果
实参个数多于形参个数	只能取到形参的个数
实参个数小于形参个数	多的形参为undefined

注意：1.在JavaScript中，形参的默认值是undefined。

2.在函数中，参数是局部变量。

小结：

函数可以带参数也可以不带参数
声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
调用函数的时候，函数名括号里面的是实参
多个参数中间用逗号分隔
形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配

传参的使用案例:

<button onclick="add_del(false)">-</button>
<input id="val" type="text" value="1">
<button onclick="add_del(true)">+</button>

function add_del(bool) {
    var val = document.getElementById('val').value
    if (val <= 0) { //进阶版如果没有了,则返回
        return alert('没有了')
    } else {
        if (bool) {
            val++
        } else {
            val--
        }
        document.getElementById('val').value = val
    }
}

2.2.5函数返回：

函数通常会计算出***返回值***。这个返回值会返回给调用者：

返回值：函数调用整体代表的数据；函数执行完成后可以通过return语句将指定数据返回。

function add(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}
var x = add(7, 8);        // 调用函数，返回值被赋值给 x

当 JavaScript 到达 return 语句，函数将停止执行。
如果函数没有 return ，返回的值是 undefined
add引用的是函数对象，而 add() 引用的是函数结果。

2.2.6自调用函数

//函数的自调用
//一次性函数
(function () { console.log('我是方法一') })();
(function () { console.log('我是方法二') }());
!function () { console.log('我是用!号') }();
void function () { console.log('我是用void') }()

注意:使用分号隔开

2.3函数表达式方式(匿名函数）

函数的使用方法与变量一致，在所有类型的公式、赋值和计算中。

使用变量来存储函数的值：

var x = add(7,8);
var text = "The temperature is " + x + " Celsius";

您能够把函数当做变量值直接使用：

var text = "The temperature is " + add(7,8) + " Celsius";

因为函数没有名字，所以也被称为匿名函数
函数表达式方式原理跟声明变量方式是一致的
函数调用的代码必须写到函数体后面

三、作用域

概念：1个变量的可用的范围

全局作用域：直接放在全局的作用域中的变量，只希望所有的作用域能够公用的变量就声明在全局作用域中。
```
var carName = " 大众"; // 此处可调用 carName 变量function myFunction() {    // 函数内可调用 carName 变量}
```
局部作用域：声明在函数内部的变量或者方法的参数变量

function myFunction() {    var carName = "大众";    // 函数内可调用 carName 变量}// 此处不能调用 carName 变量

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

 function myFunction() {    carName = "大众";    // 此处可调用 carName 变量}myFunction()// 此处可调用 carName 变量

四、变量提升

js中的变量和函数在编译过程中是会优先被提升至当前作用域的顶部。

console.log(a) // undefinedvar a = 2

相当于：

var aconsole.log(a) // undefineda = 2

var a声明向上提升，a=1赋值留在原处

变量提升不能跨script

<script>console.log(a)</script><script>var a = 1;</script>// 控制台报错

不用var直接赋值

console.log(a);  //ReferenceError: a is not defineda = 1;

只有声明本身会被提升，而赋值操作不会被提升。

在 if 中

console.log(a) // undifinedif(false){  var a = 1;}

函数提升

函数会优先于变量先提升

console.log(foo) var foo = 5function foo() {  console.log('3')}

遇到同名的函数声明，则覆盖之前的函数声明

foo() // 4function foo() {  console.log('3')}function foo() {  console.log('4')}

函数声明会被提升，但函数表达式不会被提升。

foo() // Uncaught TypeError: foo is not a function, 此时的foo为undefinedvar foo = function() {  console.log('1')}