ES学习class类用法(十一)

这里写目录标题

一、class 类的用法

JS语言中,生成实例对象的传统方法是通过构造函数:

js 复制代码
        function Person(name,age){
            this.name=name;
            this.age=age;
        }
        Person.prototype.sayName=function(){
            return this.name
        }
        let p=new Person('小马哥',18);
        console.log(p);//Person {name: '小马哥', age: 18}

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。

基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写,就是下面这样

js 复制代码
        class Person{
            // constructor方法 是类的默认方法,通过new命令生成对象实例时,自动调用该方法,一个类必须有constructor方法,如果没有定义,会被默认添加
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            //等同于Person.prototype = function sayName(){}
            sayName(){
                return this.name;
            }
        }
        console.log(new Person('小马哥',18));

类的方法内部如果含有this,它默认指向类的实例.

二、类的继承

js 复制代码
        class Animal{
            // 实例化的时候会立即被调用
            constructor(name, age){
                this.name = name;
                this.age = age;
            }
            setName(){
                return this.name;
            }
            setAge(){
                return this.age;
            }
        }

        class Dog extends Animal{
            constructor(name, age, color){
                // 如果 子类 继承了 父类,且 子类 中写了构造器,则 子类 构造器的 super 必须要调用
                super(name, age);  // 等同于 Animal.call(this,name,age); 继承父类的属性
                this.color = color;
            }
            // 子类自己的方法
            setColor(){
                return `${this.name}是${this.age}岁了,它的颜色是${this.color}`;
            }
            // 重写父类的方法
            setName(){
                // super 相同于 Animal
                return this.name + super.setAge() + this.color;
            }
        }

        let d1 = new Dog('小黄', 28, 'red');
        console.log(d1.setAge());     // 调用继承父类的方法
        console.log(d1.setColor());   // 调用子类自己的方法
        console.log(d1.setName());    // 调用重写父类的方法
相关推荐
北海-cherish2 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
AALoveTouch2 小时前
网球馆自动预约系统的反调试
javascript·网络
@小博的博客3 小时前
【Linux探索学习】第二篇Linux的基本指令(2)——开启Linux学习第二篇
linux·运维·学习
新中地GIS开发老师5 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang5 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。5 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
李白的故乡5 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_5 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含5 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
007php0075 小时前
某大厂跳动面试:计算机网络相关问题解析与总结
java·开发语言·学习·计算机网络·mysql·面试·职场和发展