JavaScript（第四天）—爱创课堂专业前端培训

一、函数的声明和调用
1.1 函数的介绍
函数是具有重复的代码块，由事件驱动或者调用才会执行。封装函数的目的是为了减少重复代码的书写，提高程序的可复用性。

1.2 函数的声明
使用关键字function声明

声明方式一（常用）：

function 函数名(参数列表){

函数体;

}

声明方式二：

var fn = function(参数列表){

函数体

}

1.3 函数调用
函数声明之后不会自动执行，我们需要调用它：

事件驱动

在脚本的任何位置书写函数名()

Title 点我点

二、变量的作用域
2.1全局作用域：
函数外的区域，函数外声明的变量也叫做全局变量；

全局变量，可以在脚本的任何位置进行调用，它随页面加载生成，页面关闭后销毁。

2.2 局部作用域：
声明的函数会形成一个自己的作用域，那么在函数内声明的变量就叫做局部变量。

局部变量，函数被调用时创建，调用完毕后销毁。

2.3 变量与函数的提升：
变量的调用顺序：先在当前作用域查找是否有这个变量，如果有就调用，如果没有就去父作用域查找，

依次向上，直到找到为止。就近原则。。。

函数表达式：即变量的方式声明的函数，只能进行变量的提升，函数不会提升

//声明一个全局变量num并赋值10;
//全局变量在脚本的任何位置都可以被调用到
var num = 10;
//调用函数
//函数的提升：
fn();
//声明一个函数fn，形成一个局部作用域
function fn(){
// var num;
//变量的提升，预解析阶段会将变量的声明提升到当前作用于的最顶部
console.log(“num:”,num);//num:undefined
//局部变量函数调用时创建，调用完毕后销毁
var num = 200;
// num = 200;
console.log(“num:”,num);// num:200
}
//调用全局变量num
console.log(“num:”,num);//num = 10

2.4 未使用var声明的变量：
var num = 10;
fn();
function fn(){
console.log(“num:”,num);//num:10
//在函数内部没有使用var声明的变量，在js运行阶段，调用函数执行到这个变量的时候，这个变量会被当做全局变量使用
//注意：没有使用var声明的变量，不会进行变量的提升
//建议大家在使用时，尽量使用var关键字声明变量，避免全局变量的污染
num = 200;
console.log(“num:”,num);// num:200
}
//调用全局变量num
console.log(“num:”,num);//num = 200

三、函数的参数
形参：函数声明时，给的参数

实参：函数调用时，用来替换形参的参数

传参：函数调用时，将实参传入到形参位置的过程

//函数调用时，传入的参数，就叫做实参
fn(10)
fn(20.20)
fn(“Hello”)
fn(true)
fn(null)
//声明函数时括号的参数为形参，js中的形参不能确定参数的类型；只有当传入实参时，才能根据实际传入参数确定类型
function fn(num){
console.log(num);
}

//需求：求两个数的和
// var a = 10,
// b = 20,
// sum1 = a + b;
// console.log(sum1);
//
// var c = 100,
// d = 200,
// sum2 = a + b;
// console.log(sum2);

getSum(10,20);
getSum(100,200);
//封装函数，实现两个任意求和的功能
function getSum(num1,num2) {
var sum = num1 + num2;
document.write(num1+"+"+num2+"="+sum+"
");
}

四、函数的重载及arguments介绍
4.1 重载的概念：
在一个程序中，声明多个函数名相同，参数类型及参数的个数不同的函数，叫函数的重载；

但是，在js中，没有重载的概念，因为当声明多个相同的函数名时，后面的会覆盖前面的相同函数名。

我们可以通过某些方式来模拟函数的重载。

//求不同数量的数值的和
sum1(10,20);//Na
sum1(10,20,30);//60
sum1(10,20,30,40);//60
sum2(10,20,30);//60
function sum1(num1,num2) {
var result = num1 + num2;
console.log(result);
}

function sum1(num1,num2,num3) {
var result = num1 + num2 + num3;
console.log(result);
console.log(num3);
}
function sum2(num1,num2,num3) {
var result = num1 + num2 + num3;
console.log(result);
}
//JS中声明多个函数名相同的函数，后面的会覆盖前面的
//当实际参数的数量，小于函数声明时的形参的数量，前面的会依次匹配，后面不够的会认为是undefined
//当实际参数的数量，多于函数声明时形参的数量，会根据形参依次匹配前面的实参，多余的实参不要了

//JS可以利用arguments模拟函数的重载

4.2 arguments对象：
arguments对象是我们JS中一个特殊的对象，它是一个类数组，具有索引值，索引从0开始依次递增，通过索引可以获取到对应的值

具有属性length，获取参数的数量

fn();//arguments.length 0 长度为0，代表没有参数
fn(1);//arguments.length 1
fn(2,“Hello”);//arguments.length 2
fn(2,“Hello”,10,40);//arguments.length 4
function fn() {
console.log(“arguments.length”,arguments.length);
for (var i = 0; i < arguments.length; i++) {
console.log(“对应的索引”,i,“的参数为：”,arguments[i]);
}
}

4.3 arguments对象模拟函数重载
//我们前面已经知道，通过arguments对象可以遍历到每一个参数，那么此时思考通过这个特殊的对象，来进行不同数量的数值的求和
var count = 0;
function sum() {
var result = 0;
console.group(“开始”+count++);
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i])
//将遍历到的每个参数数值累加到result上面
result += arguments[i];//result = result + arguments[i]
}
console.log(“result”,result);
console.groupEnd();
}

sum(10);
sum(10,20);
sum(10,20,30);
sum(10,20,30,40);

五、带返回值的函数
上面所写的都是直接从函数中打印结果，这样的话我们不能在外部对通过这个函数所获取的结果进行二次操作，那么如果想要对其进行二次操作的话，那么就需要将结果用return返回。这样，在调用函数时，得到的就是这个结果。

return关键字：

返回通过函数所要得到的值；

如果不想返回任何值，仅仅是为了结束函数的执行，那么也可以使用return跳出函数

面试题：return break continue的区别

可以将一个函数作为返回值，传递给另外一个函数。利于模块化编程

document.write( fn(10,20));
function fn(num1,num2) {
return num1 + num2;
}

fn();
function fn() {
for (var i = 0; i < 10; i++) {
if (i === 5){
// continue;//=> 0 1 2 3 4 6 7 8 9 “Hello JS!!”
// break;//=>0 1 2 3 4 “Hello JS!!”
return;//=>0 1 2 3 4
}
console.log(i);
}
console.log(“Hello JS!!”);
}

JavaScript（第四天）—爱创课堂专业前端培训相关推荐

web前端源码笔记_canvas【爱创课堂专业前端培训】
爱创课堂前端源码笔记--canvas 一.canvas canvas是HTML5新增的标签用于提供"画布" 可以通过canvas元素获取对应的"上下文"(可以理 ...
零基础能不能学习web前端开发？【爱创课堂专业前端培训】
web前端日趋火热,不只招聘市场需求量大,还有一个重要的原因便是,入行门槛低,入门简单.单是关于许多小白同学来说还是有点担心,不知道零基础能不能学习web前端开发? 以为没那么简单.其实web前端是一 ...
小白前端学习流程【爱创课堂专业前端培训】
对于零基础非科班的同学来说,一个良好的前端学习流程和学习误区是需要我们去规避和计划的,爱创课堂目前专注于前端培训,总结了以下几点,给大家一个参考. 在开始学习之前你需要做到以下5点: 第一:需要达到什 ...
css源码笔记（四）【爱创课堂专业前端培训】
复习: 1.1 布局模型--前端培训机构与盒子模型一样是最基础.最核心的东西,但是布局模型是从盒子模型基础上进行布局的. 流动模型flow.浮动模型float.层模型:绝对定位.固定定位流动模型f ...
html5源码笔记（四）【爱创课堂专业前端培训】
一.响应式的实现-媒介查询 @media 实现方式一:把media限定到link中实现方式二:把media写到css代码中留活口,ie兼容 @charset "utf-8"; ...
JavaScript（第三天）—爱创课堂专业前端培训
一.条件语句条件语句格式一: if(条件表达式){ 条件表达式成立执行的语句; } 条件语句格式二: if(条件表达式){ 条件表达式成立执行的语句; }else{ 条件表达式不成立执行的语句; } ...
JavaScript源码笔记（第七天）—爱创课堂专业前端培训
一.DOM介绍 DOM:Document Object Model 文档对象模型,用来表示和操作html或xml文档内容的基础API: 当网页被加载时,浏览器会创建对应的文档对象模型,而DOM模型被构 ...
JavaScript（第五天）—爱创课堂专业前端培训
一.递归函数函数内部调用函数本身: 如果函数一直自己调用自己,那么就成了死循环.程序就会造成内存堆栈溢出,终止程序: 所以,递归函数一定要给一个条件,来跳出函数. 递归一般用来解决数学问题: 一般是 ...
前端开发——Ionic 3.0【爱创课堂专业前端培训】
一.Ionic 移动端有三种开发方向源生APP开发, 移动端web开发混合开发(介于以上两者之间的) 类微信小程序 reactNative,用react语法,开发app.但是与浏览器端不是同一套组 ...

JavaScript（第四天）—爱创课堂专业前端培训

JavaScript（第四天）—爱创课堂专业前端培训相关推荐

最新文章

热门文章