JS高级进阶总结day01---面向对象编程介绍,new的工作原理以及构造函数,原型对象,实力函数三者之间的关系

最新推荐文章于 2024-07-08 16:22:29 发布
最新推荐文章于 2024-07-08 16:22:29 发布
阅读量340 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40630195/article/details/122224940
版权

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-面向对象编程举例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.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>

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-字符串对象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,5,-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>

05-原型对象

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

在这里插入图片描述

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:'kiki',
      //     age:18,
      //     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('kiki', 18, '女')
      let p2 = createPerson('班长', 38, '男')
      let p3 = createPerson('王悦', 28, '男')
      console.log(p1, p2, p3)

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

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)返回对象
             注意:如果修改构造函数中的return的值,返回值为引用类型则会被修改,如果为值类型则不会修改
            
        */

      /*学习路线 
        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-原型对象

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

在这里插入图片描述

在这里插入图片描述

<!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
            注意:如果修改构造函数中的return的值,加入值为引用类型则会被修改,如果为值类型则不会修改
        */
        // 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.3- ______proto______属性介绍

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

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

在这里插入图片描述

在这里插入图片描述

<!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.4-constructor属性介绍

在这里插入图片描述

<!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.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.面向对象与面向过程区别
    • 面向过程：注重的是过程(实现某一个功能的逻辑,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，指向自己的构造函数

在这里插入图片描述

码少女壮士
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
day01-js高级第一天课件复习资料.rar
04-08
在“day01-js高级第一天课件复习资料.rar”这个压缩包中，我们推测包含的是第一天学习JavaScript高级部分的课程内容，适用于已经有一定基础，希望深入学习JS的同学。以下是对这些高级知识点的详细阐述： 1. **原型...
day02-js高级-课件.rar
04-18
JavaScript（简称JS）是一种广泛用于Web开发的轻量级编程语言，主要应用于浏览器端，用于实现客户端的动态效果和交互。在"day02-js高级-课件.rar"这个压缩包中，我们可以预见到一系列深入讲解JavaScript高级特性的...
JS高级进阶总结day02---面向对象编程三大特征,原型链总结
weixin_40630195的博客
12-29 131
JS高级进阶总结,面向对象编程三大特征,原型链总结
JS进阶day02构造函数和原型对象以及实例对象(ES5)
qq_44566650的博客
11-08 120
#对象的三种创建方式 ##字面量方式,新增一个obj对象 var obj = { } ##new关键字,Object()为一个函数 var obj = new Object() ##构造函数方法 function person (name,age){ this.name = name //this指向实例对象 this.age = age } ...
JavaScript入门 面向对象编程思想/创建对象方式/构造函数/原型prototype Day18
qq_63354840的博客
09-07 226
面向对象编程思想/创建对象方式/构造函数/原型prototype
DAY18JS学习--面向对象编程、原型对象
weixin_51040108的博客
09-07 89
DAY18JS学习--面向对象编程、原型对象
python项目-Day4-类与对象定义-原型对象-回调函数-this
qq_37892223的博客
07-12 208
JavaScript 定义类或对象 第一种方法创建一个对象,给这个对象以color属性 var obj=new Object(); obj.color=&amp;quot;red&amp;quot;; 2.第二种方式是使用function(){}来创建createCar类 function createCar(id,name){ this.id=id; this.name=name; this.s...
JavaScript-day24------主要内容有this指向的改变；面向对象的三大特征；构造函数的继承等
莫名的博客
01-07 289
1.this指向的改变 改变this指向 call() 用于改变this指向 第一次参数表示要改变成的那个this指向，后面的参数表示该函数的参数 fn() -> fn.call() bind() 用于改变this指向 bind 只会改变this指向，但不会调用函数 ---- 返回了这个函数 apply() ...
021Day--构造函数，函数的原型对象，this的总结，原型练习，js的继承，原型链继承，组合继承，类型的静态方法
Yanxiaona111的博客
08-28 193
一、构造函数的执行过程 构造函数的执行过程： 通过代码调试：debug过程。 断点调试：breakpoint bug：代表了程序中的错误。原意是臭虫的意思。 调试按钮： step：逐步执行代码，执行下一行代码。遇到方法调用，会进入方法内执行。 step out：跳出当前方法，执行方法后的代码。 step into：进入下一个方法执行。 step over：逐步执行代码，执行下一行代码。遇到方法调用，不会进入执行。 构造方法的执行过程： 1：实参给形参赋值，js底层创建好空对象，并赋值给this。 2：通过t
JavaScript高级(含ES6)-Day02构造函数和原型
weiweianx的博客
02-23 91
ES6 全称ECMAScript 6.0，2015年6月发版，目前的浏览器中JavaScript都是ES5版本的。 创建对象的三种方法 // 1、对象字面量 var obj1 = {}; // 2、new Object var obj2 = new Object(); // 3、构造函数 function Star(uname,age){ this.uname = uname;
020Day-算法、JSON、面向对象、通过构造函数创建对象
Yanxiaona111的博客
08-30 245
一、算法-二分搜索法 二分搜索法：折半查找法。binarysearch。 作用：做内容查找。功能类似于数组的实例方法：indexOf 时间复杂度 O(n) 通常binarysearch用于查找数组元素的索引。找到返回索引，否则返回-1. 时间复杂度：O(lg(2n)) 使用该算法的前提：数列必须是有序的。 <script> function random(min, max) { return ~~(Math.random () * (max - min) + min);
FE21-JS-DAY01-Julia-莱西亚
03-03
7. **面向对象编程**：构造函数、原型链、继承、封装和多态。 8. **JavaScript性能优化**：避免阻塞主线程、减少DOM操作、合理使用缓存。 9. **调试技巧**：使用浏览器的开发者工具进行断点调试、查看变量值和调用...
day03-js高级作业.zip
10-01
【标题解析】: "day03-js高级作业.zip" 这个标题暗示了这是一个与JavaScript高级编程相关的学习资料，可能是某课程的第三天作业。"zip"格式表明它是一个压缩包，里面可能包含一系列的文件，如代码、文档或者测试案例...
day03-js高级代码.zip
10-01
5. **类与构造函数**：虽然JavaScript是基于原型的，但它也支持类语法，使得面向对象编程更加直观。同时，了解构造函数和`this`关键字的用法也是必要的。 6. **箭头函数**：箭头函数提供了一种简洁的定义函数的方式...
Vue前端打包
weixin_63680330的博客
07-04 318
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
最新发布
Vinca@的博客
07-08 489
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 98
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
创建react的脚手架
Mmj_mmj的博客
07-05 365
网址：creat-react-app.bootcss.com主流的脚手架：creat-react-app。
vue3+ts项目中.env配置环境变量与情景配置
我愿化作繁星
07-03 920
就是在编码过程中应用这些自定义环境变量的时候，给出的智能提示。src目录下创建一个或者env.d.ts文件src同级别types目录下创建文件env.d.ts// 更多环境变量...在文件中专门用于处理项目src文件中的TypeScript配置文件，include配置项加入文件：(会提示自定义设置的环境变量)// ...// 第一种方式对应配置"vite-env.d.ts", // 或者 "env.d.ts"// 第二种方式对应配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值