【笔记10】JS的类、继承、Getter和Setter、jQuery的extend方法

简介: 最近要使用 Layui mini 单页版进行后台管理项目的前端页面的开发。完完全全使用 Layui 的模块化开发项目还是比较伤脑筋,所以我决定对 Layui mini 单页版进行自己的封装。封装需要了解 JS 相关的语法和知识点,该篇文章就是对封装过程中 JS 知识点的记录。技术支持:https://www.runoob.com/js

一、前言

最近要使用 Layui mini 单页版进行后台管理项目的前端页面的开发。完完全全使用 Layui 的模块化开发项目还是比较伤脑筋,所以我决定对 Layui mini 单页版进行自己的封装。封装需要了解 JS 相关的语法和知识点,该篇文章就是对封装过程中 JS 知识点的记录。
技术支持:https://www.runoob.com/js

二、JS 的类

// 类是用于创建对象的模板
// 下面代码中的 name 和 age 是 Animal 的属性(JS 属性的
// 写法和 Java 不同)

class Animal {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}

在这里插入图片描述
创建对象时会自动调用构造函数方法 constructor()

在这里插入图片描述
在这里插入图片描述

class Animal {
    constructor(birthYear) {
        this.birthYear = birthYear
    }

    /**
     * 计算年龄的方法
     */
    calculateAge(year) {
        return new Date().getFullYear() - year
    }
}

三、JS 类继承

与 Java 一样,JS 类继承使用 extends 关键字。
super() 方法用于调用父类的构造函数
在这里插入图片描述
继承可实现代码的复用。

JS 的 Getter 和 Setter

JS 的 Getter 和 Setter 方法通过 get 和 set 关键字进行定义。

class Animal {
    constructor(name, age) {
        this._name = name // 下划线开头表示是对象的内部属性
        this._age = age
    }

    get getAge() {
        return this._age
    }

    set setName(name) {
        this._name = name
    }
}
        let dog = new Animal('FlowerDog', 3)
        
        console.log('dogName: ' + dog.name)
        
        // 设置 dog 对象的属性值
        dog.setName = 'GoodDog'

        console.log('dogName: ' + dog.name)
        
        // 即使 getter 是一个方法,要获取属性值时也不要使用括号
        console.log('dogAge: ' + dog.getAge)

使用 Setter 的方式和设置属性值的方式一样。虽然 Setter 是一个方法,但不需要带括号(JS 的 Setter 方法的使用和 Java 的 Setter 方法的使用不一样。)

在 Setter 方法中,一切的 return 都是无效的。

四、 JS 的 静态方法

静态方法(类方法):使用 static 关键字修饰的方法。它属于类而不属于对象。在实例化对象之前可通过 类名.方法名 调用静态方法。

静态方法不能在对象上调用,只能在类中调用。

五、封装过程的小知识点

在这里插入图片描述

(1) jQuery 的 extend() 方法

作用:可将一个或多个对象的内容合并到目标对象。

注意:
① 若只为 $.extend() 指定了一个参数,则意味着参数 target 被省略。此时,target 就是 jQuery对象本身。通过此方式,可为全局对象 jQuery 添加新的函数。
② 若多个对象具有相同的属性,则后者会覆盖前者的属性值。
在这里插入图片描述

六、解决 IDEA 遇到 java 文件有橘色图案的解决办法

感谢大哥的文章。
https://blog.csdn.net/wztmds/article/details/124435140

相关文章
|
21天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
34 0
|
8天前
|
JavaScript 前端开发
Javascript如何实现继承?
【10月更文挑战第24天】JavaScript 中实现继承的方式有很多种,每种方式都有其优缺点和适用场景。在实际开发中,我们需要根据具体的需求和情况选择合适的继承方式,以实现代码的复用和扩展。
|
4天前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
12 2
|
2天前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
2天前
|
JavaScript 前端开发 开发者
js实现继承怎么实现
【10月更文挑战第26天】每种方式都有其优缺点和适用场景,开发者可以根据具体的需求和项目情况选择合适的继承方式来实现代码的复用和扩展。
14 1
|
2月前
|
自然语言处理 JavaScript 前端开发
一文梳理JavaScript中常见的七大继承方案
该文章系统地概述了JavaScript中七种常见的继承模式,包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承等,并探讨了每种模式的实现方式及其优缺点。
一文梳理JavaScript中常见的七大继承方案
|
2月前
|
JavaScript 前端开发 Java
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)
|
11天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
24 0
|
2月前
|
JavaScript 前端开发
js之class继承|27
js之class继承|27
|
2月前
|
JavaScript 前端开发 Java
JavaScript 类知识点概览
概览JavaScript中类的知识点,包括类的定义和实现、添加方法和get/set方法、类的继承和静态方法的使用。通过学生类和人员类的例子,演示了类的构造器、方法定义、继承关系和静态方法的调用。
JavaScript 类知识点概览