函数、作用域、预解析、对象

昨日复习
01 - arguments使用
- 5. arguments的使用
02 - 利用函数求任意个数的最大值
03 - 利用函数翻转数组
04 - 利用函数冒泡排序
05 - 利用函数判断闰年
06 - 函数是可以相互调用的
- 6. 函数案例
07 - 输出年份的2月份天数
08 - 函数的两种声明方式
- 7. 函数的两种声明方式
做一个简易计算器
---
09 - JavaScript作用域
- 1. 作用域
10 - 变量的作用域
- 2. 变量的作用域
11 - JavaScript没有块级作用域
12 - 作用域链
- 3. 作用域链
13 - 作用域链案例
---
14 - 预解析
- 1. 预解析
- 2. 变量预解析和函数预解析
15 - 预解析案例
---
- 1. 对象
16 - 利用对象字面量创建对象
- 2. 创建对象的三种方式
- - 2.1 利用字面量创建对象
- 练习：请按照要求写出对象
17 - 变量属性函数方法区别
18 - 利用new Object创建对象
- - 2.2 利用new Object创建对象
- 练习：请按照要求写出对象
19 - 我们为什么需要构造函数
20 - 利用构造函数创建对象
- 2.3 利用构造函数创建对象
- 练习：请按照要求创建对象
21 - 构造函数和对象
- 2.4 构造函数和对象
22 - new关键字执行过程
23 - 遍历对象
- 4. 遍历对象属性
- 小结
知识总结
- arguments使用
- 函数的两种声明方式
- JavaScript作用域
- 全局变量和局部变量
- 作用域链
- 预解析
- 什么是对象以及为什么需要对象
- 利用对象字面量创建对象
- 变量属性函数方法的区别
- 利用new Object创建对象
- 我们为什么需要构造函数
- 构造函数创建对象（上）
- new关键字执行过程
- 遍历对象
作业

昨日复习

数组的长度通过 length 属性获取
数组的索引值从 0 开始
数组arr中元素的最大索引值是 length - 1
声明函数的关键字是 function
函数的返回值的关键字是 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对象  而且是每个函数都内置好了这个argumentsfunction fn() {console.log(arguments); // 里面存储了所有传递过来的实参  arguments = [1,2,3]console.log(arguments.length); // 3 / 5console.log(arguments[2]); // 3 / 3// 我们可以按照数组的方式遍历argumentsfor (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)); // 3console.log(getMax(1, 2, 3, 4, 5)); // 5console.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)); // trueconsole.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); // 10function fn() {console.log(num); // 10}fn();// console.log(aru); // error// 2. 局部变量: 在局部作用域下的变量  后者在函数内部的变量就是 局部变量// 注意： 函数的形参也可以看做是局部变量function fun(aru) {var num1 = 10; // num1就是局部变量 只能在函数内部使用num2 = 20;}fun();// console.log(num1); // errorconsole.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>

12 - 作用域链

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的值? 4console.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 坑1var 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>// 案例1var num = 10;fun();function fun() {console.log(num); // 0var num = 20;}// 相当于执行了以下操作// var num;// function fun() {//     var num;//     console.log(num);//     num = 20;// }// num = 10;// fun();// // 案例2var num = 10;function fn() {console.log(num); // undefinedvar num = 20;console.log(num); // 20}fn();// 相当于以下代码// var num;// function fn() {//     var num;//     console.log(num);//     num = 20;//     console.log(num);// }// num = 10;// fn();// 案例3var a = 18;f1();function f1() {var b = 9;console.log(a); // undefinedconsole.log(b); // 9var a = '123';}// 相当于以下代码// var a;// function f1() {//     var b;//     var a;//     b = 9;//     console.log(a);//     console.log(b);//     a = '123';// }// a = 18;// f1();// 案例4f1();console.log(c); // 9console.log(b); // 9console.log(a); // errorfunction f1() {var a = b = c = 9;console.log(a); // 9console.log(b); // 9console.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>

20 - 利用构造函数创建对象

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); // objectconsole.log(ldh.name); // 刘德华console.log(ldh['sex']); // 男ldh.sing('冰雨'); // 冰雨var zxy = new Star('张学友', 19, '男');console.log(zxy.name); // 张学友console.log(zxy.age); // 19zxy.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 语句用于对对象的属性进行循环操作。

知识总结

arguments使用

arguments在什么地方使用？
arguments如何获取实参？

arguments在函数中可以使用，表示包含了当前函数调用时传入的实参
arguments通过索引值获取实参，索引值从开始，按顺序依次表示函数调用时传过来的实参

函数的两种声明方式

通过function关键字定义函数 — 命名函数
通过函数表达式定义函数 — 匿名函数
例：var fn = function( ) { };
1，fn是变量名，不是函数名
2，fn是变量，只不过变量存储的是函数
3，函数表达式创建的函数可以通过"变量名()"来调用
4，函数表达式也可以定义形参和调用传入实参

JavaScript作用域

什么是作用域？
作用域的基本作用是什么？
作用域的分类是哪两种？

作用域：代码名字（变量）在某个范围内起作用和效果
作用域的基本作用：为了提高程序的可靠性更重要的是减少命名冲突
作用域的分类：
全局作用域：整个script标签或者是一个单独的js文件
局部作用域：在函数内部就是局部作用域这个代码的名字只在函数内部起效果和作用

全局变量和局部变量

什么是全局变量？
什么是局部变量？

全局变量：全局作用域下声明的变量，在全局下都可以使用
注意：如果在函数内部没有声明直接赋值的变量也属于全局变量
局部变量：在局部作用域下声明的变量，在函数内部可以使用
注意：函数的形参也可以看做是局部变量

作用域链

什么是作用域链？

作用域链：当在某个作用域中访问某个变量时，如果当前作用域中没有该变量，则会依次向上访问上层作用域中的变量。

预解析

什么是预解析？
什么是变量预解析？
什么是函数预解析？
变量预解析和函数预解析的区别？

预解析：JS引擎会把当前作用域中的var和function提升到当前作用域的最前面执行
变量预解析（变量提升）：把当前作用域中变量声明提升到当前作用域最前面执行，但是只提升声明操作，不提升赋值操作
函数预解析（函数提升）：把当前作用域中函数声明提升到当前作用域的最前面执行，但不调用函数。

什么是对象以及为什么需要对象

什么是对象？
为什么要使用对象存储数据？好处有哪些？

对象：一个数据的集合，内部通过 “键值对” 的形式存储数据
利用对象存储数据的优势：对象内部存储的每个数据都有对象的 “键” 标识指向，对开发者来说能更直观直接的使用对象准确获取数据，数据存储结构清晰

利用对象字面量创建对象

如何创建对象？
创建对象的三个方法中哪种最简单易用？
如何获取对象的属性？
如何调用对象的方法？
如何修改对象的指定属性？
如何给对象追加属性？

如何创建对象？
通过“var obj = new Object()”、“var obj = { }”、构造函数等可以创建对象
创建对象的三个方法中哪种最简单易用？
通过对象的字面量可以快速方便地创建一个对象
如何获取对象的属性？
通过 对象.属性名或 对象['属性名']的方式来获取对象的指定的属性
如何调用对象的方法？
通过 对象.属性名()或 对象['属性名']()的方式来获取对象的指定的属性
如何修改对象的指定属性？
通过 对象.属性名 = 数据或 对象['属性名'] = 数据的形式修改属性值
如何给对象追加属性？
通过 对象.新属性名 = 数据或 对象['新属性名'] = 数据的形式增加属性

变量属性函数方法的区别

变量、对象的属性分别
函数、对象的方法分别

变量和属性：
变量：单独声明并赋值，使用方式"变量名"，单独存在
属性：在对象中定义，不需要声明的，使用方式"对象.属性"，存储在对象中
函数和方法：
函数：单独声明，调用方式"函数名()"，单独存在
方法：存储在对象中，调用方式"对象.方法()"，存储在对象中

利用new Object创建对象

使用 new Object 创建空对象对象
利用等号 = 赋值的方法添加对象的属性和方法

我们为什么需要构造函数

什么是构造函数？
构造函数的功能是什么？

构造函数：一个函数，用来创建对象的函数
构造函数的作用：创建对象
注意：构造函数是对某一类功能函数的特别叫法，本质仍是一个普通函数

构造函数创建对象（上）

构造函数的标准结构是什么？
构造函数的书写默认规范
构造函数的调用方式和普通函数的区别？
构造函数的名称必须要首字母大写吗？

构造函数的标准结构：

function 构造函数名() {this.属性 = 值; this.方法 = function() {}
}

构造函数的书写默认规范：
1.函数名字首字母要大写
2.不需要return
3.使用 new调用构造函数
4.使用this为新对象添加属性和方法
构造函数的调用方式和普通函数的区别？
本质没有什么分别，只不过功能特殊，如果使用new调用构造函数可以创建对象并返回
构造函数的名称必须要首字母大写吗？
不是必须要大写，为了使代码可读性更高，尽量使用首字母大写

new关键字执行过程

new的功能是什么？
函数在调用时，如果不使用new调用，会产生什么结果？

new的功能：
1.在内存中创建一个新的空对象。
2.让 this 指向这个新的对象。
3.执行构造函数里面的代码，给这个新对象添加属性和方法。
4.返回这个新对象（所以构造函数里面不需要return）。

遍历对象

什么是遍历对象？
如何遍历对象？

什么是遍历对象：
访问对象中所有属性
遍历对象的方式：
使用for-in遍历，具体格式为：

for (var k in obj) {console.log(k);console.log(obj[k]);
}

其中：k 表示遍历到的属性名称，obj[k] 表示遍历到的属性的值

作业

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]);
}

JavaScript基础第05天【笔记+代码】相关推荐

JavaScript基础第02天笔记
JavaScript基础第02天笔记一.DOM简单学习 1.功能: 控制HTML文档内容 2.代码: 通过ID值获取元素对象 document.getElementById("id值&qu ...
JavaScript基础教程速学笔记
JavaScript基础教程速学笔记 JavaScript简介 JavaScript 是 Web 的编程语言.(但是java与JavaScript的区别就是周杰与周杰伦的区别)所有现代的 HTML 页 ...
JavaScript基础学习、复习笔记
文章目录前言一.js基础知识 (变量.数据类型.运算符) 1.变量 1.1 声明变量及初始化 1.2 变量更新 1.3 变量语法拓展 1.4 变量命名 1.5 交换两个变量的值 2. 数据类型(重 ...
JavaScript基础第01天笔记
JavaScript基础第01天 1 - 编程语言 1.1 编程编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...
JavaScript基础第01天笔记——编程语言、计算机基础、JavaScript注释、JavaScript输入输出语句、变量的概念、变量的使用、数据类型、解释型语言和编译型语言、关键字和保留字
1 - 编程语言 1.1 编程编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌 ...
JavaScript基础第06天笔记
1 - 内置对象 1.1 内置对象 JavaScript 中的对象分为3种:自定义对象 .内置对象. 浏览器对象前面两种对象是JS 基础内容,属于 ECMAScript: 第三个浏览器对象 ...
JavaScript 基础优化（读书笔记）
1.带有 src 属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的 JavaScript 代码.如果包含了嵌入的代码,则 ...
JavaScript基础学习--05自定义属性、索引值
Demos: https://github.com/jiangheyan/JavaScriptBase 一.自定义属性 1.读写操作 <input abc="123" ...
JavaScript(基础、高级)笔记汇总表【尚硅谷JavaScript全套教程完整版】
目录前言 JavaScript(基础+高级)配套资料下载 JavaScript 基础学习地址学习笔记 day 05(P001-P006)[2016.11.22] day 06(P007-P ...

JavaScript基础第05天【笔记+代码】

函数、作用域、预解析、对象

昨日复习

01 - arguments使用

5. arguments的使用

02 - 利用函数求任意个数的最大值

03 - 利用函数翻转数组

04 - 利用函数冒泡排序

05 - 利用函数判断闰年

06 - 函数是可以相互调用的

6. 函数案例

07 - 输出年份的2月份天数

08 - 函数的两种声明方式

7. 函数的两种声明方式

做一个简易计算器

—

09 - JavaScript作用域

1. 作用域

10 - 变量的作用域

2. 变量的作用域

11 - JavaScript没有块级作用域

12 - 作用域链

3. 作用域链

13 - 作用域链案例

—

14 - 预解析

1. 预解析

2. 变量预解析和函数预解析

15 - 预解析案例

—

1. 对象

16 - 利用对象字面量创建对象

2. 创建对象的三种方式

2.1 利用字面量创建对象

练习：请按照要求写出对象

17 - 变量属性函数方法区别

18 - 利用new Object创建对象

2.2 利用new Object创建对象

练习： 请按照要求写出对象

19 - 我们为什么需要构造函数

20 - 利用构造函数创建对象

2.3 利用构造函数创建对象

练习： 请按照要求创建对象

21 - 构造函数和对象

2.4 构造函数和对象

22 - new关键字执行过程

23 - 遍历对象

4. 遍历对象属性

小结

知识总结

arguments使用

函数的两种声明方式

JavaScript作用域

全局变量和局部变量

作用域链

预解析

什么是对象以及为什么需要对象

利用对象字面量创建对象

变量属性函数方法的区别

利用new Object创建对象

我们为什么需要构造函数

构造函数创建对象（上）

new关键字执行过程

遍历对象

作业

JavaScript基础第05天【笔记+代码】相关推荐

最新文章

热门文章

练习：请按照要求写出对象

练习：请按照要求创建对象