JAVAScript 面向对象

最新推荐文章于 2024-06-13 16:29:32 发布

当回忆化为灰烬丶丶

最新推荐文章于 2024-06-13 16:29:32 发布

阅读量83

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_69064369/article/details/124854411

版权

JavaScript面向对象

首先介绍一下我们的两大编程思想

概念

面向对象程序设计（Object-oriented programming，OOP）是一种程序设计范型，同时也是一种程序开发的方法。对象指的是类的实例。它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的重用性、灵活性和扩展性。 ——维基百科

一般面向对象包含：继承，封装，多态，抽象

1.面向过程（POP）

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步步实现，使用时在一个个调用函数就行了
在javascript中。

2.面向对象（OPP）

面向对象就是把事务分解成一个个对象，然后由对象之间分工合作完成。面向对象是以对象功能来划分问题的，而不是步骤！

面向对象的优点：灵活、容易维护、更适合多人合作的大项目。

代码举例

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

</body>

</html>
<script>
    class Person {
        // 构造方法
        constructor(gender, age) {
            this.gender = gender;
            this.age = age;
        }
        // 类方法
        static haha() {
            console.log('二十四笑 ');
        }
        // 实例方法
        eat(food) {
            console.log(`吃${food}`);
        }
    }
    // 类名点方法名 调用 类方法
    Person.haha();
    let person = new Person(1, 39);
    console.log(person);
    console.log(person.gender);
    console.log(person.age);
    person.eat('核桃');
    person.gender = 1;
    person.age = 40;
    console.log(person);
    console.log(person.gender);
    console.log(person.age);
    // Uncaught TypeError: person.haha is not a function
    // 对象无法调用类方法
    // person.haha();
    // 拓展 实例方法
    person.heihei = function () {
        console.log(' 嘿嘿嘿');
    }
    person.heihei();
    // 拓展 类方法
    Person.hehe = function () {
        console.log('呵呵');
    }
    Person.hehe();
    // Uncaught TypeError: person.hehe is not a function
    //person.hehe();
    class Man extends Person {
        constructor(gender, age, nickname) {
            super(gender, age);
            this.nickname = nickname;
        }
        work() {
            console.log('日出而作 日落而归');
        }
    }
    let man = new Man(1, 39, '王五');
    console.log(man);
    man.work();
    man.eat('芒果')
    class Woman extends Person {
        constructor(gender, age, nickname) {
            super(gender, age);
            this.nickname = nickname;
        }
        // 方法重写
        eat(food) {
            console.log(this.nickname + '吃' + food);
        }
    }
    let woman = new Woman(0,18,'大美丽');
    console.log(woman);
    woman.eat('荔枝');
</script>

prototype 属性与原型

prototype 是函数对象上预设的对象属性。

原型是对象上的原型，通常是构造器的 prototype 属性。

代码举例

<!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>
    
</body>
</html>
<script>
    // 利用构造函数 实现面向对象
    function Person(nickname) {
        this.nickname = nickname;
    }
    let person = new Person('王五');
    console.log(person);
    console.log(person.nickname);
    person.nickname = '李大宝';
    console.log(person);
    console.log(person.nickname);
    Person.prototype.eat = function (food) {
      console.log(this.nickname + ' 吃 ' + food);  
    };
    person.eat('核桃');
    // 继承
    function Man(nickname,age) {
        Person.call(this,nickname);
        this.age = age;
    }
    Man.prototype = new Person();
    Man.prototype.constructor = Man;
    let man = new Man('大宝贝',39);
    console.log(man);
    console.log(man.nickname);
    console.log(man.age);
    man.eat('荔枝');
</script>