JS详解-class-类的核心语法关于ES6与ES5

class基本核心语法:

javascript 复制代码
         //定义类
        class Person{
            //公有属性(推荐此处定义)
            name
            // 定义属性并设置默认值
            price = 100
            //构造函数
            constructor(name,age){
                // 构造函数内部的this实例化对象
                this.name = name
                this.age = age
                // 动态添加属性(不推荐,查找麻烦)
                this.rank = 'QSHQDG'
            }
            //定义方法(公有)
            sayHello(){
                console.log('hello')
            }
        }
         // 类实例化
        const p = new Person('ian',18)

class实现继承:

javascript 复制代码
        //定义类
        class Person{
            //公有属性(推荐此处定义)
            name
            // 定义属性并设置默认值
            price = 100
            //构造函数
            constructor(name,age){
                // 构造函数内部的this实例化对象
                this.name = name
                this.age = age
            }
            //定义方法(公有)
            sayHello(){
                console.log('papa said hello')
            }
        }
        // 子类继承
        class Student extends Person {
            age
            constructor(name,age){
                super(name)
                this.age = age
            }
            sayHi(){
                console.log('son said hi')
            }
            // 就近原则,也可以实现构造函数的重写(多态)
            // sayHello......
        }
        const s = new Student('ian',18)

class静态属性和私有属性

静态属性:定义:使用static关键字;使用:直接用类来调用

私有属性:定义:#开头;使用:带上#且只能在声明该静态属性内部使用

注意:外部不可以直接调用私有属性,但可以通过类中的方法调用私有属性或私有方法,在外部实例化该类后调用方法,间接使用私有属性(浏览器调试工具可以直接调用)

javascript 复制代码
        class Test {
            // 静态属性和方法
            static stInfo = 'static sx'
            static stMethod(){
                console.log('static')
            }
            //私有属性和方法
            #prInfo = 'prInfo'
            #prMethod(){
                console.log('prMethod')
            }
            testPr(){
                console.log(this.#prInfo)
                this.#prMethod()
            }
        }

        Test.stMethod()
        console.log(Test.stInfo)
        const t = new Test()
        t.testPr()

ES5寄生组合继承:

解释为什么叫寄生组合:

1、组合式继承用到构造函数和原型链

2、在父类原型中有子类构造函数

javascript 复制代码
         // 父类
        function Person(name){
            this.name = name
        }
        Person.prototype.sayHello = function(){
            console.log('papa said hello')
        }
        // 组合式寄生
        function Student(name){
            Person.call(this,name)
        }
        // 通过原型链继承方法
        const proto = Object.create(Person.prototype,{
            constructor: {
                value: Student,
            }
        })
        //创造的原型,赋值给子类的原型
        Student.prototype = proto
        const s = new Student('ian')    

何为Object.create()?是一种静态方法,第一个参数是源对象,第二个参数是覆盖对象中的特定属性和方法。

相关推荐
zzzzzz3101 小时前
看 react-bits,不要只看“酷炫”:一套阅读动画交互组件库的框架
javascript·react.js·动效
朱 欢 庆3 小时前
云服务器附件备份到本机内网服务器
运维·服务器·前端·经验分享
2601_962071578 小时前
【Java报错已解决】org.springframework.beans.factory.BeanCreationException
java·开发语言
支支დ8 小时前
VO by Vercel 前端特定优势:为什么它是构建 AI 应用的新范式
前端·人工智能
香芋芋圆9 小时前
AI 冲击内卷之下,普通前端如何破局?WebGIS—— 低门槛突围赛道
前端·javascript·人工智能·学习·职场发展
INS_KF9 小时前
【编程笔记】成员函数中两个 const 的区别(const Data &getData() const;)
前端·javascript·笔记
淡海水9 小时前
07-04-并发-ConcurrentBag-T-工作窃取WorkStealing算法
开发语言·算法·c#·bag·concurrent·workstealing
宿67410 小时前
vue3-async
前端·javascript·vue.js
黄敬峰10 小时前
Agent Memory 进阶:用 LLM 总结压缩上下文,告别"金鱼记忆"
面试
CS_Zero10 小时前
C语言sizeof是函数吗?
c语言·开发语言