（五、JavaScript高级以及ES6）JavaScript 面向对象

已于 2023-02-20 13:25:12 修改
阅读量358 收藏
点赞数
文章标签： javascript java 开发语言
于 2022-09-19 10:34:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40832034/article/details/126856104
版权

https://docs.mphy.top/#/JS-Advance/ch01

一、面向对象编程介绍

1 、两大编程思想

  • 面向过程
  • 面向对象

2、面向过程编程

面向过程 编程，即POP（Process-oriented programming）。面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。

3、面向对象编程

面向对象 编程，即 OOP（Object Oriented Programming） 面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。

在面向对象程序开发思想中，每—个对象都是功能中心，具有明确分工。 面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。

面向对象的特性：

  • 封装性
  • 继承性
  • 多态性

4、面向过程和面向对象的对比

  • 面向过程
    优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。
    缺点：没有面向对象易维护、易复用、易扩展。
  • 面向对象
    优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护
    缺点：性能比面向过程低。

二、ES6 中的类和对象

1、对象

现实生活中：万物皆对象，对象是 一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的：

  • 属性：事物的 特征，在对象中用 属性 来表示（常用名词）
  • 方法：事物的 行为，在对象中用 方法 来表示（常用动词）

2、类 class

在 ES6 中新增加了类的概念，可以使用 class 关键字声明—个类，之后以这个类来实例化对象。

  • 类 抽象了对象的公共部分，它泛指某一大类（class）
  • 对象 特指某一个，通过类实例化一个具体的对象

面向对象的思维特点：

  • 抽取(抽象)对象共用的属性和行为组织(封装)成—个类（模板）
  • 对类进行实例化,获取类的对象

3、创建类和对象

语法：

class ClassName {
    // class body
}

创建实例：

let obj = new ClassName();

类必须使用 new 实例化对象

4、类 constructor 构造函数

constructor() 方法是类的构造函数（默认方法），用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法。如果没有显示定义,类内部会自动给我们创建一个 constructor()

语法：

// 创建一个学生类
class Student {
    constructor(uname, age, major) {
        this.uname = uname;
        this.age = age;
        this.major = major;
    }
}

类的实例化——创建对象：

let peter = new Student("Peter", 21, "CS");
console.log(peter.uname); // Peter

注意：
通过 class 关键字创建类, 类名我们还是习惯性定义首字母大写;
类里面有个 constructor 函数,可以接受传递过来的参数,同时返回实例对象;
constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数，类也会自动生成这个函数;
生成实例 new 不能省略;
最后注意语法规范, 创建类：类名后面不要加小括号。生成实例：类名后面加小括号, 构造函数不需要加 function;

5、类中添加方法

语法：直接在类中写方法名和括号即可，如下所示。

class Student {
    constructor(uname, age, major) {
        this.uname = uname;
        this.age = age;
        this.major = major;
    }
    // 类中添加方法
    sing() {
        console.log(this.uname + "会唱歌");
    }
}

创建实例：

let peter = new Student("Peter", 18, "化学");
peter.sing(); // Peter会唱歌

方法之间不能加逗号分隔，同时方法不需要添加 function 关键字。

6、static 静态成员

给成员属性或成员方法添加 static，该成员就成为静态成员，静态成员只能由该类调用。

class Person {
    static eat() {
        console.log('eat');
    }
}
let  p = new Person();
Person.eat(); // eat
p.eat(); // 报错

三、类的继承

1、继承：子类可以继承父类的—些属性和方法。

语法：使用 extends 关键字

class Son extends Father {
    // class body
}

2、super 关键字

super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数。

语法

super([arguments]);
// 调用 父对象/父类 的构造函数

super.functionOnParent([arguments]);
// 调用 父对象/父类 上的方法

示例：

class Person {
    constructor (uname, age) {
        this.uname =uname;
        this.age = age;
    }
}
class Student extends Person {
    constructor (uname, age, major) {
        // super 将子类的参数传递给父类构造函数，减少代码量
        super(uname, age);
        // 子类可以有自己独有的属性
        this.major = major;
    }
}
let rick = new Student("Rick", 22, "数学");

注意: 子类在构造函数中使用 super, 必须放到 this 前面（必须先调用父类的构造方法，再使用子类构造方法）

(1) super 传值问题

观察以下代码，运行将产生错误。

class Father {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    sum() {
        console.log(this.x + this.y);
    }
}
class Son extends Father {
    constructor(x, y) {
        this.x = this.x;
        this.y = this.y;
    }
}
let obj = new Son(10, 20);
obj.sum();

解释说明：若子类没有写构造函数 constructor，则实例化时默认调用父类的，这时候程序运行无误。若子类写了构造函数，那么子类在调用 sum 方法的时候，参数的值没有传给父类，而是传给了子类的this.x和this.y，父类没有得到参数，无法调用参数的值，也就无法执行 sum 方法。

正确：加入 super。

class Father {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    sum() {
        console.log(this.x + this.y);
    }
}
class Son extends Father {
    constructor(x, y) {
        super(x, y);
    }
}
let obj = new Son(10, 20);
obj.sum(); // 30

改成super(x,y)后，子类的x和y得到了参数，并利用super讲参数传给了父类的this.x和this.y

(2) super 调用父类普通函数

class Parent {
    sayHi() {
        return "Father: hello";
    }
}
class Child extends Parent {
    sayHi() {
        // super 调用父类普通函数
        console.log(super.sayHi());
    }
}
let man = new Child();
man.sayHi(); // Father: hello

(3) 继承中属性和方法查找原则

继承中的属性或者方法查找原则：就近原则

  • 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的
  • 继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法（就近原则）
class Parent {
    sayHi() {
        console.log("Father: hello");
    }
}
class Child extends Parent {
    sayHi() {
        console.log("Son: hello");
    }
}
let man = new Child();
man.sayHi(); // Son: hello

(4) super 必须放到子类 this 之前

子类在构造函数中使用 super, 必须放到 this 前面。

class Father {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    sum(){
        console.log(this.x+this.y)
    }
}
class Son extends Father {
    constructor(x, y,z) {  
        super(x, y);      //①
        this.z = z;       //②
    }
    summ(){
        console.log(this.x+this.y+this.z)
    }
}
let son = new Son(3,5,8);
son.sum() //8
son.summ() //16

若①和②顺序颠倒，则会报错，super必须放在this之前

3、使用类的注意点

  • 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象
  • 类里面的共有属性和方法一定要加 this 使用
class Star{
            constructor(uname,age){
                this.uname = uname
                this.age = age
            }
            sing(){
                console.log(uname);   //①
            }
        }
        let p = new Star('刘德华')
        p.sing()

上面代码报错，是因为uname是sing中的，但是sing没有参数传给他，想要的是constructor中的uname,即想要实例化对象中的uname,而this正好指向实例化对象，所以①处应该改成，console.log(this.uname)
如果constructor中想要加入方法，也要用this.方法()

  • 类里面的 this 指向问题：constructor 里面的 this 指向实例对象, 方法里面的 this 指向这个方法的调用者（dance是对象调用的，就指向对象，sing是按钮调用的，就指向按钮，而按钮中没有uname这个属性，所以①处要用that.uname）
<button></button>

let that;
class Star {
    constructor (uname, age) {
        that = this;
        this.uname = uname;
        this.age = age;
        // btn按钮调用sing方法
        this.btn = document.querySelector("button");
        this.btn.onclick = this.sing;
        // constructor 里面的this 指向的是 创建的实例对象
        console.log("constructor: ", this);
    }
    sing() {
        // 这个sing方法里面的 this 指向的是 btn 这个按钮，因为这个按钮调用了这个函数
        console.log("sing:", this); // button
        console.log(that.uname); // that里面存储的是constructor里面的this     //①
    }
    dance() {
        // 这个dance里面的this 指向的是实例对象 ldh 因为ldh 调用了这个函数
        console.log("dance:", this);
    }
}
let rick = new Star("Rick", 20);
rick.dance();

在这里插入图片描述

四、综合案例–面向对象版tab栏切换

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

类的基本架构

class Tab {
    constructor(id) {
        // 获取相关元素节点
        // 根据传入的id选择器构建主节点
        this.main = document.querySelector(id);
    }
    // 初始化，绑定各个事件
    init() {}
    // 更新节点，同步整个状态
    updateNode() {}
    // 1. 切换功能
    toggleTab() {}
    // 2. 添加功能
    addTab() {}
    // 3. 删除功能
    removeTab() {}
    // 4. 修改功能
    editTab() {}
}

一些要点

  • 在 init() 中绑定事件时，不需要即时执行的话，则事件名后面不加括号。
  • 若需要主节点，则声明一个 that 变量，在 constructor() 里面赋值 that = this。
  • insertAdjacentHTML() 方法：可以在指定元素的指定位置添加一个节点字符串。 （MDN insertAdjacentHTML）
  • appendChild 不支持追加字符串的子元素，insertAdjacentHTML 支持追加字符串的元素
  • node 是某一个节点，在其上绑定节点的时候需要提前判断该节点存在再绑定事件，可使用 node && node.click()。
  • 自动执行某事件而不需要手动触发，使用 node.click()、node.blur() 等等。
  • 双击事件：ondblick。
  • 双击禁止选中文字：
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  • 双击禁止选中文字（CSS做法）：user-select: none;
qq_40832034
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 2830
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对CSDN其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
简易购物车（最全代码解析）JavaScript（ES6面向对象）
CSErtuh的博客
09-08 3902
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>购物车</title> <style type="text/css"> table { width: 50%; position: relative; margin: 0px auto; border-collapse: collapse; ...
ES6面向对象
weixin_64037609的博客
09-25 733
ES6面向对象
JS高级-js面向对象ES6（最详细的 js 高级笔记！！！）
qq_54422936的博客
08-20 1012
JS高级-js面向对象ES6
JavaScript高级-ES6
slom_fxt的博客
12-25 2079
一、ECMAScript简介 ·ECMA（European Computer Manufactures Association）中文名称为欧洲计算机制造商协会 ·ECMAScript是由ECMA国际通过ECMA-262标准化的脚本程序设计语言 ·Ecma国际制定了许多标准，而ECMA-262只是其中一个，所有标准列表查看http://www.ecma-international.org/publications/standards/Standard.htm 二、ECMA-262历史 第一版 .
JavaScript高级 ES6类
ximingx
01-15 1001
我们会发现，按照前面ES5的构造函数形式创建类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解，而在ES6新的标准中使用了class关键字来直接定义类，但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已使用class来定义类的方法有两种：类声明和类表达式// ES5中定义类 // function Person() {} // ES6定义类 class Person {
JavaScript高级教程（面向对象编程）
一只努力搬砖的打工妹纸
01-25 5216
面向对象编程 有两大编程思想：面向过程和面向对象； 面向过程编程POP(Process-oriented programming) 面向过程即分析出解决问题所需要的步骤，然后用函数将这些步骤一步步实现，使用的时候再一个个的一次调用就可以了； 即将大象装进冰箱，从面向过程来看，需要打开冰箱门、装进去大象、关上冰箱门 面向对象编程OOP(Object Oriented Programming) 面向对象即把事务分解成为一个个对象，然后由对象之间分工与合作；是以对象功能来划分问题，而不是步骤；在面向对
Javascript的es5和es6
2202_75802608的博客
06-09 1662
es5和es6的关键字使用，包括继承方式不同的优点和缺点
JavaScript 之 ES6 新特性
qq_48439911的博客
05-10 1760
模块化 Class类 Symbol 箭头函数 解构赋值 rest参数 set/map let/const 模板字符串 扩展运算符 迭代器/生成器
JavaScript ES6新特性详解及实际应用案例
LindRoland的博客
04-21 983
ES6（ECMAScript 2015）作为JavaScript的一个重要版本，引入了许多新特性和语法糖，极大地提高了开发效率和代码的可读性。ES6引入了大量的新语法和API，包括let和const关键字、箭头函数、模板字符串、解构赋值、类（class）、模块（module）导入导出、Promise对象、异步函数（async/await）等。箭头函数是ES6中引入的一种新的函数语法。ES6提供了原生的模块系统，使得我们可以将代码拆分成不同的文件，并通过import和export语句来组织和共享代码。
JavaScript及（ES6）总结
05-29
2. 类（Class）和模块（Module）：类提供面向对象编程的语法糖，模块系统让代码组织更加规范。 3. 解构赋值：可以从数组或对象中提取值，直接赋给变量。 4. 扩展运算符（Spread Operator）：用于合并数组或对象，也...
javascript-es6
02-12
ES6引入了基于原型的类（class）和继承（extends）概念，使得面向对象编程更加直观，如`class Person {}`和`class Student extends Person {}`。 6. **解构赋值** 解构赋值允许我们从数组或对象中方便地提取值，...
JavaScript ES6专用字段和方法
04-07
总的来说，JavaScript ES6中的专用字段和方法是现代JavaScript开发中非常重要的组成部分，它们增强了语言的面向对象特性，帮助开发者编写更加模块化、可维护的代码。学习并掌握这些特性，可以提升代码质量，降低维护...
利用原生循环依赖关系序列化复杂JavaScript对象或ES6类
08-08
对于ES6类，它们本质上是函数，但是提供了更面向对象的语法。类实例也可以拥有属性和方法，这使得它们成为可能涉及循环依赖的对象。序列化类实例时，不仅要保存其属性值，还要考虑类的方法和构造函数。 解决循环...
原生JavaScript之es6中Class的用法分析
10-15
在JavaScript的ES6标准中，引入了一种新的语法特性——Class，这使得JavaScript的面向对象编程变得更加简洁和直观。Class的出现是对ES5中基于原型的面向对象编程方式的一个补充，提供了一种更加接近传统面向类的语言...
ES6 新特性有哪些
weixin_64684095的博客
07-06 766
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1272
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 181
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 193
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
面向对象的JavaScript基础.pdf
08-04
面向对象的JavaScript基础是现代前端开发中的关键概念，尤其在jQuery和MooTools等库已经极大地简化了日常开发任务的情况下。这些库虽然高效，但深入理解它们背后的面向对象（OO）原则至关重要，以便于掌握编程趋势和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值