zoukankan      html  css  js  c++  java

  • 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>

     

     

     

     

     
  • 相关阅读:
    Avira 去广告
    git 初步使用
    C语言中的取模符号讨论
    查看指定端口的进程
    fuck~disabled form
    编译器相关资源
    scheme 相关资源
    Binary search tree
    各种屏幕(包括手机)尺寸测试工具
    实现一个完整c++11编译器的认证
  • 原文地址：https://www.cnblogs.com/HiJackykun/p/11774404.html
Copyright © 2011-2022 走看看