JavaScript之面向对象

cloudOnSkyline

已于 2022-07-20 11:34:25 修改

阅读量297

点赞数

分类专栏：案例 JavaScript 文章标签： javascript

于 2022-07-07 14:35:10 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125657608

版权

JavaScript 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

案例

14 篇文章 0 订阅

订阅专栏

1.构造函数(ES5)

2.面向对象

3.面向对象的继承

(1)extends关键词获取父类的属性和方法

（2）定义私有属性

（3）构造扩充

4.面向对象的get和set方法

本文主要介绍JavaScript中面向对象的使用。在介绍之前，先介绍ES5中构造函数的使用。

1.构造函数(ES5)

 <script>
        function Person(name, age) {
            this.name = name;
            this.age = age;
            this.say = function() {
                return this.name + this.age;
            };
        }
        var p1 = new Person('zs', 24);
        console.log(p1.name);
        console.log(p1.age);
        console.log(p1.say());
    </script>

2.面向对象

ES6提供了面向对象的方法：面向对象使用constructor构建对象，可定义公有属性和静态变量。

 // 面向对象
        class Human {
            // 静态变量
            static type = 'three';
            // 公共属性
            body = '身体';
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            walk() {
                return this.name + ' can walk';
            }
        }
        var p2 = new Human('ls', 34);
        var p3 = new Human('w5', 56);
        // p2实例对象
        console.log(p2.name);
        console.log(p2.age);
        console.log(p2.body);
        console.log(p2.walk());
        // p3实例对象
        console.log(p3.name);
        console.log(p3.age);
        console.log(p3.body);
        console.log(p3.walk());
        // 静态变量
        console.log(p1.type);
        console.log(p2.type);
        console.log(Human.type);

3.面向对象的继承

（1）extends关键词获取父类的属性和方法

面向对象提供了继承的方法，通过extends关键词可继承某类的属性和方法。现定义Male类，继承上面定义的Human类，即可获取Human类的属性和方法。

 // 继承
        class Male extends Human {};
        var p4 = new Male('z6', 78);
        console.log(p4.name);
        console.log(p4.age);
        console.log(p4.body);
        console.log(p4.walk());

（2）定义私有属性

此外，在子类中，可定义私有属性进行使用。

 // 继承
        class Male extends Human {
            #power = 'strong';
            getP(){
                return this.#power;
            }
        };
        var p4 = new Male('z6', 78);
        console.log(p4.getP());

（3）构造扩充

在父类的基础上，子类可利用constructor构造新的构造函数

  // 继承
        class Male extends Human {
            constructor(name, age, sex) {
                super(name, age);
                this.sex = sex;
            }
        };
        var p4 = new Male('z6', 78, '男');
        console.log(p4.sex);

4.面向对象的get和set方法

面向对象提供了get和set方法，其实是对象的属性。当获取该属性时，执行get中的操作，当为该属性赋值时，会执行set中的操作。

 <!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 Num {
            _num = 10;
            get num() {
                return this._num * 5;
            };
            set num(val) {
                this._num = this._num * val;
            }
        }
        let n = new Num();
        console.log(n.num);
        n.num = 3;
        console.log(n.num);
    </script>
</body>

</html>

打印结果：

cloudOnSkyline

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之面向对象

本文主要介绍JavaScript中面向对象的使用。在介绍之前，先介绍ES5中构造函数的使用。ES6提供了面向对象的方法：面向对象使用constructor构建对象，可定义公有属性和静态变量。面向对象提供了继承的方法，通过extends关键词可继承某类的属性和方法。现定义Male类，继承上面定义的Human类，即可获取Human类的属性和方法。此外，在子类中，可定义私有属性进行使用。在父类的基础上，子类可利用constructor构造新的构造函数面向对象提供了get和set方
复制链接

扫一扫

专栏目录