文章目录
- 14 - 什么是函数
- 15 - 函数的使用
- 16 - 利用函数封装求1~100的和
- 17 - 带参数的函数
- 18 - 利用函数求任意两个数的和
- 19 - 函数形参实参个数匹配
- 20 - 函数的返回值
- 21 - 求两个数的最大值(函数版)
- 22 - 求数组中的最大值(函数版)
- 23 - 函数返回值注意事项
- 通过榨汁机看透函数
- 作业
- 昨日复习
- 01 - arguments使用
- 02 - 利用函数求任意个数的最大值
- 03 - 利用函数翻转数组
- 04 - 利用函数冒泡排序
- 05 - 利用函数判断闰年
- 06 - 函数是可以相互调用的
- 07 - 输出年份的2月份天数
- 08 - 函数的两种声明方式
- 做一个简易计算器
- 09 - JavaScript作用域
- 10 - 变量的作用域
- 11 - JavaScript没有块级作用域
- 13 - 作用域链案例
- 14 - 预解析
- 15 - 预解析案例
- 16 - 利用对象字面量创建对象
- 17 - 变量属性函数方法区别
- 18 - 利用new Object创建对象
- 19 - 我们为什么需要构造函数
- 21 - 构造函数和对象
- 22 - new关键字执行过程
- 23 - 遍历对象
- 小结
- 作业
14 - 什么是函数
1. 函数的概念
在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。
虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数 。
函数： 就是封装了一段 可被重复调用执行的代码块 。通过此代码块可以实现大量代码的重复使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>14 - 什么是函数</title>
<script>
// 1. 求 1~100的累加和
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum); // 5050
// 2. 求 10~50的累加和
var sum = 0;
for (var i = 10; i <= 50; i++) {
sum += i;
}
console.log(sum); // 1230
// 3. 函数就是封装了一段可以被重复执行调用的代码块 目的： 就是让大量代码重复使用
function getSum(num1, num2) {
var sum = 0;
for (var i = num1; i <= num2; i++) {
sum += i;
}
console.log(sum);
}
getSum(1, 100); // 5050
getSum(10, 50); // 1230
getSum(1, 1000); // 500500
</script>
</head>
<body>
</body>
</html>
15 - 函数的使用
2. 函数的使用
函数在使用时分为两步：声明函数和调用函数。
2.1 声明函数
// 声明函数
function 函数名() {
//函数体代码
}
- function 是声明函数的关键字， 必须小写
- 由于函数一般是为了实现某个功能才定义的， 所以通常我们将 函数名 命名为 动词 ，比如 getSum
2.2 调用函数
// 调用函数
函数名(); // 通过调用函数名来执行函数体代码
- 调用的时候千万 不要忘记添加小括号
- 口诀：函数不调用，自己不执行。
注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。
知识总结
- 函数的声明：
function 函数名(参数1，参数2) {
封装的代码块
}
- 函数的调用： 函数名( )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15 - 函数的使用</title>
<script>
// 函数使用分为两步： 声明函数 和 调用函数
// 1. 声明函数
// function 函数名() {
// // 函数体
// }
function sayHi() {
console.log('hi~~');
}
// (1) function 声明函数的关键字 全部小写
// (2) 函数是做某件事情，函数名一般是动词 sayHi
// (3) 函数不调用自己不执行
// 2. 调用函数
// 函数名();
sayHi(); // hi~~
// 调用函数的时候千万不要忘记加小括号
</script>
</head>
<body>
</body>
</html>
16 - 利用函数封装求1~100的和
2.3 函数的封装
- 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
- 简单理解：封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包）
案例：利用函数计算1-100之间的累加和
2.4 提问
- 函数是做什么的（作用）？
- 声明函数用什么关键词？
- 如何调用函数？
- 封装是什么意思？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>16 - 利用函数封装求1~100的和</title>
<script>
// 1. 声明函数
function getSum() {
var sum = 0; // // 准备一个变量，保存数字和
for (var i = 1; i <= 100; i++) {
sum += i; // // 把每个数值 都累加 到变量中
}
console.log(sum);
}
// 2. 调用函数
getSum(); // 5050
getSum(); // 5050
</script>
</head>
<body>
</body>
</html>
17 - 带参数的函数
3. 函数的参数
3.1 形参和实参
在 声明函数时 ，可以在函数名称后面的小括号中添加一些参数，这些参数被称为 形参 ，而在 调用该函数时 ，同样也需要传递相应的参数，这些参数被称为 实参 。
| 参数 | 说明 |
|---|---|
| 形参 | 形式上的参数 函数定义的时候 传递的参数 当前并不知道是什么 |
| 实参 | 实际上的参数 函数调用的时候传递的参数 实参是传递给形参的 |
参数的作用 : 在 函数内部 某些值不能固定，我们可以通过参数在 调用函数时传递 不同的值进去。
在 声明函数时 ，可以在函数名称后面的小括号中添加一些参数，这些参数被称为 形参 ，而在 调用该函数时 ，同样也需要传递相应的参数，这些参数被称为 实参 。
// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);
知识总结
- 参数的作用：在函数封装的代码块中，使用参数可以在调用函数时修改指定数据，来完成不同的操作
- 形参：在函数定义时，设置用来接收函数调用时传过来的数据
- 实参：在函数调用时，用户在小括号中传入的数据，可被形参接收，运用到函数内部的调用中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>17 - 带参数的函数</title>
<script>
// 1. 函数可以重复相同的代码
// function cook() {
// console.log('酸辣土豆丝');
// }
// cook(); // 酸辣土豆丝
// cook(); // 酸辣土豆丝
// 2. 我们可以利用函数的参数实现函数重复不同的代码
// function 函数名(形参1,形参2...) { // 在声明函数的小括号里面是 形参 （形式上的参数）
//
// }
// 函数名(实参1,实参2...); // 在函数调用的小括号里面是实参（实际的参数）
// 3. 形参和实参的执行过程
function cook(aru) { // 形参是接受实参的 aru = '酸辣土豆丝' 形参类似于一个变量
console.log(aru);
}
cook('酸辣土豆丝'); // 酸辣土豆丝
cook('大肘子'); // 大肘子
// 4. 函数的参数可以有，也可以没有个数不限
</script>
</head>
<body>
</body>
</html>
18 - 利用函数求任意两个数的和
3.2 函数参数的传递过程
// 声明函数
function getSum(num1, num2) {
console.log(num1 + num2);
}
// 调用函数
getSum(1, 3); // 4
getSum(6, 5); // 11
- 调用的时候实参值是传递给形参的
- 形参简单理解为：不用声明的变量
- 实参和形参的多个参数之间用逗号(,)分隔
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>18 - 利用函数求任意两个数的和</title>
<script>
// 1. 利用函数求任意两个数的和
function getSum(num1, num2) {
console.log(num1 + num2);
}
getSum(1, 3); // 4
getSum(3, 8); // 11
// 2. 利用函数求任意两个数之间的和
function getSums(start, end) {
var sum = 0;
for (var i = start; i <= end; i++) {
sum += i;
}
console.log(sum);
}
getSums(1, 100); // 5050
getSums(1, 10); // 55
// 3. 注意点
// (1) 多个参数之间用逗号隔开
// (2) 形参可以看做是不用声明的变量
</script>
</head>
<body>
</body>
</html>
19 - 函数形参实参个数匹配
3.3 函数形参和实参个数不匹配问题
| 参数个数 | 说明 |
|---|---|
| 实参个数等于形参个数 | 输出正确结果 |
| 实参个数多于形参个数 | 只取到形参的个数 |
| 实参个数小于形参个数 | 多的形参定义为undefined，结果为NaN |
function sum(num1, num2) {
console.log(num1 + num2);
}
sum(100, 200); // 形参和实参个数相等，输出正确结果
sum(100, 400, 500, 700); // 实参个数多于形参，只取到形参的个数
sum(200); // 实参个数少于形参，多的形参定义为undefined，结果为NaN
注意： 在JavaScript中，形参的默认值是 undefined。
3.4 小结
- 函数可以带参数也可以不带参数
- 声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
- 调用函数的时候，函数名括号里面的是实参
- 多个参数中间用逗号分隔
- 形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配
知识总结
- 如果实参的个数多余形参，形参如何接收实参？
- 如果实参的个数多余形参，形参将按照顺序依次接收实参，剩余的实参不被接收值
- 如果实参的个数少于形参，形参如何接收实参
- 如果实参的个数少于形参，形参将按照顺序依次接收实参，多余的形参接收不到实参，默认值为undefined
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>19 - 函数形参实参个数匹配</title>
<script>
// 函数形参实参个数匹配
function getSum(num1, num2) {
console.log(num1 + num2);
}
// 1. 如果实参的个数和形参的个数一致 则正常输出结果
getSum(1, 2); // 3
// 2. 如果实参的个数多于形参的个数 会取到形参的个数
getSum(1, 2, 3); // 3
// 3. 如果实参的个数小于形参的个数 多于的形参定义为undefined 最终的结果就是 NaN
// 形参可以看做是不用声明的变量 num2 是一个变量但是没有接受值 结果就是undefined
getSum(1); // NaN
// 建议 我们尽量让实参的个数和形参相匹配
</script>
</head>
<body>
</body>
</html>
20 - 函数的返回值
4. 函数的返回值
4.1 return语句
有的时候，我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现。
return 语句的语法格式如下：
// 声明函数
function 函数名（）{
...
return 需要返回的值；
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值
- 在使用 return 语句时，函数会停止执行，并返回指定的值
- 如果函数 没有return ，返回的值是 undefined
有的时候，我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现。
例如，声明了一个sum()函数，该函数的返回值为666，其代码如下：
// 声明函数
function sum（）{
...
return 666；
}
// 调用函数
sum(); // 此时 sum 的值就等于666，因为 return 语句会把自身后面的值返回给调用者
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>20 - 函数的返回值</title>
<script>
// 1.函数是做某件事或者实现某种功能
// function cook(aru) {
// console.log(aru);
// }
// cook('大肘子');
// 2. 函数的返回值格式
// function 函数名() {
// return 需要返回的结果;
// }
// 函数名();
// (1) 我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return 实现的
// (2) 只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果
// 3. 代码验证
function getResult() {
return 666;
}
getResult(); // getResult() = 666
console.log(getResult()); // 666
function cook(aru) {
return aru;
}
console.log(cook('大肘子')); // 大肘子
// 4. 求任意两个数的和
function getSum(num1, num2) {
return num1 + num2;
}
console.log(getSum(1, 2)); // 3
</script>
</head>
<body>
</body>
</html>
21 - 求两个数的最大值(函数版)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>21 - 求两个数的最大值(函数版)</title>
<script>
// 利用函数 求两个数的最大值
function getMax(num1, num2) {
// if (num1 > num2) {
// return num1;
// } else {
// return num2;
// }
return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 3)); // 3
console.log(getMax(11, 3)); // 11
</script>
</head>
<body>
</body>
</html>
22 - 求数组中的最大值(函数版)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>22 - 求数组中的最大值(函数版)</title>
<script>
// 定义一个获取数组中最大数的函数
function getArrMax(arr) { // arr 接受一个数组 arr = [5,2,99,101,67,77]
var max = arr[0];
for (var i = 1; i <= arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
// getArrMax([5, 2, 99, 101, 67, 77]); // 实参是一个数组送过去
// 在我们实际开发里面，我们经常用一个变量来接受 函数的返回结果 使用更简单
var re1 = getArrMax([5, 2, 99, 101, 67, 77]);
var re2 = getArrMax([3, 77, 44, 99, 143]);
console.log('最大值为 ' + re1); // 最大值为 101
console.log('最大值为 ' + re2); // 最大值为 143
</script>
</head>
<body>
</body>
</html>
23 - 函数返回值注意事项
4.2 return 终止函数
return 语句之后的代码不被执行。
function add(num1，num2){
//函数体
return num1 + num2; // 注意：return 后的代码不执行
alert('我不会被执行，因为前面有 return');
}
var resNum = add(21,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
alert(resNum); // 27
4.3 return的返回值
return只能返回一个值 。 如果用逗号隔开多个值，以最后一个为准。
function add(num1，num2){
//函数体
return num1，num2;
}
var resNum = add(21,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
alert(resNum); // 6
案例：创建一个函数，实现两个数之间的加减乘除运算，并将结果返回
var a = parseFloat(prompt('请输入第一个数'));
var b = parseFloat(prompt('请输入第二个数'));
function count(a, b) {
var arr = [a + b, a - b, a * b, a / b];
return arr;
}
var result = count(a, b);
console.log(result);
4.4 函数没有return返回undefined
函数都是有返回值的
- 如果有return 则返回 return 后面的值
- 如果没有return 则返回 undefined
4.5 break,continue,return的区别
- break ：结束当前的循环体（如 for、while）
- continue ：跳出本次循环，继续执行下次循环（如 for、while）
- return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码
知识总结
- 函数中如果执行了return语句，即结束当前函数，不再继续向下执行代码
- 函数中只能有一个返回值，即使写了多个return，也只能执行第一个return语句
- 函数中只能返回一个具体的数据，如果返回了多个数据，则只会返回最后一个数据
- 函数中通过return关键词指定函数返回值
- 函数中如果没有指定返回值，则函数默认返回值为undefined
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>23 - 函数返回值注意事项</title>
<script>
// 函数返回值注意事项
// 1. return 终止函数
function getSum(num1, num2) {
return num1 + num2; // return 后面的代码不会被执行
// alert('我是不会被执行的哦！');
}
console.log(getSum(1, 2)); // 3
// 2. return 只能返回一个值
function fn(num1, num2) {
return num1, num2; // 返回的结果是最后一个值
}
console.log(fn(1, 2)); // 2
// 3. 我们求任意两个数的 加减乘数结果
function getResult(num1, num2) {
return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
}
var re = getResult(1, 2); // 返回的是一个数组
console.log(re); // Array(4) [ 3, -1, 2, 0.5 ]
// 4. 我们的函数如果有return 则返回的是 return 后面的值，如果函数么有 return 则返回undefined
function fun1() {
return 666;
}
console.log(fun1()); // 返回 666
function fun2() {
}
console.log(fun2()); // 函数返回的结果是 undefined
</script>
</head>
<body>
</body>
</html>
通过榨汁机看透函数
作业
- 写一个函数，用户输入任意两个数字的任意算术运算（简单的计算器小功能），并能弹出运算后的结果。
- 写一个函数，用户输入任意两个数字的最大值，并能出弹运算后的结果。
- 写一个函数，用户输入任意三个不同数字的最大值，并能弹出运算后的结果。
- 写一个函数，用户输入一个数判断是否是素数，并返弹出回值(又叫质数，只能被1和自身整数的数)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>作业</title>
<script>
// 写一个函数,用户输入任意两个数字的任意算术运算,并弹出运算后的结果
function getResult(){
var sum;
var num1 = prompt('请输入第一个数：');
var num2 = prompt('请输入第二个数：');
var operator = prompt('请输入你想要的运算符：')
switch (operator) {
case '+':
sum = parseInt(num1) + parseInt(num2); // 接受的是字符型
break;
case '-':
sum = num1 - num2;
break;
case '*':
sum = num1 * num2;
break;
case '/':
sum = num1 / num2;
break;
default:
return alert('符号错误');
break;
}
document.write('计算结果是：' + num1 + operator + num2 + '=' + sum + '<br>');
}
getResult(); // 不要忘了调用函数
// 2. 写一个函数，用户输入任意两个数字的最大值，并能出弹运算后的结果。
function getTwoMax() {
var num1 = parseInt(prompt('请输入第一个数：'));
var num2 = parseInt(prompt('请输入第二个数：'));
var max = num1 > num2 ? num1 : num2; // max一定要放num后面定义，不然就是undefined
document.write('最大值：' + max + '<br>'); // 前面不要return，不然后面的句子输出不了
}
getTwoMax();
// 3. 写一个函数，用户输入任意三个不同数字的最大值，并能弹出运算后的结果。
function getThreeMax() {
var a = parseInt(prompt('请输入第一个数：'));
var b = parseInt(prompt('请输入第二个数：'));
var c = parseInt(prompt('请输入第三个数：'));
var arr = [a, b, c];
var max = arr[0];
for (var i = 1; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
document.write('最大值是：' + max + '<br>');
}
getThreeMax();
// 4. 写一个函数，用户输入一个数判断是否是素数，并返弹出回值(又叫质数，只能被1和自身整数的数)
function getPrime() {
var num = Number(prompt('请输入一个正整数,判断此数是不是素数')); // 要判断的数
var flag = true; // 假设变量 值为true 是素数
for( var i = 2 ; i < num ; i++ ){
if( num % i == 0 ){ // 满足这个条件 说明有因子了 不是素数
flag = false; // 不是素数
break;
}
}
// 如果假设成立
if( flag && (num != 1 & num != 0) ){ // 1和0不是素数
document.write( num + '是素数' + '<br>');
}else{
document.write( num + '不是素数' + '<br>' );
}
}
getPrime();
</script>
</head>
<body>
</body>
</html>
昨日复习
- 数组的长度通过 length 属性获取
- 数组的索引值从 0 开始
- 数组arr中元素的最大索引值是 length - 1
- 声明函数的关键字是 funciton
- 函数的返回值的关键字是 return
- 函数定义的时候设置的参数叫 形参 ，函数调用的时候传入的数据叫 实参
01 - arguments使用
5. arguments的使用
当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在JavaScript中，arguments 实际上它是当前函数的一个 内置对象 。所有函数都内置了一个arguments对象，arguments对象中 存储了传递的所有实参 。
arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：
- 具有 length 属性
- 按索引方式储存数据
- 不具有数组的 push , pop 等方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01 - arguments使用</title>
<script>
// arguments 的使用 只有函数才有 arguments对象 而且是每个函数都内置好了这个arguments
function fn() {
console.log(arguments); // 里面存储了所有传递过来的实参 arguments = [1,2,3]
console.log(arguments.length); // 3 / 5
console.log(arguments[2]); // 3 / 3
// 我们可以按照数组的方式遍历arguments
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]); // 1 2 3 / 1 2 3 4 5
}
}
fn(1, 2, 3);
fn(1, 2, 3, 4, 5);
// 伪数组 并不是真正意义上的数组
// 1. 具有数组的 length 属性
// 2. 按照索引的方式进行存储的
// 3. 它没有真正数组的一些方法 pop() push() 等等
</script>
</head>
<body>
</body>
</html>
02 - 利用函数求任意个数的最大值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02 - 利用函数求任意个数的最大值</title>
<script>
// 利用函数求任意个数的最大值
function getMax() { // arguments = [1,2,3]
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
console.log(getMax(1, 2, 3)); // 3
console.log(getMax(1, 2, 3, 4, 5)); // 5
console.log(getMax(11, 2, 34, 444, 5, 100)); // 444
</script>
</head>
<body>
</body>
</html>
03 - 利用函数翻转数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03 - 利用函数翻转数组</title>
<script>
// 利用函数翻转任意数组 reverse 翻转
function reverse(arr) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}
var arr1 = reverse([1, 3, 4, 6, 9]);
console.log(arr1);
var arr2 = reverse(['red', 'pink', 'blue']);
console.log(arr2);
</script>
</head>
<body>
</body>
</html>
04 - 利用函数冒泡排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04 - 利用函数冒泡排序</title>
<script>
// 利用函数冒泡排序 sort 排序
function sort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
var arr1 = sort([1, 4, 2, 9]);
console.log(arr1);
var arr2 = sort([11, 7, 22, 999]);
console.log(arr2);
</script>
</head>
<body>
</body>
</html>
05 - 利用函数判断闰年
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05 - 利用函数判断闰年</title>
<script>
// 利用函数判断闰年
function isRunYear(year) {
// 如果是闰年我们返回 true 否则 返回 false
var flag = false;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
flag = true;
}
return flag;
}
console.log(isRunYear(2000)); // true
console.log(isRunYear(1999)); // false
</script>
</head>
<body>
</body>
</html>
06 - 函数是可以相互调用的
6. 函数案例
函数可以调用另外一个函数
因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06 - 函数是可以相互调用的</title>
<script>
// 函数是可以相互调用的
// function fn1() {
// console.log(11);
// fn2(); // 在fn1 函数里面调用了 fn2 函数
// }
// fn1();
// function fn2() {
// console.log(22);
// }
function fn1() {
console.log(111);
fn2();
console.log('fn1');
}
function fn2() {
console.log(222);
console.log('fn2');
}
fn1();
</script>
</head>
<body>
</body>
</html>
07 - 输出年份的2月份天数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07 - 输出年份的2月份天数</title>
<script>
// 用户输入年份，输出当前年份2月份的天数
function backDay() {
var year = prompt('请您输入年份:');
if (isRunYear(year)) { // 调用函数需要加小括号
alert('当前年份是闰年2月份有29天');
} else {
alert('当前年份是平年2月份有28天');
}
}
backDay();
// 判断是否为闰年的函数
function isRunYear(year) {
// 如果是闰年我们返回 true 否则 返回 false
var flag = false;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
flag = true;
}
return flag;
}
</script>
</head>
<body>
</body>
</html>
08 - 函数的两种声明方式
7. 函数的两种声明方式
1. 自定义函数方式(命名函数)
利用函数关键字 function 自定义函数方式。
// 声明定义方式
function fu() { … }
// 调用
fu();
- 因为有名字，所以也被称为命名函数
- 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面
2. 函数表达式方式(匿名函数）
利用函数表达式方式的写法如下：
// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function() { … }；
// 调用的方式，函数调用必须写到函数体下面
fn();
- 因为函数没有名字，所以也被称为 匿名函数
- 这个fn 里面存储的是一个函数
- 函数表达式方式原理跟声明变量方式是一致的
- 函数调用的代码必须写到函数体后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08 - 函数的两种声明方式</title>
<script>
// 函数的2中声明方式
// 1. 利用函数关键字自定义函数(命名函数)
function fn() {
}
fn();
// 2. 函数表达式(匿名函数)
// var 变量名 = function() {};
var fun = function(aru) {
console.log('我是函数表达式');
console.log(aru); // bing
}
fun('bing');
// (1) fun是变量名 不是函数名
// (2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
// (3) 函数表达式也可以进行传递参数
</script>
</head>
<body>
</body>
</html>
做一个简易计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>做一个简易计算器</title>
<script>
//根据用户选择执行相应功能
while(true){
var opt = (prompt('欢迎使用简易计算器：' + '\n' + '1、加法运算' + '\n' + '2、减法运算' + '\n' + '3、乘法运算' + '\n' + '4、除法运算' + '\n' + '5、退出' + '\n' + '请输入您的选项：')); //弹出用户选项
if (opt == 1) {
alert('结果为：' + add());
} else if (opt == 2) {
alert('结果为：' + sub());
} else if (opt == 3) {
alert('结果为：' + mul());
} else if (opt == 4) {
alert('结果为：' + div());
} else if (opt == 5) {
alert('您已退出计算器，感谢您的使用！');
break;
} else {
alert('对不起，您输入有误！');
}
}
//加法
function add() {
var num1 = parseFloat(prompt('请输入第一个数：'));
var num2 = parseFloat(prompt('请输入第二个数：'));
return num1 + num2;
}
//减法
function sub() {
var num1 = parseFloat(prompt('请输入第一个数：'));
var num2 = parseFloat(prompt('请输入第二个数：'));
return num1 - num2;
}
//乘法
function mul() {
var num1 = parseFloat(prompt('请输入第一个数：'));
var num2 = parseFloat(prompt('请输入第二个数：'));
return num1 * num2;
}
//除法
function div() {
var num1 = parseFloat(prompt('请输入第一个数：'));
var num2 = parseFloat(prompt('请输入第二个数：'));
return num1 / num2;
}
</script>
</head>
<body>
</body>
</html>
09 - JavaScript作用域
1. 作用域
1.1 作用域概述
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的 可用性的代码范围 就是这个名字的 作用域 。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
JavaScript（es6前）中的作用域有两种：
- 全局作用域
- 局部作用域（函数作用域）
1.2 全局作用域
作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
1.3 局部作用域 （函数作用域）
作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。
1.4 JS 没有块级作用域
- 块作用域由 { } 包括。
- 在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的Java代码：
if(true){
int num = 123;
system.out.print(num); // 123
}
system.out.print(num); // 报错
Js中没有块级作用域（在ES6之前）。
if(true){
var num = 123;
console.log(123); //123
}
console.log(123); //123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09 - JavaScript作用域</title>
<script>
// 1.JavaScript作用域: 就是代码名字(变量)在某个范围内起作用和效果
// 目的是为了提高程序的可靠性更重要的是减少命名冲突
// 2. js的作用域（es6）之前 ： 全局作用域 局部作用域
// 3. 全局作用域： 整个script标签 或者是一个单独的js文件
var num = 10;
var num = 30;
console.log(num); // 30
// 4. 局部作用域（函数作用域） 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用
function fn() {
// 局部作用域
var num = 20;
console.log(num); // 20
}
fn();
</script>
</head>
<body>
</body>
</html>
10 - 变量的作用域
2. 变量的作用域
2.1 变量作用域的分类
在JavaScript中，根据作用域的不同，变量可以分为两种：
- 全局变量
- 局部变量
2.2 全局变量
在全局作用域下声明的变量叫做 全局变量（ 在函数外部定义的变量 ）。
- 全局变量在代码的任何位置都可以使用
- 在全局作用域下 var 声明的变量 是全局变量
- 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）
2.3 局部变量
在局部作用域下声明的变量叫做 局部变量（ 在函数内部定义的变量 ）
- 局部变量只能在该函数 内部 使用
- 在函数内部 var 声明的变量是局部变量
- 函数的 形参 实际上就是局部变量
2.4 全局变量和局部变量的区别
- 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
- 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10 - 变量的作用域</title>
<script>
// 变量的作用域： 根据作用域的不同我们变量分为全局变量和局部变量
// 1. 全局变量: 在全局作用域下的变量 在全局下都可以使用
// 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
var num = 10; // num就是一个全局变量
console.log(num); // 10
function fn() {
console.log(num); // 10
}
fn();
// console.log(aru); // error
// 2. 局部变量: 在局部作用域下的变量 后者在函数内部的变量就是 局部变量
// 注意： 函数的形参也可以看做是局部变量
function fun(aru) {
var num1 = 10; // num1就是局部变量 只能在函数内部使用
num2 = 20;
}
fun();
// console.log(num1); // error
console.log(num2); // 20
// 3. 从执行效率来看全局变量和局部变量
// (1) 全局变量只有浏览器关闭的时候才会销毁, 比较占内存资源
// (2) 局部变量 当我们程序执行完毕就会销毁, 比较节约内存资源
</script>
</head>
<body>
</body>
</html>
11 - JavaScript没有块级作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11 - JavaScript没有块级作用域</title>
<script>
// js中没有块级作用域 js的作用域: 全局作用域 局部作用域 现阶段我们js没有块级作用域
// 我们js也是在 es6 的时候新增的块级作用域
// 块级作用域 {} if{} for{}
// java
// if(xx) {
// int num = 10;
// }
// 外面的是不能调用num的
if (3 < 5) {
var num = 10;
}
console.log(num); // 10
</script>
</head>
<body>
</body>
</html>
3. 作用域链
- 只要是代码，就至少有一个作用域
- 写在函数内部的局部作用域
- 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
- 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作 作用域链
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12 - 作用域链</title>
<script>
// 作用域链: 内部函数访问外部函数的变量, 采取的是链式查找的方式来决定取那个值 这种结构我们称为作用域链 就近原则
var num = 10;
function fn() { // 外部函数
var num = 20;
function fun() { // 内部函数
console.log(num); // 20
}
fun();
}
fn();
</script>
</head>
<body>
</body>
</html>
13 - 作用域链案例
作用域链：采取就 近原则的方式 来查找变量最终的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13 - 作用域链案例</title>
<script>
// 案例1: 结果是几？
function f1() {
var num = 123;
function f2() {
var num = 0;
console.log(num); // 0 站在目标出发, 一层一层的往外查找
}
f2();
}
var num = 456;
f1();
// 案例2: 结果是几？
var a = 1;
function fn1() {
var a = 2;
var b = '22';
fn2();
function fn2() {
var a = 3;
fn3();
function fn3() {
var a = 4;
console.log(a); // a的值? 4
console.log(b); // b的值? 22
}
}
}
fn1();
</script>
</head>
<body>
</body>
</html>
14 - 预解析
1. 预解析
JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。
- 预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中
进行提前声明或者定义。 - 代码执行： 从上到下执行JS语句。
预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined，为什么在函数声明之前就可以调用函数。
2. 变量预解析和函数预解析
2.1 变量预解析（变量提升）
预解析也叫做变量、函数提升。
变量提升： 变量的声明会被提升到 当前作用域 的最上面，变量的赋值不会提升。
2.2 函数预解析（函数提升）
函数提升： 函数的声明会被提升到 当前作用域 的最上面，但是不会调用函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14 - 预解析</title>
<script>
// 1问
console.log(num); // error
// 2问
console.log(num); // undefined 坑1
var num = 10;
// 相当于执行了以下代码
// var num;
// console.log(num);
// num = 10;
// 3问
fn();
function fn() {
console.log(11); // 11
}
// 4问
// fun(); // 报错 坑2
var fun = function() {
console.log(22);
}
// 函数表达式 调用必须写在函数表达式的下面
// 相当于执行了以下代码
// var fun;
// fun();
// fun = function() {
// console.log(22);
// }
// 1. 我们js引擎运行js 分为两步: 预解析 代码执行
// (1). 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
// (2). 代码执行 按照代码书写的顺序从上往下执行
// 2. 预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)
// (1). 变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
// (2). 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数
</script>
</head>
<body>
</body>
</html>
15 - 预解析案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15 - 预解析案例</title>
<script>
// 案例1
var num = 10;
fun();
function fun() {
console.log(num); // 0
var num = 20;
}
// 相当于执行了以下操作
// var num;
// function fun() {
// var num;
// console.log(num);
// num = 20;
// }
// num = 10;
// fun();
// // 案例2
var num = 10;
function fn() {
console.log(num); // undefined
var num = 20;
console.log(num); // 20
}
fn();
// 相当于以下代码
// var num;
// function fn() {
// var num;
// console.log(num);
// num = 20;
// console.log(num);
// }
// num = 10;
// fn();
// 案例3
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a); // undefined
console.log(b); // 9
var a = '123';
}
// 相当于以下代码
// var a;
// function f1() {
// var b;
// var a;
// b = 9;
// console.log(a);
// console.log(b);
// a = '123';
// }
// a = 18;
// f1();
// 案例4
f1();
console.log(c); // 9
console.log(b); // 9
console.log(a); // error
function f1() {
var a = b = c = 9;
console.log(a); // 9
console.log(b); // 9
console.log(c); // 9
}
// 以下代码
// function f1() {
// var a;
// a = b = c = 9;
// // 相当于 var a = 9; b = 9; c = 9; b和c直接赋值 没有var声明当 全局变量看
// // 集体声明 var a = 9, b = 9, c = 9;
// console.log(a);
// console.log(b);
// console.log(c);
// }
// f1();
// console.log(c);
// console.log(b);
// console.log(a);
</script>
</head>
<body>
</body>
</html>
1. 对象
1.1 什么是对象？
现实生活中：万物皆对象，对象是 一个具体的事物 ，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是"对象"，一个数据库、一张网页、一个与远程服务器的连接也可以是"对象"。
明星 周星驰(星爷) 女朋友 迪丽热巴 班主任 咱们班班主任
苹果 这个苹果 手机 pink老师的小米手机 游戏 刺激战场
在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、
函数等。
对象是由 属性 和 方法 组成的。
- 属性：事物的 特征 ，在对象中用 属性 来表示（常用名词）
- 方法：事物的 行为 ，在对象中用 方法 来表示（常用动词）
1.2 为什么需要对象
保存一个值时，可以使用 变量 ，保存多个值（一组值）时，可以使用 数组 。如果要保存一个人的完整信息呢？
例如，将 “张三疯” 的个人的信息保存在数组中的方式为：
var arr = ['张三疯', '男', 128, 154];
JS 中的对象表达结构更清晰，更强大。张三疯的个人信息在对象中的表达结构如下：
张三疯.姓名 = '张三疯'; person.name = '张三疯';
张三疯.性别 = '男'; person.sex = '男';
张三疯.年龄 = 128; person.age = 128;
张三疯.身高 = 154; person.height = 154；
16 - 利用对象字面量创建对象
2. 创建对象的三种方式
在 JavaScript 中，现阶段我们可以采用三种方式创建对象(object)：
- 利用 字面量 创建对象
- 利用 new Object 创建对象
- 利用 构造函数 创建对象
2.1 利用字面量创建对象
对象字面量： 就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。
{ } 里面采取 键值对 的形式表示
- 键：相当于属性名
- 值：相当于属性值，可以是任意类型的值(数字类型、字符串类型、布尔类型，函数类型等)
对象的调用
- 对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为" 的 "
- 对象里面属性的另一种调用方式 : 对象[‘属性名’] ，注意方括号里面的属性 必须加引号 ，我们后面会用
- 对象里面的方法调用： 对象.方法名() ，注意这个方法名字后面 一定加括号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16 - 利用对象字面量创建对象</title>
<script>
// 1.利用对象字面量创建对象 {}
// var obj = {}; // 创建了一个空的对象
var obj = {
uname: '张三疯',
age: 18,
sex: '男',
sayHi: function() {
console.log('hi~');
}
}
// (1) 里面的属性或者方法我们采取键值对的形式 键 属性名 : 值 属性值
// (2) 多个属性或者方法中间用逗号隔开的
// (3) 方法冒号后面跟的是一个匿名函数
// 2. 使用对象
// (1). 调用对象的属性 我们采取 对象名.属性名 .我们理解为的
console.log(obj.uname); // 张三疯
// (2). 调用属性还有一种方法 对象名['属性名']
console.log(obj['age']); // 18
// (3). 调用对象的方法 sayHi 对象名.方法名() 千万别忘记添加小括号
obj.sayHi(); // hi~
</script>
</head>
<body>
</body>
</html>
练习：请按照要求写出对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<script>
var dog = {
uname :'可可',
type : '阿拉斯加犬',
age : '5岁',
color : '棕红色',
bark : function(){
return '汪汪汪';
},
showFilm : function(){
return '演电影';
}
}
console.log(dog.bark());
console.log(dog.showFilm());
</script>
</head>
<body>
</body>
</html>
17 - 变量属性函数方法区别
变量、属性、函数、方法总结
- 变量：单独声明赋值，单独存在
- 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
- 函数：单独存在的，通过"函数名()"的方式就可以调用
- 方法：对象里面的函数称为方法，方法不需要声明，使用"对象.方法名()"的方式就可以调用，方法用来描述该对象
的行为和功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17 - 变量属性函数方法区别</title>
<script>
// 变量、属性、函数、方法的区别
// 1.变量和属性的相同点 他们都是用来存储数据的
var num = 10;
var obj = {
age: 18,
fn: function() {
}
}
function fn() {
}
console.log(obj.age);
// console.log(age); // age is not defined
// 变量 单独声明并赋值 使用的时候直接写变量名 单独存在
// 属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性
// 2. 函数和方法的相同点 都是实现某种功能 做某件事
// 函数是单独声明 并且调用的 函数名() 单独存在的
// 方法 在对象里面 调用的时候 对象.方法()
</script>
</head>
<body>
</body>
</html>
18 - 利用new Object创建对象
2.2 利用new Object创建对象
跟我们前面学的 new Array() 原理一致
var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
alert('大家好啊~');
}
- Object() ：第一个字母大写
- new Object() ：需要 new 关键字
- 使用的格式：对象.属性 = 值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>18 - 利用new Object创建对象</title>
<script>
// 利用 new Object 创建对象
var obj = new Object(); // 创建了一个空的对象
obj.uname = '张三疯';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
console.log('hi~');
}
// (1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法
// (2) 每个属性和方法之间用 分号结束
console.log(obj.uname); // 张三疯
console.log(obj['sex']); // 男
obj.sayHi(); // hi~
</script>
</head>
<body>
</body>
</html>
练习： 请按照要求写出对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<script>
var obj = new Object();
obj.uname = '鸣人';
obj.sex = '男';
obj.age = '19岁';
obj.skill = function(){
return ('隐分身术');
}
console.log(obj.skill())
</script>
</head>
<body>
</body>
</html>
19 - 我们为什么需要构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>19 - 我们为什么需要构造函数</title>
<script>
// 我们为什么需要使用构造函数
// 就是因我们前面两种创建对象的方式一次只能创建一个对象
var ldh = {
uname: '刘德华',
age: 55,
sing: function() {
console.log('冰雨');
}
}
var zxy = {
uname: '张学友',
age: 58,
sing: function() {
console.log('李香兰');
}
}
// 因为我们一次创建一个对象，里面很多的属性和方法是大量相同的 我们只能复制
// 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数
// 又因为这个函数不一样，里面封装的不是普通代码，而是 对象
// 构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
</script>
</head>
<body>
</body>
</html>
2.3 利用构造函数创建对象
构造函数： 是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
在 js 中，使用构造函数要时要注意以下两点：
- 构造函数用于创建某一类对象，其 首字母要大写
- 构造函数要 和new一起使用 才有意义
注意
- 构造函数约定 首字母大写 。
- 函数内的 属性和方法前面 需要添加 this ，表示当前对象的属性和方法。
- 构造函数中 不需要 return 返回结果。
- 当我们创建对象的时候， 必须用 new 来调用构造函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20 - 利用构造函数创建对象</title>
<script>
// 利用构造函数创建对象
// 我们需要创建四大天王的对象 相同的属性: 名字 年龄 性别 相同的方法: 唱歌
// 构造函数的语法格式
// function 构造函数名() {
// this.属性 = 值;
// this.方法 = function() {}
// }
// new 构造函数名();
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang) {
console.log(sang);
}
}
var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
console.log(typeof ldh); // object
console.log(ldh.name); // 刘德华
console.log(ldh['sex']); // 男
ldh.sing('冰雨'); // 冰雨
var zxy = new Star('张学友', 19, '男');
console.log(zxy.name); // 张学友
console.log(zxy.age); // 19
zxy.sing('李香兰') // 李香兰
// 1. 构造函数名字首字母要大写
// 2. 我们构造函数不需要return 就可以返回结果
// 3. 我们调用构造函数 必须使用 new
// 4. 我们只要new Star() 调用函数就创建一个对象 ldh {}
// 5. 我们的属性和方法前面必须添加 this
</script>
</head>
<body>
</body>
</html>
练习： 请按照要求创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<script>
function Hero(name,type,blood){
this.name = name;
this.type = type;
this.blood = blood;
this.attack = function(mode){
console.log(mode);
}
}
var lianpo = new Hero('廉颇', '力量型', '500力量');
lianpo.attack('近战'); // 近战
console.log(lianpo.name); // 廉颇
var houyi = new Hero('后羿', '射手型', '100血量');
houyi.attack('远程'); // 远程
</script>
</head>
<body>
</body>
</html>
21 - 构造函数和对象
2.4 构造函数和对象
- 构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类(class)
- 创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21 - 构造函数和对象</title>
<script>
// 构造函数和对象
// 1. 构造函数 明星泛指的某一大类 它类似于 java 语言里面的 类(class)
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang) {
console.log(sang);
}
}
// 2. 对象 特指是一个具体的事物 刘德华 == {name: "刘德华", age: 18, sex: "男", sing: ƒ}
var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
console.log(ldh);
// 3. 我们利用构造函数创建对象的过程我们也称为对象的实例化
</script>
</head>
<body>
</body>
</html>
22 - new关键字执行过程
new 在执行时会做四件事情：
- 在内存中创建一个新的空对象。
- 让 this 指向这个新的对象。
- 执行构造函数里面的代码，给这个新对象添加属性和方法。
- 返回这个新对象（所以构造函数里面不需要return）。
New 和构造函数确认了眼神
- 他们俩生了一个宝宝。
- 这个宝宝必须是亲生的 this指向。
- 教孩子读书一肚子墨水。
- 长大挣钱回报父母
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>22 - new关键字执行过程</title>
<script>
// new关键字执行过程
// 1. new 构造函数可以在内存中创建了一个空的对象
// 2. this 就会指向刚才创建的空对象
// 3. 执行构造函数里面的代码 给这个空对象添加属性和方法
// 4. 返回这个对象
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang) {
console.log(sang);
}
}
var ldh = new Star('刘德华', 18, '男');
</script>
</head>
<body>
</body>
</html>
23 - 遍历对象
4. 遍历对象属性
for…in 语句 用于对数组或者对象的属性进行循环操作。
其语法如下：
for (变量 in 对象名字) {
// 在此执行代码
}
语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key 。
for (var k in obj) {
console.log(k); // 这里的 k 是属性名
console.log(obj[k]); // 这里的 obj[k] 是属性值
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>23 - 遍历对象</title>
<script>
// 遍历对象
var obj = {
name: 'pink老师',
age: 18,
sex: '男',
fn: function() {}
}
// console.log(obj.name);
// console.log(obj.age);
// console.log(obj.sex);
// for in 遍历我们的对象
// for (变量 in 对象) {
// }
for (var k in obj) {
console.log(k); // k 变量 输出 得到的是 属性名
console.log(obj[k]); // obj[k] 得到是 属性值
}
// 我们使用 for in 里面的变量 我们喜欢写 k 或者 key
</script>
</head>
<body>
</body>
</html>
小结
- 对象可以让代码结构更清晰
- 对象复杂数据类型object。
- 本质：对象就是一组无序的相关属性和方法的集合。
- 构造函数泛指某一大类，比如苹果，不管是红色苹果还是绿色苹果，都统称为苹果。
- 对象实例特指一个事物，比如这个苹果、正在给你们讲课的pink老师等。
- for…in 语句用于对对象的属性进行循环操作。
作业
1. 创建一个电脑对象，该对象要有颜色、重量、品牌、型号，可以看电影、听音乐、打游戏和敲代码。
var computer = {
color:'银白色',
weight:'2千克',
brand:'MacBookPro',
look:function(){
console.log('see a movie');
},
hear:function(){
console.log('listen to music');
},
play:function(){
console.log('Playing games');
},
knock:function(){
console.log('Knock code');
}
}
2. 创建一个按钮对象，该对象中需要包含宽，高，背景颜色和点击行为。
var button = new Object();
button.width = '100';
button.height = '100';
button.background = 'white';
button.click = function(){
console.log('点击你是pink');
}
console.log( button['height']); // 100
button.click(); // 点击你是pink
3. 创建一个车的对象，该对象要有重量、颜色、牌子，可以载人、拉货和耕田。
function Car(weight,color,brand){
this.weight = weight;
this.color = color;
this.brand = brand;
this.action = function(manned){
console.log(manned);
}
}
var BWM = new Car(4000,'red','BWM','载人');
var tuo = new Car(5900,'block','拖拉机','拉货');
// 遍历BWM
for(var k in BWM){
console.log(k + '：' + BWM[k]);
}
391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
