JavaScript学习笔记【DAY3(2020.8.19)周三】

 

函数:函数就是一个工具，可以将代码放在里面，随时执行。

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

函数的定义

第一种定义方式: 函数声明

function 函数名() {
   要执行的代码  
}

第二种定义方式: 函数表达式

var 变量 = function() {
   要执行的代码
}

注: 第二种方式的本质 其实是定义了一个变量，并将这个函数的地址交给该变量。于是，函数名就是这个变量名。

 

第三种定义方式：new Function()

var f = new Function('a', 'b', 'console.log(a + b)');

f(1, 2);

​

var fn = new Function('参数1','参数2'..., '函数体')

注意

/*Function 里面参数都必须是字符串格式

第三种方式执行效率低，也不方便书写，因此较少使用

所有函数都是 Function 的实例(对象)  

函数也属于对象

*/

 

 

函数的调用

函数声明定义出来的函数

既可以在函数之前

也可以在函数之后

函数表达式定义的函数

只能够在后面调用

// 调用函数

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

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

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

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

/* 1. 普通函数 */

function fn() {

console.log('人生的巅峰');

}

fn(); 

/* 2. 对象的方法 */

var o = {

 sayHi: function() {

console.log('人生的巅峰');

}

}

o.sayHi();

/* 3. 构造函数*/

function Star() {};

new Star();

/* 4. 绑定事件函数*/

btn.onclick = function() {};   // 点击了按钮就可以调用这个函数

/* 5. 定时器函数*/

setInterval(function() {}, 1000);  这个函数是定时器自动1秒钟调用一次

/* 6. 立即执行函数(自调用函数)*/

(function() {

console.log('人生的巅峰');

})();

函数的封装:函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

简单理解：封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包）

 

 

函数的参数

函数整体由 关键字、 函数名、 形参列表、 函数体组成。

形参列表中，可以放置 形式参数 。简称: 形参。

// 定义一个函数，计算两个数字的和
   function sum(num1, num2) {
       // 形参num1 "代表" 将来函数执行的时候，要传递的一个参数
       // 形参num2 "代表" 将来函数执行的时候，要传递的另一个参数
       console.log(num1 + num2);
  }
   // 函数执行了
   sum(1, 2); // 输出3    1和2是实参

当函数执行的时候，可以往圆括号内填写数据，这种行为，叫做 传参, 用于函数运行中使用，这样的参数叫做 实际参数，简称 实参。

函数的参数关系

当函数定义时，可以定义形参，当函数执行时，可以传递实参。 如果函数在执行时，传递的参数与形参不一致，分类如下

当形参比实参多: 多余的形参的值为undefined

function sum(a, b) {
   console.log(a);
   console.log(b);
}
sum(10); // a是10 b是undefined

当形参比实参少: 没有形参接收多余的实参

function sum(a, b) {

console.log(a);

console.log(b);

}

sum(10, 11, 12); // a是10 b是11 12没有形参来接收

 

 

 

 

return关键字:该关键字是用于在函数内部 返回内容 并 中止函数执行 的。

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

// 中止函数执行

function demo() {

console.log(1);

console.log(2);

console.log(3);

return;

console.log(4);

console.log(5);

}

demo(); // 只会输出1 2 3 而不会输出4 5 因为遇见了return

// 返回内容

var a = 10;

var b = 11;

function sum(num1, num2) {

return num1 + num2;

}

// 进行计算

var result = sum(a, b);

// 使用结果

console.log(result); // 21

注: return关键字只能够在函数内部出现。

 

break ,continue ,return 的区别

break ：结束当前的循环体（如 for、while）

continue ：跳出本次循环，继续执行下次循环（如 for、while）

return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

 

arguments

(1)arguments是函数内部的一个成员，只有在函数执行的时候才会存在。可以使用它来获取本次函数在执行时，所有传递的实参。

arguments.length可以获取实参的个数。

function sum() {

console.log(arguments);

}

sum(1); // => [1]  

sum(2); // => [2]  

sum(1, 2, 3, 4, 5); // => [1, 2, 3, 4, 5]  

(2)arguments是一个类数组对象，也叫做伪数组对象。可以使用 arguments[idx] 来获取对应的值。 idx是 从0开始的。 这个idx，也可以叫做 下标 或者 索引

function sum() {

console.log(arguments[2]);

}

sum(1, 2, 3, 4); // => 3

sum(1, 2); // => undefined

 

函数的定义过程

(1)在内存中开辟一个空间；

(2)把代码放进去；

(3)把空间的地址交给函数名或者变量名来保存。

函数的调用过程

(1)根据函数名称找到内存空间

(2)将实参的值传递给形参

(3)开始解析内存空间中的代码

(4)执行代码

 

作用域:指的是变量起作用的范围

作用域的划分规则: 只有全局作用域和函数的私有作用域

作用域是根据书写的单词和语法来确定的,所以又叫做词法作用域

所以,通常我们把代码写完,就可以确定每一个作用域的范围

注: script标签之间是全局作用域 多个script标签共享同一个作用域 但是每一个script标签中的变量 函数,它们的提升,只能够在本script标签的范围之内

注: 浏览器在加载script标签的代码的时候,是一个script标签加载并执行完毕之后,再去加载执行后面的一个

局作用域:作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

局部作用域：作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。

 

 

 

 

<script>

var a = 10;

</script>

<script>

console.log(a); // 输出10

</script>

<script>

console.log(a); // ReferenceError: a is not defined

</script>

<script>

var a = 10;

</script>

函数的属性

name 它是函数的名称 函数的名称不论是表达式还是声明 都是变量的名字

length 它是函数的形参的个数

function demo(a, b, c) {

}

console.log(demo.name); // "demo"

console.log(demo.length); // 3

var fun = function() {

}

console.log(fun.name); // "fun"

console.log(fun.length); // 0

 

递归函数(重要、了解)

递归函数指的是函数自己在函数体内部调用自己

注: 无停止条件的递归 就是死循环 写递归函数,先写停止条件return

// a变量一定要定义在函数外部

var a = 0;

function demo() {

a++;

if (a >= 10) {

return;

}

demo();

}

demo(); // 循环让a自加10次 之后就停止

 

 

浅复制和深复制：

1.浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用.

2.深拷贝拷贝多层，每一级别的数据都会拷贝.

3. Object.assign( target, .. sources) es6 新增方法可以浅拷贝

 

 

作用域的特点

作用域的机制

作用域是针对变量的生效的范围。 变量操作又分为使用变量 与 赋值变量

使用变量

出现在表达式中，赋值语句右侧。

访问变量规则

当访问变量的时候，会先查看当前作用域中是否存在该变量

如果有，就使用，并终止查找。

如果没有，就将会向上一层级作用域中寻找。

依次向上，直到找到，或者到了全局作用域中还没有找到，就会报错。

赋值变量

只出现在赋值语句左侧

赋值变量规则

当对一个变量进行赋值的时候，会先查看当前作用域中是否存在该变量

如果有，就赋值。

如果没有，就向上一层级查找。

依次向上，直到找到，或者到了全局作用域中还没有找到

就会在全局作用域中悄悄的声明这个变量并赋值。

// 当前是全局作用域
var num = 100; // 在全局作用域中定义的变量
​
// 定义一个函数
function demo() {
   var num = 101; // 这是在函数作用域中定义的变量
   console.log(num);
}
// 执行函数
demo(); // 101

解释: 当在函数内部访问变量num的时候，先看当前作用域中是否有num 找到了！ 于是就用101 输出101

var num = 100; // 在全局作用域中定义的变量
// 定义一个函数
function demo() {
   // var num; // 因为声明提升的原因 代码其实是这样子的
   console.log(num);
   var num = 101; // 这是在函数作用域中定义的变量 虽然定义是在这里 但是提升了
}
// 执行函数
demo(); // undefined

解释: 依旧是作用域的问题，但是因为输出代码在前面，所以有些同学可能会误以为会输出100 但是不要忘记变量的查找规则与预解析！！！

var num = 100; // 在全局作用域中定义的变量

// 定义一个函数

function demo() {

var num = 101;

}

// 执行函数

demo();

// num是多少

console.log(num); // 100

解释: 作用域的问题，因为输出的代码是在全局作用域中的，所以会直接访问全局中的变量 而与函数内部的变量无关

var num = 100; // 在全局作用域中定义的变量

// 定义一个函数

function demo() {

num = 101;

}

console.log(num); // 100

// 执行函数

demo();

// num是多少

console.log(num); // 101  

 

JS的糟粕之一

// 如果一个变量没有通过var声明 就直接赋值 

num = 101; // 这种不经过声明就直接赋值而且还不会报错的特点属于JS的糟粕之一。一定不要使用。

console.log(num); // 101

console.log(num);

num = 101;

这种情况下会报错 因为num没有经过定义就被使用

 

 

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

预解析: 在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。

 

JS引擎执行代码的阶段:

通读代码

在通读代码阶段，引擎会先查看是否有语法错误，如果有，就报错。如果没有，则在这个过程中，就会将代码中所有的通过var声明的变量和通过function声明的函数提升到代码的最前面。这个提升行为，就是发生在预解析阶段。

执行代码: 从上到下执行JS语句。

变量提升(变量预解析)： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

函数提升(函数预解析)： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。