03JavaScript程序设计修炼之道_ JS进阶 OOP、构造函数 2019-07/21-171247***0725-200514

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>

原文地址:https://www.cnblogs.com/HiJackykun/p/11774404.html

时间: 2024-10-15 13:08:14

03JavaScript程序设计修炼之道_ JS进阶 OOP、构造函数 2019-07/21-171247***0725-200514的相关文章

03JavaScript程序设计修炼之道 2019-05-19_14-33-19--05-19_15-09-07 js简介与基本使用、变量与常量

es.md JavaScript程序设计修炼之道 -前置知识 html5+css3 -课程大纲 1.客户端原生js(es6/es7/..) 2.js常用库 jq等 3.服务端js(node/express/koa) 4.前端js框架(vue/react/..) ... -课程地位 学好js,走遍天下都不怕,是web前端或web全栈开发最重要最核心的技术,直接决定职业收入和发展 客户端原生javascript(es5/es6/es7/...) js简介与基本使用 html 标记语言 css jav

03JavaScript程序设计修炼之道 2019-06-09_fe-js-053Math对象_ Date对象、es6对象新变化

36Date.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib

03JavaScript程序设计修炼之道 2019-06-23_15-50-11 验证码

1.png tool.js function rand(min,max) { return Math.round(Math.random()*(max-min)+min); } function $(id){ return document.getElementById(id); } 验证码.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/

03JavaScript程序设计修炼之道 2019-06-27_20-04-17 节点元素操作:复制

15clone.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati

03JavaScript程序设计修炼之道 2019-06-25_20-34-21-2019-06-25_20-44-06 节点元素的操作:增删改

14nodeOper.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp

03JavaScript程序设计修炼之道 2019-05-23_20-28-51_2019-05-26_21-12-07 for、练习、hw

16for.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl

03JavaScript程序设计修炼之道_2019-06-18_20-07-52_ 02-DOM fisrt学习(同前面已更新)

dom-md ## Dom Document object model 文档对象模型 Dom树 html | head body | | meta title div | ul | li li li 在js世界中,把dom树的每个元素都看成一个对象,对象就有属性和方法 dom学什么 dom节点操作 查找元素 元素增删改查 样式操作 事件绑定等 ## 事件 三要素 1 事件源 谁身上发生了事件 2 事件 具体的行为 如单击.鼠标悬停.键盘按下... 3 事件处理 事件发生后导致什么结果 唐三藏念紧

03JavaScript程序设计修炼之道_2019-07-02_21-47-36_ 鼠标弹起拖拽、放大镜、mouseenter&amp;mouseleave、

26drag.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib

03JavaScript程序设计修炼之道-2019-06-18_20-07-52-Dom 文档对象模型

原文地址:https://www.cnblogs.com/HiJackykun/p/11053883.html