note.txt
js进阶部分
1 变量及其作用域
全局变量 局部变量 作用域 作用域链
let/var 区别
const 定义常量
2 异步专题
回调函数 同步异步
es6 Promise(使用和手写实现)
3 oop
原型 原型链 面向对象 。。。
es6 class 等
4 闭包
5 面试题
...
note.md
1 变量与常量 var a = 10; var一些问题 * var重复定义 会覆盖 * 没有块级作用域 * 变量会自动提升 es6 let/const * 重复定义会报错 * 具有块级作用域 * 不存在预解析 建议多使用let const定义常量 希望某个值不希望被修改 不能重新赋值
2 javascript是什么 解释执行 预解析 1 全局预解析（所有变量和函数声明都会提升 同名函数与变量函数的优先级高） 2 函数内部预解析
执行
头等函数(First-class Function) 动态 执行环境 浏览器宿主 node 编程范式 基于原型 多范式
3 oop
对象 狭义对象 {} 广义对象 dom元素、Array、Math...... json
{ "name":"along", "sex":"M" }
1let&const.htm
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <script>
11 /* var重复定义 会覆盖
12 var a = 10;
13 var a = 20;
14 console.log(a);
15
16 if(true) {
17 var num = 100;
18 }
19 console.log(num); // 仍然可以访问
20 */
21 // let a = 10;
22 // let a = 20;
23 /*
24 for(var i=0; i<3; i++) {
25 setTimeout(()=>{
26 console.log(i);
27 },0);
28 }
29 */
30 /*
31 for(let i=0; i<3; i++) {
32 setTimeout(()=>{
33 console.log(i);
34 },0);
35 }
36 let a = 20;
37 if(true) {
38 let a = 10; // 不会污染全局
39 console.log(++a);
40 }
41 console.log(a);
42 */
43
44 /*
45 console.log(a); // undefined
46 var a = 10;
47 变量提升 变量的声明会提升
48 var a;
49 console.log(a);
50 a = 10
51 */
52 // console.log(a); // 报错
53 // let a = 10;
54
55 const MY_NAME = "along";
56 //MY_NAME = "awei"; // 报错不能重新赋值
57 const arr = ['beijing'];
58 arr.push("shanghai");
59 const obj = {
60 a: 1,
61 b:2
62 }
63 obj.c = 4;
64 console.log(obj);
65 obj = {}
66
67 </script>
68 </body>
69 </html>
2js.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <script>
11
12 function a() {
13 console.log(123);
14 }
15 var a = ()=>{
16 console.log(456);
17
18 }
19
20 a();
21
22
23 </script>
24 </body>
25 </html>
3object.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10
11 <script>
12 // 描述一个人 姓名 家庭住址 身份证号
13 var p1 = {
14 name: "zhangsan",
15 address: "北京市海淀区",
16 id:"10212000"
17 }
18 var p2 = {
19 name: "lisi",
20 address: "武汉市",
21 id:"10267400"
22 }
23 console.log(p1.id);
24 console.log(p2.address);
25 // oop
26
27 function Person(name,address,id) {
28 this.name = name;
29 this.address = address;
30 this.id = id;
31 this.printMsg = function() {
32 console.log(this.name,this.address,this.id);
33 }
34 }
35
36 let zs = new Person("zs","beijing","123456");
37 let ls = new Person("ls","shanghai","453456");
38 zs.printMsg();
39 </script>
40 </body>
41 </html>
4creatObj.html
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 </head>
10
11 <body>
12 <script>
13 // 1 通过new Object()
14 let country = new Object(); // 空对象
15 country.name = "china";
16 country.population = 13;
17 country.area = "Asia";
18
19 country.work = function () {
20 console.log("hard working");
21 }
22
23 // 2 {} 对象直接量
24 let p1 = {
25 name: "zhangsan",
26 address: "北京市海淀区",
27 id: "10212000"
28 }
29 let p2 = {
30 name: "lisi",
31 address: "武汉市",
32 id: "10267400"
33 }
34 let p3 = {};
35
36 // 3 工厂函数
37 function createPerson(name,address,id) {
38 var o = {};
39 o.name = name;
40 o.address = address;
41 o.id = id;
42 o.study = function() {
43 console.log("学到老 活到老");
44 }
45 return o;
46 }
47
48 let lily = createPerson("lily","America","Aasdf123");
49 console.log(typeof lily);
50 console.log(lily instanceof createPerson); // false
51
52
53
54 </script>
55 </body>
56
57 </html>
5constructor.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <script>
11 // new Date() new String()
12 // 构造函数 本质上也是普通函数
13 function Person(name,address,id) {
14 this.name = name;
15 this.address = address;
16 this.id = id;
17
18 this.study = function() {
19 console.log("学习有方法");
20 }
21 }
22 //let p1 = Person("lucy","canada","aui8");// p1 undefined
23 let p1 =new Person("lucy","canada","aui8");
24 console.log(p1 instanceof Person);
25
26 /*
27 构造函数 是希望别人将来通过new方式去调用，通过new方式调用
28 会返回一个对象 所以叫构造函数
29
30 new调用构造函数 内部发生了什么
31 1 实参传给形参
32 2 在内存中创建一个对象 {},并且让函数内部的this执向这个对象
33 3 执行函数体 {name:...,address:...,id:...,study:func..}
34 4 返回这个对象
35 */
36
37 </script>
38 </body>
39 </html>
6构造函数.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <script>
11 function Animal(name,type) {
12 this.name = name;
13 this.type = type;
14 this.sleep = function() {
15 console.log("I am sleeping");
16 }
17 }
18 let xiaohua = new Animal("xiaohua","dog"); // 实例
19 console.log(typeof xiaohua); // object
20 console.log(xiaohua instanceof Animal); // true instanceof具体对象的类型
21 console.log([] instanceof Array); // true
22 console.log(xiaohua.constructor); // 构造函数或构造器
23
24
25 </script>
26 </body>
27 </html>