JS面向对象

作者: coderhzc | 来源:发表于2021-03-14 14:52 被阅读0次

面向过程:

优点:性能比面向对象高,适合跟硬件联系紧密的东西,例如单片机就采用的面向过过程编程.

没有面向对象易维护,复用,扩展

面向对象

优点;易维护,复用,扩展,由于面向对象有封装,继承,多态性,可以设计出低耦合的系统,使用系统,更加灵活,更加易于维护

缺点:性能比面向过程低

面向对象更贴近我们的实际生活,可以使用面向对象描述现实世界事物,但是事物分为具体的事物和抽象的事物

面向对象的思维特点:
** 1.抽取(抽象)对象共用的属性和行为组织(封装)成一个类(模板) **
** 2.对象进行实例化,获取类的对象 **
** 面向对象编程我们考虑的是有哪些对象,按照面向对象的思维特点,不断的创建对象,使用对象,指挥对象做事情 **

对象
**1.现实生活中:万物皆对象,对象是一个具体的事物,看得见摸得着的,例如一本书,一辆汽车,一个人,可以为对象, **
2.在JavaScript中对象是一组无序的相关的属性和方法的集合,所有的事物都是对象,例如字符串,数值,数组函数等
3.对象是由属性和方法组成的:
属性:事物的特征,在对象中用属性来表示( 重用名词 )
方法:事物的行为,在对象中用方法来表示( 常用动词 )

类 class
在ES6 中新增了类的概念,可以使用class关键字声明一个类,之后以这个类来实例化对象
类抽象了对象的公共部分,它泛指某一大类(class)
对象特指某一个,通过类实例化一个具体的对象

用面向过程的方法写出来的程序是一份鸡蛋饭,而用面向对象的程序是一份盖浇饭

创建类

语法:
```
class name {
// class body
}

    创建实例:
    let xxx = new name()
  ```

1.创建类和对象的代码具体如下:

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>创建类和生成实例</title>
</head>

<body>
   <script>
       // 面向对象的特性: 封装性 继承性 多态性

       // 类 constructor 构造函数
       // constructor() 方法是类的构造函数(默认方法) 用于传递参数,返回实例对象,通过new 命令生成对象实例,
       // 自动调用该方法,如果没有显示定义,类内部会自动给我们创建一个constructor()

       // 1.创建类 class 创建一个明星类
       class Start {
           constructor(uname, age, sex) {
               this.uname = uname;
               this.age = age;
               this.sex = sex;
               console.log(this);
           }
       }

       // 2. 利用类创建对象 new
       var hzc = new Start('huzhenchu', '18', '男')
       var cch = new Start('chuchuhu', '19', '男')


       /**
        *  总结:
        *      1. 通过class关键字创建类,类名我们还是习惯性定义为首字母大写
        *      2. 类里面有个constructor 函数, 可以接受传递过来的参数,同时返回实例对象   
        *      3. constructor函数 只要new() 生成实例时,就会自动调用这个函数,如果我们不写这个函数,类也会自动生成这个函数
        *      4. 生成实例 new 不能省略
        *      5. 最后注意语法规范,创建类, 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function
        * **/
   </script>
</body>

</html>

实际截图:

image.png

2.类中添加共有方法

语法:

    class Start {
            constructor(uname, age, sex) {
                this.uname = uname;
                this.age = age;
                this.sex = sex;
                console.log(this);
            }
            say( ){
              console.log(this.uname + "你好")
            }
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建类和生成实例</title>
</head>

<body>
    <script>
        // 1.创建类 class 创建一个明星类
        class Start {
            constructor(uname, age, sex) {
                this.uname = uname;
                this.age = age;
                this.sex = sex;
            }
            say(song) {
                console.log(this.uname + song);
            }
        }

        // 2. 利用类创建对象 new
        var hzc = new Start('huzhenchu', '18', '男')
        var cch = new Start('chuchuhu', '19', '男')
            // 类里面的所有的函数不需要写function
            // 多个函数方法之间不需要添加逗号
        hzc.say("胡振楚");
        console.log(hzc.age);

        cch.say("楚楚胡");
        console.log(cch.age);
    </script>
</body>

</html>

实际截图:

image.png

3. 类的继承 super关键字用于访问和调用对象父类上的函数,可以调用父类的构造函数,也可以调用父类的普通函数

语法: 现实中的继承:子承父业,继承父亲的姓.程序中的继承: 子类继承父类的一些属性和方法

class Father{
      constructor() {

      }
      money() {
        console.log(100);
      }
    }
class Son extends Father{ // 子类继承父类
 }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 类的继承
        // class Father {
        //     constructor() {

        //     }
        //     money() {
        //         console.log(100);
        //     }
        // }

        // class Son extends Father { // 子类继承父类

        // }

        // var son = new Son();
        // son.money();



        class Father {
            constructor(x, y) {
                this.x = x
                this.y = y
            }
            sum() {
                console.log(this.x + this.y);
            }
        }

        class Son extends Father {
            constructor(x, y) {
                super(x, y) // 调用了 父类中的构造函数
            }
        }

        var son = new Son(1, 2)
        son.sum()
    </script>
</body>

</html>

实际截图:

image.png

3.1 调用父类的普通函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // super 关键字 调用父类普通函数
        class Father {
            say() {
                return "我是爸爸"
            }
        }

        // 当儿子中有自己的 say() 方法的话 他会调用自己的say() 方法,
        // 如果子中没有say方法的话,他会去继承父亲中的say方法
        class Son extends Father {
            say() {
                // console.log("我是儿子");
                // 如果你确实想调用父类中的say方法的话写法如下:
                console.log(super.say() + "的儿子");
                  // super.say() 就是调用父类中的普通函数say
            }
        }

        var son = new Son();
        son.say()
    </script>
</body>

</html>

实际截图

image.png

super 必须放到子类this之前

  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        class Father {
            constructor(x, y) {
                this.x = x
                this.y = y
            }
            sum() {
                console.log(this.x + this.y);
            }
        }

        //子类继承父类的加法方法, 同事=时 扩展减法的方法
        class Son extends Father {
            constructor(x, y) {
                // 利用super 调用父类的构造函数
                // super 必须在子类的this之前调用
                console.log(super(x, y));
                this.x = x
                this.y = y
            }
            sub() {

                console.log(this.x - this.y);
            }
        }

        var son = new Son(5, 3)
        son.sub();
        son.sum();
    </script>
</body>

</html>

实际截图

image.png

总结: ES6中的类和对象
三个注意点:

在ES6中类没有变量提升,所以必须先定义类,才能通过实例化对象
类里面的共有属性和方法一定要加this使用
类中的this指向问题

全局搜索功能的实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="myinpit" />
    <button id="mybtn">查找</button>

    <p id="myP">
        在青海省海南藏族自治州医疗保障局工作的解永凯到西宁市参加培训，其中一项内容就是到中国工农红军西路军纪念馆学习党史。“看到展馆里的实物、图片，我对先辈的牺牲有了深入的认识，我要继承西路军先烈的革命理想和精神，更好地扎根基层，为人民服务。”解永凯说。 　　在开展党史学习教育中，青海省各级党组织和党员干部注重倍加珍惜党的历史、深入研究党的历史、认真学习党的历史、全面宣传党的历史、善于运用党的历史，真正用百年党史鼓舞斗志、明确方向。 　　在浙江，全省各地各部门各单位根据省委部署，结合实际，突出“红船味”“浙江味”，注重“红色根脉”，紧锣密鼓地启动党史学习教育各项工作。
        　　一处处红色地标成为党史学习教育的现场课堂。杭州市深挖革命老区红色根脉，依托属地红色资源，通过讲好身边红色故事、开设身边红色课堂、盘活身边红色家底等形式，推动党史学习教育传承有序开展。宁波市组织社科理论界专家学者开展学习讨论，借助“周二夜学”“凉亭党课”学习品牌等平台深化学习成效，运用集中授课、组织观看红色话剧《张人亚》、实地参观张人亚党章学堂、浙东革命根据地纪念馆等形式，把党史理论知识转化为大白话、本地话。金华市以陈望道故居和施光南、施复亮故居、刘英烈士墓等为重点，精心打造“星耀八婺——信仰之旅”红色文化信仰线路。
        　　创新教育形式 推进入脑入心 　　党的诞生地上海在充分利用丰富红色资源、红色基地开展党史学习教育的同时，注重讲活历史故事、用活红色资源、搞活教育形式，生动鲜活开展党史学习教育，通过方式方法创新，推动党史学习教育深入群众、深入基层、深入人心。 　　日前，互联网企业“饿了么”入驻的普陀区近铁城市广场内，20名积极向党组织靠拢的“外卖小哥”正在近铁城市广场“楼委会”的“蓝骑士加油站”听党课，授课老师通过对“初心”“初心地”“初心事迹”的解读、对红色历史的追寻与分析等，激励大家通过学习传承红色精神、提升自身修养，更好地为建设人民城市贡献力量。
        　　新学期，为更好地在广大师生中推进学习党史教育常态化，贵州医科大学大健康学院结合青年学子特点和需求，创新推出了“送你‘四朵’小红花学‘四史’系列红色主题活动”，包括开展读红色经典、讲红色故事、办红色知识竞赛、举办“抗疫云分享会”等，让红色文化更加入脑入心。 　　“这些活动让我更深入地走进了红色历史，更加理解中国共产党为什么能，更加体会到幸福生活是多么来之不易。”该学院学生吴利成说。 　　“历史是最好的教科书，只有让学生切实了解红色历史文化，才能更坚定他们爱党、爱国的自信。”贵州医科大学大健康学院党委书记桂晓玲介绍，学院还借助微视频、微动漫、网络知识竞赛等丰富学生学习“四史”的形态，增加学生多元体验，让红色教育浸润广大师生内心。
        　　打造精品党课 传承红色基因 　　《红军战士想念毛泽东》《春天的故事》《走进新时代》……陕西省宝鸡市西建集团非公党建学院办公室，教务部主任刘凯正与特邀老师商量4月份新学员“音乐党课”曲目。 　　为庆祝建党百年，西建集团探索了“音乐党课”“情景党课”“微视频征集”等多种党史学习方式。自2021年1月以来，“音乐党课”已经举办过3期。课堂上，教师先介绍了一首红色歌曲的背后故事、诞生背景，将党史知识贯穿其中；再请声乐老师现场教唱歌曲，最后组织小组比赛丰富课堂形式。 　　“没想到平时耳熟能详的歌曲有这么多感人的红色故事。”将党史教育与音乐相结合的学习方式让学员们兴致盎然。
        　　据了解，河北省各级党组织和党员干部在开展党史学习教育中，大力弘扬以“两个务必”和“赶考精神”为主要内容的西柏坡精神，激励党员干部坚定不移走好新时代赶考路。
    </p>

    <script>
        var ipt = document.querySelector('#myinpit');
        var btn = document.querySelector('#mybtn');
        var p = document.querySelector('#myP');
        var value = ""
        btn.onclick = function() {
            p.innerHTML = p.innerText
            var v = ipt.value
            if (v) {
                var reg = new RegExp(v, 'g')
                var newValue = `<span style="background:yellow;">  ${ v } </span>`
                p.innerHTML = p.innerHTML.replace(reg, newValue)
            }
        }
    </script>
</body>

</html>

实际截图

image.png

JS面向对象

面向过程:

面向对象

用面向过程的方法写出来的程序是一份鸡蛋饭,而用面向对象的程序是一份盖浇饭

创建类

1.创建类和对象的代码具体如下:

2.类中添加共有方法

实际截图:

3. 类的继承 super关键字用于访问和调用对象父类上的函数,可以调用父类的构造函数,也可以调用父类的普通函数

实际截图:

3.1 调用父类的普通函数

实际截图

super 必须放到子类this之前

实际截图

全局搜索功能的实现

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JS面向对象

面向过程:

面向对象

用面向过程的方法写出来的程序是一份鸡蛋饭,而用面向对象的程序是一份盖浇饭

创建类

1.创建类和对象的代码具体如下:

2.类中添加共有方法

实际截图:

3. 类的继承 super关键字 用于访问和调用对象父类上的函数,可以调用父类的构造函数,也可以调用父类的普通函数

实际截图:

3.1 调用父类的普通函数

实际截图

super 必须放到子类this之前

实际截图

全局搜索功能的实现

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

3. 类的继承 super关键字用于访问和调用对象父类上的函数,可以调用父类的构造函数,也可以调用父类的普通函数