devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JS高级_高级js

作者：花生_TL007 | 2024-04-17 03:20:13

赞

踩

高级js

01-课程介绍

1.1-课程特点

  • 1.js高级是对js基础语法的一个补充说明，本质上还是对ECMAScript语法的一个延伸与进阶
  • 2.js高级所要学习的语法相比而言没有js基础的多，但是会更加晦涩难懂
    • 更加侧重的是理解(不求甚解)

1.2-课程大纲

  • 1.对象进阶 （2天）
  • 2.函数进阶 ( 1天 )
  • 3.ES6新语法( 1天 )

02-面向对象编程

1.1-面向对象编程介绍

  • 本小节知识点
    • 1.理解什么是面向对象编程
      • 面向对象不是一门技术，而是一种解决问题的思维方式
      • 面向对象的本质是对面向过程的一种封装
    • 2.理解什么是对象
      • 对象的本质是程序代码与现实世界沟通的一座桥梁。它有两种含义
        • 对象：是一种数据类型（存储数据的容器），以键值对的形式存储数据
        • 对象：对现实世界实物的一种抽象。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    
<script>
    /*1.面向对象编程与面向过程编程并不是一门技术，而是一种解决问题的思路和方式
            面向对象：注重的是结果
            面向过程：注重的是过程
     */

    //举例：做饭
    //1.1 面向过程：注重的是过程
    //买菜
    //洗菜
    //切菜
    //开火热锅
    //放油
    //把菜放到锅里炒
    //放盐，醋，酱油
    //把菜装到盘子里

    //1.2 面向对象：注重的是结果
    //不想自己做，找一个专业的对象来解决
    //地沟油一条街的厨师们

    /*是不是有了面向对象就不需要面向过程了呢？，不是，面向对象其实是对面向过程的一个封装 */

    /*2.理解什么是对象*/

    //2.1 对象是对单个实物的抽象     --------万物皆对象
    /*
    一台车： 特征：品牌 价格 颜色 轮子数量              行为：加速  刹车
    一个人： 特征：姓名 身高 年龄 性别                     行为：吃饭 睡觉 敲代码
    一条狗： 特征：品种 颜色  性别                            行为：拉屎 撒尿  打招呼
     */

    //2.2  对象是一个存储数据的容器    ------------键值对的形式存储数据
    let student = {
        name:'张三',
        age:18,
        eat:function (  ) {
            console.log ( "大吉大利，今晚吃鸡" );
        }
    }

    //2.3 如何寻找对象：名词提炼法
    //小明在公交车上牵着一条叼着热狗的狗

</script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

1.2-面向对象编程举例01

本小节知识点：

  • 1.以一个简单示例介绍面向对象编程的好处
  • 2.体会面向对象思维方式与面向过程的不同之处
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 50px;
            margin-top: 20px;
            background-color: greenyellow;
        }

        p{
            height: 50px;
            margin-top: 20px;
            background-color: hotpink;
        }
    </style>
</head>
<body>

<div></div>
<div></div>
<div></div>
<p></p>
<p></p>
<p></p>

<script>
    //需求：给三个div和p标签设置边框

    //一：以前做法: 面向过程
    //弊端：（1）获取元素代码过长  （2）两个for循环，代码冗余   （3）不便于维护
    //1.获取页面元素
    // let divList = document.getElementsByTagName('div');
    // let pList = document.getElementsByTagName('p');
    // //2.遍历数组每一个元素，设置边框
    // for(let i = 0;i<divList.length;i++){
    //     divList[i].style.border = '10px solid red';
    // }
    // for(let i = 0;i<pList.length;i++){
    //     pList[i].style.border = '10px solid red';
    // }

    //二：使用函数封装
    // //好处：代码复用     弊端：函数名是全局变量，会造成全局变量污染
    // let divList = tagName('div');
    // let pList = tagName('p');
    // setStyle(divList,'10px solid red');
    // setStyle(pList,'10px solid red');
    //
    //
    // function tagName ( name ) {
    //     return document.getElementsByTagName(name);
    // }
    //
    // function setStyle ( eles,value ) {
    //     for(let i = 0;i<eles.length;i++){
    //         eles[i].style.border = value;
    //     }
    // }

    //三：使用对象封装
    //好处：（1）便于维护，以后添加修改方法很方便   （2）避免全局变量污染
    let obj = {
        tagName:function ( name ) {
            return document.getElementsByTagName(name);
        },
        setStyle:function ( eles,value ) {
            for(let i = 0;i<eles.length;i++){
                eles[i].style.border = value;
            };
        }
    };

    let divList = obj.tagName('div');
    let pList = obj.tagName('p');
    obj.setStyle(divList,'10px solid red');
    obj.setStyle(pList,'10px solid red');
</script>
</body>
</html> 

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82

1.3-面向对象编程举例02

本小节知识点

  • 介绍在以后的开发中，面向对象的应用场景
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 50px;
            margin-top: 20px;
            background-color: greenyellow;
        }

        p{
            height: 50px;
            margin-top: 20px;
            background-color: hotpink;
        }
    </style>
</head>
<body>

<div></div>
<div></div>
<div></div>
<p></p>
<p></p>
<p></p>

<!--这是下个阶段要学习的第三方框架-->
<script src="jquery-1.12.4.js"></script>
<script>
    //需求：给三个div和p标签设置边框
    $('div,p').css('border','10px solid green');

    /*面向对象编程
    以后开发中，如果要实现一个需求，先看有没有现成的专业的对象来解决这个需求，如果有就直接拿来用，没有就自己造一个专业的对象
    别人造好的对象： 快捷方便，但是不好维护
    自己造的对象：  好维护，但是耗费时间和精力
     */
</script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

04-内置对象api

  • 学习传送门：https://www.runoob.com/jsref/jsref-obj-array.html
  • 内置对象api： js作者提前写好的对象，里面有一些预先定义的方法，我们直接使用即可，无需关心原理
    • api : 预先定义的函数
  • 学习内置对象： 不需要死记硬背，忘记了随时查阅文档。 用多了自然就记住了，熟能生巧

1.1-数组对象api

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>

<script>
    //声明数组
    let arr = [10,20,30]

    /*1.数组的增删改查操作 
    新增元素到最后面 ： arr.push( 元素 )
    新增元素到最前面 ： arr.unshift()
    删除最后一个元素 ： arr.pop()
    删除第一个元素   ： arr.shift()
    删除指定位置元素 ： arr.splice(起始下标,删除数量)
     */

    //2.将数组中的每一个元素都拼接成一个字符串
    let str = arr.join()//10,20,30
    console.log ( str )

    //3.翻转数组
    var newArr =  arr.reverse()
    console.log ( newArr )//[100,20,10]

    //4.数组排序
    let arr1 = [10,20,70,40,50,60]
    //数组排序方法的参数是一个回调函数：告诉数组内置对象你的排序规则
    //从小到大排序
    arr1.sort(function (a,b)
    {
        return a - b
    });

    console.log ( arr1 )//从小到大
    
</script>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

1.2-字符串对象api

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>

<script>
    

    let str = "黑马颜值担当坤哥我爱你么么哒!";
    
    //1 判断一个字符串在不在某个字符串里面
    let index1 = str.indexOf("黑马")//如果存在，则返回参数字符串首字母所在的下标
    let index2 = str.indexOf("坤")
    let index3 = str.indexOf("黑坤")//如果不存在，则返回 -1
    console.log ( index1, index2, index3 )//0,6,-1

    //2 截取字符串  第一个参数：从哪个下标开始截取  第二个参数：截取的长度
    let str1 = str.substr(2,4)//颜值担当
    console.log ( str1 )
    
    //3  修改字符串  第一个参数：要修改的字符串  第二个参数：修改后的字符串
    let str2 = str.replace("黑马","传智播客")
    console.log ( str2 )//传智播客颜值担当坤哥我爱你么么哒!

    //4 分隔字符串:将字符串按照指定的符号分隔，得到一个数组
    let str3 = "我&爱&你"
    //这个函数的返回值一定是一个数组
    let arry = str3.split("&")//以&符号分隔字符串  [我,爱,你]
    console.log ( arry )// [我,爱,你]
    
    //5 大小写转换  (只有英文才有大小写，中文不存在大小写)
    console.log ( "AKlkshflsLKJHDHL".toLowerCase () )//转为小写 aklkshflslkjhdhl
    console.log ( "AKlkshflsLKJHDHL".toUpperCase () )//转为大写  AKLKSHFLSLKJHDHL
    console.log ( "中文不存在大小写".toLowerCase () )//转为小写
    

</script>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

05-原型对象

1.1-构造函数new的工作原理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AmhisuqN-1650269184916)(day01.assets/1000.gif)]

1.1.1-了解工厂函数

  • 工厂函数：用于批量创建对象的函数
<!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-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 
        1.面向对象 ： 是一种注重结果的思维方式
            面向对象思维 ： 注重结果
            面向过程思维 ： 注重过程

        2.面向对象 与 面向过程的关系
            * 面向对象本质 ： 对面向过程的一种封装

        3.构造函数创建对象（new关键字四个工作流程）
        */

      /*学习路线 
        1.介绍创建多个对象需求
        2.介绍函数封装来创建多个对象 （工厂函数）
        3.引入最终目标： 构造函数
         */

      //1.需求：创建3个人对象 （姓名name,年龄age,性别sex）
      //弊端：（1）代码冗余  （2）维护不便
      // let person1 = {
      //     name:'ikun',
      //     age:32,
      //     sex:'男'
      // }

      // let person2 = {
      //     name:'班长',
      //     age:38,
      //     sex:'男'
      // }

      // let person3 = {
      //     name:'王悦',
      //     age:28,
      //     sex:'男'
      // }

      //2.使用函数创建对象 : 解决创建多个对象代码冗余
      //工厂函数 ： 
      function createPerson (name, age, sex) {
        //(1)创建空对象
        let p = {}
        //(2)对象赋值
        p.name = name
        p.age = age
        p.sex = sex
        //(3)返回创建好的对象
        return p
      }

      let p1 = createPerson('ikun', 32, '男')
      let p2 = createPerson('班长', 38, '男')
      let p3 = createPerson('王悦', 28, '男')
      console.log(p1, p2, p3)

    </script>
  </body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69

1.1.2-重点构造函数

<!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-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 
        1.面向对象 ： 是一种注重结果的思维方式
            面向对象思维 ： 注重结果
            面向过程思维 ： 注重过程

        2.面向对象 与 面向过程的关系
            * 面向对象本质 ： 对面向过程的一种封装

        3.构造函数创建对象（new关键字四个工作流程）
        构造函数： 使用new关键字调用的函数
            (1)创建空对象
            (2)this指向这个对象
            (3)对象赋值
            (4)返回对象
            
        */

      /*学习路线 
        1.介绍创建多个对象需求
        2.介绍函数封装来创建多个对象 （工厂函数）
        3.引入最终目标： 构造函数
         */

      //2.使用函数创建对象 : 解决创建多个对象代码冗余
      //工厂函数 ： 创建对象
      function createPerson (name, age, sex) {
        //(1)创建空对象
        let p = {}
        //(2)对象赋值
        p.name = name
        p.age = age
        p.sex = sex
        //(3)返回创建好的对象
        return p
      }

      let p1 = createPerson('ikun', 32, '男')
      let p2 = createPerson('班长', 38, '男')
      let p3 = createPerson('王悦', 28, '男')
      console.log(p1, p2, p3)

      /*构造函数作用与工厂函数一致，都是创建对象。但是构造函数代码更加简洁
      1.构造函数 ： 使用new关键字调用一个函数
      
      */
      function Person (name, age, sex) {
        //(1)创建空对象  {}
        //(2)将this指向这个对象  this = {}
        //(3)对象赋值
        this.name = name
        this.age = age
        this.sex = sex
        //(4)返回这个对象  return this
      }

      let person1 = new Person('ikun', 32, '男')
      let person2 = new Person('班长', 38, '男')
      let person3 = new Person('王悦', 28, '男')
      console.log(person1, person2, person3)

      /* 声明一个空函数 */
    //   function fn () {}

    //   let res1 = fn() //普通函数
    //   let res2 = new fn() //构造函数
    //   console.log(res1, res2)
    </script>
  </body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80

1.2-原型对象

  • 本小节知识点：原型对象
    • 原型：任何构造函数在被创建的时候，系统都会自动帮我们创建一个与之对应的对象，称之为原型对象
      • 同时解决内存浪费与全局变量污染的问题
    • 谁可以访问原型对象中的成员(属性和方法)
      • 构造函数自身：构造函数名.prototype
      • 构造函数实例化的每一个对象：点语法直接访问

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zEljVkmO-1650269184917)(day01.assets/1001.gif)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-36SLueMU-1650269184917)(day01.assets/1001.jpg)]

<!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-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        1.学习目标
            a. 原型 ：每一个函数被创建的时候，系统都会自动创建与之对应的对象，称之为原型对象
            b. 作用： 解决 构造函数   （1）内存资源浪费 （2）全局变量污染
            c. 怎么用： （1）构造函数.prototype  (2)实例化对象直接访问

        2.学习路线
            (1)复习js构造函数new的工作原理
            (2)引出构造函数的弊端 ： 浪费内存性能
            (3)引出解决方案 ： 函数 ->全局变量污染
            (4)引出对象 -> 内存资源浪费 + 全局变量污染
            (5)引出原型对象
        
        */  
        

        //1.构造函数 ：  调用一个函数使用了new关键字
        // 构造函数中的方法 弊端 ： 浪费内存资源

        /*new关键字工作原理 
            //(1)创建空对象  {}
            //(2)this指向这个对象 this = {}
            //(3)执行赋值代码
            //(4)返回这个对象  return this
        */
        // function Person(name,age){
        //     //(1)创建空对象  {}
        //     //(2)this指向这个对象 this = {}
        //     //(3)执行赋值代码
        //     //(4)返回这个对象  return this
        //     this.name = name;
        //     this.age = age;
        //     this.sayHi = function(){
        //         console.log('猴赛雷呀，我爱坤坤哟');
        //     }
        // };

        // let p1 =  new Person('班长',28);
        // console.log(p1);
        // p1.sayHi();

        // let p2 = new Person('班花',18);
        // p2.sayHi();
        // //每一个对象的方法都不是同一个
        // console.log(p1.sayHi == p2.sayHi);//false


        //2. 使用全局函数 ： 解决内存资源浪费问题

        //弊端 ： 全局变量污染的问题

        // function fn(){
        //     console.log('猴赛雷呀，我爱坤坤哟');
        // };

        // function eat(){
        //     console.log('中午我要以面向对象的形式吃个饭'); 
        // };

        // function Person(name,age){
        //     //(1)创建空对象  {}
        //     //(2)this指向这个对象 this = {}
        //     //(3)执行赋值代码
        //     //(4)返回这个对象  return this
        //     this.name = name;
        //     this.age = age;
        //     this.sayHi = fn;
        //     this.eat = eat;
        // };

        // let p1 =  new Person('班长',28);
        // console.log(p1);
        // p1.sayHi();

        // let p2 = new Person('班花',18);
        // p2.sayHi();
     
        // console.log(p1.sayHi == p2.sayHi);//true



        //3.使用对象 解决 ： （1）解决内存资源浪费  （2）全局变量污染
        //弊端 ： 对象自身还是全局的，造成新的全局变量污染

        // let obj = {
        //     fn:function(){
        //         console.log('猴赛雷呀，我爱坤坤哟');
        //     },
        //     eat:function(){
        //         console.log('中午我要以面向对象的形式吃个饭'); 
        //     }
        // }
        

        // function Person(name,age){
        //     //(1)创建空对象  {}
        //     //(2)this指向这个对象 this = {}
        //     //(3)执行赋值代码
        //     //(4)返回这个对象  return this
        //     this.name = name;
        //     this.age = age;
        //     this.sayHi = obj.fn;
        //     this.eat = obj.eat;
        // };

        // let p1 =  new Person('班长',28);
        // console.log(p1);
        // p1.sayHi();

        // let p2 = new Person('班花',18);
        // p2.sayHi();
     
        // console.log(p1.sayHi == p2.sayHi);//true


        /*     4.使用原型 ：             */
        
        /* 4.1 原型 ： 每一个构造函数在声明的时候，系统会自动的创建一个与之对应的对象，
        称之为原型对象
        */
        function Person(name,age){
            this.name = name;
            this.age = age;
        };

        /*4.2 如何获取原型对象 
            每一个函数都有一个 prototype 属性，指向这个原型对象
        */
       console.log(Person.prototype);

       /* 
       4.3 既然原型是一个对象 ： 用于存储数据
       */
      Person.prototype.sayHi = function(){
          console.log('坤坤我爱你');
          
      };

      /* 
      4.4 谁可以访问 原型中的成员（属性+方法）
        a. 构造函数自身 ： 构造函数名.prototype
        b. 这个构造函数所创建(实例化)的每一个对象
      */
     // 实例化对象
     let p1 = new Person('班长',18);
     p1.sayHi();

     //实例化对象
     let p2 = new Person('班花',20);
     p2.sayHi();

     console.log(p1.sayHi === p2.sayHi);//true
     
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166

1.3- ______proto______属性介绍

本小节知识点：proto属性介绍

  • 1.属于对象，指向实例化这个对象的构造函数对应的原型
  • 2.proto属性不是W3C的标准属性，所以实际开发中一般不会使用它来访问原型
    • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto
    • 往原型添加属性方法，最好使用构造函数来访问构造函数名.prototype

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SyxNkGsS-1650269184918)(day01.assets/1002.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-814qWPik-1650269184918)(day01.assets/1101.jpg)]

<!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-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
       /* 
        1.prototype属性： 属于构造函数，指向原型对象
            * 作用： 解决构造函数资源浪费+变量污染
        2.__proto__属性： 属于实例对象，指向原型对象
            * 作用： 可以让实例对象访问原型中的成员
        */

      //1.构造函数
      function Person (name, age) {
        this.name = name
        this.age = age
      }

      //2.原型对象
      Person.prototype.eat = function () {
        console.log('我中午真的吃了红烧武昌鱼')
      }
      Person.prototype.country = '中国人'

      //3.实例对象
      let p1 = new Person('班长', 28)
      console.log(p1)

      /* 
      __proto__ : 属于实例对象,指向原型对象
      */
     console.log( Person.prototype === p1.__proto__ )//true

     //实例对象为什么可以直接访问原型中的成员，其实都是通过__proto__来访问的
     /* 
     1.虽然实例对象可以直接访问原型的原理是 __proto__,但是开发中不推荐使用
     2.原因： __proto__不是ECMA标准语法，有一些浏览器不支持。
     3.结论： 学习阶段，学习原型可以用__proto__. 实际开发中，建议省略__proto__
     */
     p1.eat()//p1.__proto__.eat()
     
      
    </script>
  </body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

1.4-constructor属性介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nEGhaqpn-1650269184918)(day01.assets/1301.jpg)]

<!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-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
        /* 
        1. prototype : 属于构造函数，指向原型对象
            * 作用：解决资源浪费+变量污染 
        2.__proto__ : 属于实例对象，指向原型对象
            * 作用： 可以让实例对象访问原型中的成员
        3.constructor: 属于原型对象，指向构造函数
            * 作用： 可以让实例对象 知道自己被哪一个构造函数创建的
        */

      //1.构造函数
      function Person (name, age) {
        this.name = name
        this.age = age
      }

      //2.原型对象
      Person.prototype.type = '哺乳动物'
      Person.prototype.eat = function () {
        console.log('吃东西')
      }

      //3.实例对象
      let p1 = new Person('布丁', 3)
      p1.eat()
      console.log(p1.type)

      /* 
      constructor : 属于原型对象，指向构造函数
        作用：可以让实例对象知道自己被那个构造函数创建的
      */
      console.log(Person.prototype.constructor)//Person
      console.log(Person.prototype.constructor === Person )//true
      console.log( p1.constructor )//Person p1.__proto__.constructor
      


    </script>
  </body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

1.5-静态成员与实例成员

<!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-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        构造函数也可以有自己的属性： 例如prototype

        静态成员 ： 属于函数对象的成员
        实例成员： 属于实例化对象的成员
         */

        //构造函数
         function Person(name,age){
            this.name = name;
            this.age = age;
        };

        Person.aaa = '啊啊啊';
        console.log(Person.aaa);//静态成员
        

        //实例化对象
        let p1 = new Person('张三',20);

        console.log(p1.name);//实例成员
        console.log(p1.age);//实例成员
        
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

第一天学习总结

  • 1.什么是面向对象？
    • 面向对象不是一门技术，而是编程的一种思维方式。
  • 2.面向对象与面向过程区别
    • 面向过程：注重的是过程(实现某一个功能的逻辑,12345步)
    • 面向对象：注重的是结果（能一行代码搞定，尽量一行代码搞定）
      • 面向对象的本质其实是对面向过程的一个封装（将面向过程的逻辑步骤封装到对象中，然后一行代码搞定）
  • 3.如何学习面向对象？
    • a.理解对象
    • b.了解并学习面向对象的三大特征

1.2-原型对象

  • 1.什么是原型？
    • 任何构造函数在被创建的时候，系统都会自动帮我们创建一个与之对应的对象，称之为原型对象
  • 2.如何访问原型对象
    • 构造函数名.prototype
  • 3.哪些对象可以访问原型？
    • a.构造函数自身
    • b.该原型对应的构造函数实例化出来的对象
  • 4.proto属性介绍
    • 属于对象，指向实例化这个对象的构造函数对应的原型
    • proto属性不是W3C的标准属性，所以实际开发中一般不会使用它来访问原型
  • 6.constructor属性介绍
    • 属于原型对象，指向这个原型对应的构造函数
    • 作用:可以得知某个实例对象，到底是由哪一个构造函数生成的

1.3-js基础语法复习（课后了解）

  • 1.数据类型
    • 基本数据类型：number、string、boolean、undefined、null
    • 复杂数据类型：object（包含三种子数据类型）
      • 无序存储对象object: {}
      • 有序存储数组array: []
      • 函数function: function
    • 内置对象：属于object类型，是js作者提前写好的对象，里面存储了一些属性和方法，方便开发者直接使用
      • Math：数学对象
      • Date：日期对象
      • Function：函数对象
      • RegExp：正则表达式
      • Array：数组对象
      • String ：string对象
      • Boolean ：boolean对象
      • Number ：number对象
  • 2.值类型与引用类型
    • a.值类型（基本数据类型）:栈中存储的是数据，赋值拷贝的是数据，修改拷贝后的数据对原数据没有影响
    • b.引用类型（复杂数据类型）：栈中存储的是地址，数据存在堆中，赋值拷贝的是地址，修改拷贝后的数据对原数据有影响
  • 3.in关键字三个作用
    • a.for-in循环遍历对象属性
    • b.判断对象能够访问某个属性
      • 语法： 属性名字符串 in 对象名
    • c.判断数组是否包含某个下标
      • 语法： 下标 in 数组名
      • 判断数组是否包含某元素，可以使用:数组名.indexOf(元素)
  • 4.delete关键字两个作用
    • a.删除对象的属性 ： delete 对象名.属性名
    • b.删除没有使用let声明的变量
  • 5.与=的区别
    • a.===:全等运算符
      • 严格匹配，值与数据类型必须要同时相等
    • b.==:相等运算符
      • 不严格匹配，当左右两边数据类型不一致的时候允许数据类型转换，分为五种情况（x == y）
        • （1）当x与y都为null或者undefined, 返回true
        • （2）当x或y为NaN,返回false
        • （3）当x或y都为：string，number，boolean。且数据类型不一致的时候，此时会隐式转换成number后比较
        • （4）如果x或y存在对象类型，则会转为原始值后比较
        • （5）x与y都为对象类型，则比较它们的引用地址。如果同一个地址则为true，不同地址则为false

今天学习重点梳理(给同学做总结和面试用)

  • 1.new关键字四个工作流程（必须记住）

    • 1.创建一个空对象
    • 2.this指向这个对象
    • 3.对象赋值
    • 4.返回这个对象

  • 2.构造函数、原型对象、实例对象三者关系（说的出来）

    • 构造函数有一个属性prototype，指向自己的原型对象
    • 实例对象有一个属性__proto__指向自己的原型对象
    • 原型对象有一个属性constructor，指向自己的构造函数

：string对象
* Boolean ：boolean对象
* Number ：number对象

  • 2.值类型与引用类型
    • a.值类型（基本数据类型）:栈中存储的是数据，赋值拷贝的是数据，修改拷贝后的数据对原数据没有影响
    • b.引用类型（复杂数据类型）：栈中存储的是地址，数据存在堆中，赋值拷贝的是地址，修改拷贝后的数据对原数据有影响
  • 3.in关键字三个作用
    • a.for-in循环遍历对象属性
    • b.判断对象能够访问某个属性
      • 语法： 属性名字符串 in 对象名
    • c.判断数组是否包含某个下标
      • 语法： 下标 in 数组名
      • 判断数组是否包含某元素，可以使用:数组名.indexOf(元素)
  • 4.delete关键字两个作用
    • a.删除对象的属性 ： delete 对象名.属性名
    • b.删除没有使用let声明的变量
  • 5.与=的区别
    • a.===:全等运算符
      • 严格匹配，值与数据类型必须要同时相等
    • b.==:相等运算符
      • 不严格匹配，当左右两边数据类型不一致的时候允许数据类型转换，分为五种情况（x == y）
        • （1）当x与y都为null或者undefined, 返回true
        • （2）当x或y为NaN,返回false
        • （3）当x或y都为：string，number，boolean。且数据类型不一致的时候，此时会隐式转换成number后比较
        • （4）如果x或y存在对象类型，则会转为原始值后比较
        • （5）x与y都为对象类型，则比较它们的引用地址。如果同一个地址则为true，不同地址则为false

今天学习重点梳理(给同学做总结和面试用)

  • 1.new关键字四个工作流程（必须记住）

    • 1.创建一个空对象
    • 2.this指向这个对象
    • 3.对象赋值
    • 4.返回这个对象

  • 2.构造函数、原型对象、实例对象三者关系（说的出来）

    • 构造函数有一个属性prototype，指向自己的原型对象
    • 实例对象有一个属性__proto__指向自己的原型对象
    • 原型对象有一个属性constructor，指向自己的构造函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0kuxW1dS-1650269184919)(day01.assets/1588083693450.png)]

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/437914
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号