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

相关推荐
石山代码13 分钟前
C++23 新特性在 CLion 中的实战体验
开发语言·c++·c++23
浮江雾14 分钟前
Flutter第四节------核心概念学习笔记:从基础语法到异步编程
linux·服务器·开发语言·笔记·flutter·入门·基础
Tyler_127 分钟前
iOS PlayWright mcp server
前端·ios·ai编程
北冥you鱼29 分钟前
Go Modules 使用指南:从入门到精通
开发语言·后端·golang
l1t32 分钟前
duckdb 1.6dev新增的.manual命令
开发语言·数据库
嘟嘟071734 分钟前
从零理解 MCP:手写一个本地 MCP Server 并接入 LangChain Agent
前端·后端
cocoafei36 分钟前
GPT-5.6 后,别再混淆 ChatGPT 和 Codex 额度了
前端·人工智能·chatgpt
你怎么知道我是队长38 分钟前
JavaScript的函数介绍
开发语言·前端·javascript
weedsfly41 分钟前
观察者模式 vs 发布-订阅模式:从概念到实战,一次讲清楚
前端·javascript·面试
暗不需求43 分钟前
手写 AJAX:从 XMLHttpRequest 到封装一个简易 axios
前端·面试