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()?是一种静态方法,第一个参数是源对象,第二个参数是覆盖对象中的特定属性和方法。

相关推荐
易安说AI2 小时前
Ralph Loop 让Claude无止尽干活的牛马...
前端·后端
m0_555762903 小时前
VSCODE CLAUDE CODE
ide·vscode·编辑器
颜酱3 小时前
图结构完全解析:从基础概念到遍历实现
javascript·后端·算法
m0_736919104 小时前
C++代码风格检查工具
开发语言·c++·算法
2501_944934734 小时前
高职大数据技术专业,CDA和Python认证优先考哪个?
大数据·开发语言·python
失忆爆表症4 小时前
05_UI 组件库集成指南:Shadcn/ui + Tailwind CSS v4
前端·css·ui
小迷糊的学习记录4 小时前
Vuex 与 pinia
前端·javascript·vue.js
发现一只大呆瓜4 小时前
前端性能优化:图片懒加载的三种手写方案
前端·javascript·面试
黎雁·泠崖4 小时前
【魔法森林冒险】5/14 Allen类(三):任务进度与状态管理
java·开发语言
不爱吃糖的程序媛4 小时前
Flutter 与 OpenHarmony 通信:Flutter Channel 使用指南
前端·javascript·flutter