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

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函数调用：

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

• 调用的时候千万不要忘记添加小括号

• 口诀：函数不调用，自己不执行

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

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

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

2.2.3函数的参数

函数参数的语法:

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

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

函数参数的运用：

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

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

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

注意：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').valueif (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')}

相当于：

var foofoo()foo = function() {  console.log('1')}

总结：

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

• 变量会提升到其所在函数的最上面，而不是整个程序的最上面。

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

作业：

1. 简易计算器（收集两个数字后，点击对应的按钮出现对应的和，差，积，基础效果见图）

注意用户体验！！！！