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

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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值