ES6-学习笔记-10

最新推荐文章于 2024-01-04 21:32:39 发布
最新推荐文章于 2024-01-04 21:32:39 发布
阅读量65 收藏
点赞数
文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pakho_lin/article/details/119535326
版权

文章目录

Class类

一、认识Class

1、是什么

     1.认识 Class
       人类：类
       具体的人：实例、对象

       类可以看做是对象的模板，用一个类可以创建出许多不同的对象

2、基本用法

在这里插入图片描述

 2.Class 的基本用法
       类名一般大写
       class Person {} √
       class Person() {} ×
       class Person {}; ×
       function func() {}

       class Person {
         // 实例化时执行构造方法，所以必须有构造方法，但可以不写出来
         constructor(name, age) {
           // console.log('实例化时执行构造方法');
      // this 代表实例对象，上面定义的是实例属性/方法
           this.name = name;
           this.age = age;

           // 一般在构造方法中定义属性，方法不在构造方法中定义
           // this.speak = () => {};
         }

         // speak:function(){}

         // 各实例共享的方法
        speak() {
           console.log('speak');
        }
      }

      // Person();
       const zs = new Person('ZS', 18);
       const ls = new Person('LS', 28);
       // console.log(zs.name);
       // console.log(zs.age);
       // console.log(zs.speak);
       zs.speak();
       // console.log(ls.name);
       // console.log(ls.age);
       // console.log(ls.speak);
       console.log(zs.speak === ls.speak);

3、Class与构造函数

 // 3.Class 与构造函数
      class Person {
        constructor(name, age) {
          this.name = name;
          this.age = age;

          // this.speak = () => {};
        }

        speak() {
          console.log('speak');
        }

        // run(){}
      }
      // Person.prototype.run = function () {};

      // console.log(typeof Person);
      // console.log(Person.prototype.speak);

      // function Person(name, age) {
      //   this.name = name;
      //   this.age = age;

      //   // this.speak = () => {};
      // }
      // Person.prototype.speak = function () {};

4、Class的两种定义形式

1、声明形式
2、表达式形式
在这里插入图片描述

1.声明形式
      class Person {
        constructor() {}

        speak() {}
      }

      2.表达式形式
      function Person(){}
      const Person = function () {};

      const Person = class {
        constructor() {
          console.log('constructor');
        }

        speak() {}
      };
      new Person();

      (function () {
        console.log('func');
      })();
      func()
 // 立即执行的匿名类
      new (class {
        constructor() {
          console.log('constructor');
        }
      })();
      // new Person();

二、Class的属性和方法

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

1.实例属性
      方法就是值为函数的特殊属性
      class Person {
        age = 0;
        sex = 'male';
        getSex = function () {
          return this.sex;
        };

        constructor(name, sex) {
          this.name = name;
          // this.age = 18;
          this.sex = sex;
        }

        // speak() {
        //   this.age = 18;
        // }
      }

      const p = new Person('Alex');
      console.log(p.name);
      console.log(p.age);

      2.静态方法
      类的方法
      class Person {
        constructor(name) {
          this.name = name;
        }

        speak() {
          console.log('speak');
          console.log(this);
        }

        // static speak() {
        //   console.log('人类可以说话');

        //   // this 指向类
        //   console.log(this);
        // }
      }

      // Person.speak = function () {
      //   console.log('人类可以说话');
      //   console.log(this);
      // };

      const p = new Person('Alex');
      p.speak();

      Person.speak();

      // 3.静态属性
      // 类的属性
      class Person {
        constructor(name) {
          this.name = name;
        }

        //  不要这么写，目前只是提案，有兼容性问题
        // static version = '1.0';

        static getVersion() {
          return '1.0';
        }
      }
      // Person.version = '1.0';

      const p = new Person('Alex');
      console.log(p.name);

      // console.log(Person.version);
      console.log(Person.getVersion());

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

1.为什么需要私有属性和方法
      一般情况下，类的属性和方法都是公开的
      公有的属性和方法可以被外界修改，造成意想不到的错误
      class Person {
        constructor(name) {
          this.name = name;
        }

        speak() {
          console.log('speak');
        }

        getName() {
          return this.name;
        }
      }
      const p = new Person('Alex');
      console.log(p.name);
      p.speak();

      // ....
      p.name = 'zs';
      console.log(p.name);

      2.模拟私有属性和方法
      2.1._ 开头表示私有
      class Person {
        constructor(name) {
          this._name = name;
        }

        speak() {
          console.log('speak');
        }

        getName() {
          return this._name;
        }
      }
      const p = new Person('Alex');
      // console.log(p.name);
      p.name = 'zd';
      console.log(p.getName());
 // 2.2.将私有属性和方法移出类

      (function () {
        let name = '';

        class Person {
          constructor(username) {
            // this.name = name;
            name = username;
          }

          speak() {
            console.log('speak');
          }

          getName() {
            return name;
          }
        }

        window.Person = Person;
      })();

      (function () {
        const p = new Person('Alex');
        console.log(p.name);
        console.log(p.getName());
      })();

三、Class的继承

1、extends

在这里插入图片描述

// 1.子类继承父类
      class Person {
        constructor(name, sex) {
          this.name = name;
          this.sex = sex;

          this.say = function () {
            console.log('say');
          };
        }

        speak() {
          console.log('speak');
        }

        static speak() {
          console.log('static speak');
        }
      }
      Person.version = '1.0';

      // class Programmer extends Person {
      //   constructor(name, sex) {
      //     super(name, sex);
      //   }
      // }

      // const zs = new Programmer('zs', '男');
      // console.log(zs.name);
      // console.log(zs.sex);
      // zs.say();
      // zs.speak();
      // Programmer.speak();
      // console.log(Programmer.version);

      // 2.改写继承的属性或方法
      class Programmer extends Person {
        constructor(name, sex, feature) {
          // this.feature = feature; ×

          // this 操作不能放在 super 前面
          super(name, sex);

          // this.feature = feature;
        }

        hi() {
          console.log('hi');
        }

        // 同名覆盖
        speak() {
          console.log('Programmer speak');
        }

        static speak() {
          console.log('Programmer static speak');
        }
      }
      Programmer.version = '2.0';

      const zs = new Programmer('zs', '男', '秃头');
      console.log(zs.name);
      console.log(zs.sex);
      console.log(zs.feature);
      zs.say();
      zs.speak();
      zs.hi();
      Programmer.speak();
      console.log(Programmer.version);

2、super

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

1.作为函数调用
      代表父类的构造方法，只能用在子类的构造方法中，用在其他地方就会报错
      super 虽然代表了父类的构造方法，但是内部的 this 指向子类的实例
      class Person {
        constructor(name) {
          this.name = name;

          console.log(this);
        }
      }
      class Programmer extends Person {
        constructor(name, sex) {
          super(name, sex);
        }

        // hi() {
        //   super(); // ×
        // }
      }
      // new Person();
      new Programmer();

      2.作为对象使用
      2.1.在构造方法中使用或一般方法中使用
      super 代表父类的原型对象 Person.prototype
      所以定义在父类实例上的方法或属性，是无法通过 super 调用的
      通过 super 调用父类的方法时，方法内部的 this 指向当前的子类实例
      class Person {
        constructor(name) {
          this.name = name;

          console.log(this);
        }

        speak() {
          console.log('speak');
          // console.log(this);
        }

        static speak() {
          console.log('Person speak');
          console.log(this);
        }
      }
      class Programmer extends Person {
        constructor(name, sex) {
          super(name, sex);

          // console.log(super.name);
          // super.speak();
        }

        // hi() {
        //   super(); // ×
        // }

        speak() {
          super.speak();
          console.log('Programmer speak');
        }

        // 2.2.在静态方法中使用
        // 指向父类，而不是父类的原型对象
        // 通过 super 调用父类的方法时，方法内部的 this 指向当前的子类，而不是子类的实例
        static speak() {
          super.speak();
          console.log('Programmer speak');
        }
      }
      // new Person();
      // new Programmer();
      Programmer.speak();

      // 3.注意事项
      // 使用 super 的时候，必须显式指定是作为函数还是作为对象使用，否则会报错
      class Person {
        constructor(name) {
          this.name = name;
        }

        speak() {
          console.log('speak');
        }
      }
      class Programmer extends Person {
        constructor(name, sex) {
          super(name, sex);

          // console.log(super);
          // console.log(super());
          // console.log(super.speak);
        }
      }
wuyi~lin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
python入门-Python入门之类(class)
q6q6q的专栏
10-28 1881
Python3 面向对象Python从设计之初就已经是一门面向对象的语言，正因为如此，在Python中创建一个类和对象是很容易的。本章节我们将详细介绍Python的面向对象编程。如果你以前没有接触过面向对象的编程语言，那你可能需要先了解一些面向对象语言的一些基本特征，在头脑里头形成一个基本的面向对象的概念，这样有助于你更容易的学习Python的面向对象编程。接下来我们先来简单的了解下面向对象的一些...
JAVA基础（笔记）
qq_48385654的博客
08-15 475
q2fefg
Class.forName()的作用与使用总结
fengyuzhengfan的专栏
07-24 12万+
Class.forName是一个静态方法，同样可以用来加载类。该方法有两种形式：Class.forName(String name, boolean initialize, ClassLoader loader)和 Class.forName(String className)。第一种形式的参数 name表示的是类的全名；initialize表示是否初始化类；loader表示加载时使用的类加载器。第二种形式则相当于设置了参数 initialize的值为 true，loader的值为当前类的类加载器。
Class类常用方法介绍、获取Class对象的方式、通过反射实现各种骚操作
Java技术攻略的博客
03-07 3786
加载和连接是JVM来完成的，我们无法控制，而初始化阶段就是我们自己可控的了（比如你在静态代码里面写什么内容是你自己可以控制的）用户可能输入1，也可能输入2，Dog类不一定会用到，静态加载不管那么多，它在编译的时候就会加载这个类，并且进行语法的校验。Person类是动态加载，所以，没有编写Person类也不会报错，只有当动态加载该类时，才会报错。动态加载 : 运行时加载需要的类,如果运行时不用该类，则不报错，降低了依赖性。静态加载 : 编译时加载相关的类，如果没有则报错，依赖性太强。
【知识点】class类（python）
echo_gou的博客
08-09 591
类就是一个模板，模板里可以包含多个函数，函数里实现一些功能
es6-notes:ES6+ 学习笔记 https
05-07
ES下一个学习笔记 数字 大批 目的 功能 班级 象征 放 地图 正则表达式 代理人 反映 承诺 发电机 迭代器 模块 ES2016（ES7） Array.prototype.includes（） 求幂运算符 ES2017（ES8） 细绳 目的 异步等待 尾随...
ES6-learning：学习ES6的笔记
02-05
ES6 《深刻理解ES6》学习笔记本文用于汇总链接到各个子章节的内容，欢迎大家题issues和PR，如果对你有帮助，也可以给star支持:) ，感谢原作者以及社区里提供翻译人员。目录 思维导图第一章块级绑定第二章弦和正则...
ES6-基础学习笔记
08-24
ES6 基础学习笔记 ES6 是 ECMAScript 的第六版，发布于 2015 年 6 月，作为 JavaScript 的标准规范。ES6 的出现极大地改变了 JavaScript 的发展方向，引入了许多新的语法特性和功能，提高了 JavaScript 的编程能力...
前端学习笔记-ES6-ES11
05-26
ES6-ES11学习笔记
es6-for-everyone
05-02
**ES6 for Everyone 学习笔记** ES6（ECMAScript 2015）是JavaScript语言的一个重要更新，引入了大量新特性，提升了代码的可读性和编写效率。Wes Bos的“ES6 for Everyone”课程是学习这些新特性的绝佳资源。以下是...
Class类的介绍和基本使用方法
Vicali的博客
12-07 8937
一、Class类的介绍 Class类的对象表示的是一个，类在内存中的class文件。 Class clz = String.class 表示String在内存中的class文件。 二、Class类的使用 1.获得Class类的对象 通过Class clz = Class.forName(“完全限定名”); 获得Class类的对象封装class文件 完全限定名：包名+类名. 通过类名获得Class对象，类名.class 通过某个类的对象，获得Class文件,String类在内存中的class文
Class（类）
JOKEthel的博客
12-28 5495
前言 ES6引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 但是JS 中并没有一个真正的 class 原始类型， class 仅仅只是对原型对象运用语法糖。所以，只有理解如何使用原型对象实现类和类继承，才能真正地用好 class。 基本语法 class Person{ constructor(name,age){ this.name = name; this.age = age; } Say(){
简单了解class类
最新发布
owerm的博客
01-04 1263
方法名：实例类.getClass()方法参数：null返回类型：Class<?
python语法教程——class类
点点点
10-10 4867
这里我们就以输出Hello world为例创建我们的第一个类。可以看到，我们创建了一个名为hello的类，并用它实例化了一个to_hello对象，通过调用类中的output方法，我们成功输出了Hello world！首先，我们定义一个student类，用于存放学生姓名。先运行一下看看。def output(self) : print('My name is' , self . name) stu_1 = student('老王') stu_1 . output()My name is 老王。
Person类
qq_45361567的博客
02-04 2844
编写java程序用于显示人的姓名和年龄 定义一个人类Person该类中应有的两个私有属性：姓名name和年龄age 定义构造方法用来初始化数据成员。再定义display方法将姓名和年龄打印出来 在main方法中创建人类然后将信息显示 Person类 class Person{ private String name; private int age; public Person() { } public Person(String name, int age) {
python中class的定义及使用
热门推荐
pdstar的博客
06-05 15万+
#类(Class): 用来描述具有相同的属性和方法的对象的集合。它定义了该集合中每个对象所共有的属性和方法。 #对象：它是类的实例化。 #方法：类中定义的函数。 #类(Class) 由3个部分构成: ''' 类的名称:类名 类的属性:指对象的特征（一组数据） 类的方法:允许对象进行操作的方法 (行为/功能) ''' # Python 3.x中取消了经典类，默认都是新式类。 # 新式类的语法 ...
C++语言之类class
weixin_34245169的博客
02-16 182
在现实世界中，经常有属于同一类的对象。例如，你的自行车只是世界上很多自行车中的一辆。在面向对象软件中，也有很多共享相同特征的不同的对象：矩形、雇用记录、视频剪辑等。可以利用这些对象的相同特征为它们建立一个集合。而这个集合就称为类。类是定义同一类所有对象的变量和方法的蓝图或原型。例如，可以建立一个定义包含当前档位等实例变量的自行车类。这个类也定义和提...
Class类型详解
编程技术分享
05-05 5382
1. 简介 在Java世界里，一切皆对象。从某种意义上来说，Java有两种对象：实例对象和Class对象。每个类的运行时的类型信息就是用Class对象表示的。它包含了与类有关的信息。其实我们的实例对象就通过Class对象来创建的。Java使用Class对象执行其RTTI（运行时类型识别：Run-Time Type Identification），多态就是基于RTTI实现的。 每一个类都有一个Cla...
基础 | Class类详解
Java名企面试吧
11-01 746
Object类中的getClass()方法即返回一个Class类型的实例，那么 「Class类到底是什么？从何而来？又有什么作用呢？」 参考答案 Class类是什么？ 先来简单了解一下Java虚拟机中类的加载过程： 「加载」阶段是「类加载」过程的第一个阶段，虚拟机需要完成以下三件事情： 通过一个类的全限定名来获取定义此类的二进制字节流（.class文件即保存着类的二进制数据）。 将该字节流所...
尚硅谷es6-es11笔记
09-10
尚硅谷ES6-ES11笔记是关于ES6到ES11版本的学习笔记。其中包括了ES6引入的类的写法，实际上ES6的Class是一个语法糖，让我们写起来更像传统的类。 此外，ES6还引入了Symbol值，除了可以定义自己使用的Symbol值，还有11...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值