• 【第六部分 | JavaScript高级】1：面向对象

    目录

    【第一章】面向对象

    | Class创建、构造函数、方法

    | Class继承

    | 三个注意点

    | 静态成员

    | 原型对象 __ _proto___

    | 类的本质

    【第一章】面向对象

    | Class创建、构造函数、方法

    创建类

    1. class name {
    2. 	// class body
    3. }
    4.  
    5. var xx = new name()

    构造函数

    1. class Person {
    2.     constructor(name,age) { // constructor 构造方法或者构造函数
    3.         this.name = name;
    4.         this.age = age;
    5.     }
    6. }

     类内方法

    1. class Person {
    2.     constructor(name,age) { // constructor 构造器或者构造函数
    3.         this.name = name;
    4.         this.age = age;
    5.     }
    6.     say() {
    7.     	console.log(this.name + '你好');
    8.     }
    9. }

     代码示例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script>
    9.         class Person {
    10.             //构造函数 默认名字是constructor(){}
    11.             constructor(name , age){
    12.                 //JS可以动态生成熟悉
    13.                 this.name = name;
    14.                 this.age = age;
    15.             }
    16.  
    17.             //类内方法  不需要加function，不需要加逗号
    18.             say(){
    19.                 console.log(this.name + '你好');
    20.             }
    21.         }
    22.  
    23.         //实例化对象
    24.         var person = new Person('Klee',8);
    25.         person.say();//Klee你好
    26.         
    27.     script>
    28. head>
    29. <body>
    30.     
    31. body>
    32. html>

    | Class继承

    继承

    1. class Father{ 
    2.     // 父类
    3. }
    4.  
    5. class Son extends Father { 
    6.     // 子类继承父类
    7. }

    super关键字

    代码示例

    1. class Father {
    2. 	constructor(surname) {
    3. 		this.surname = surname;
    4. 	}
    5.     
    6. 	saySurname() {
    7. 		console.log('我的姓是' + this.surname);
    8. 	}
    9. }
    10.  
    11.  
    12.  
    13. class Son extends Father { // 这样子类就继承了父类的属性和方法
    14. 	constructor(surname, fristname) {
    15. 		super(surname); // 调用父类的constructor(surname)
    16. 		this.fristname = fristname;
    17. 	}
    18. 	sayFristname() {
    19. 		console.log("我的名字是：" + this.fristname);
    20. 	}
    21. }
    22.  
    23.  
    24.  
    25. var damao = new Son('刘', "德华");
    26. damao.saySurname();
    27. damao.sayFristname();

     

    | 三个注意点

    | 静态成员

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script>
    9.         class Person {
    10.             
    11.         }
    12.  
    13.         //实例化对象
    14.         var person = new Person('Klee',8);
    15. 		person.objName = 'objName'; //通过类的实例对象声明的变量，只可通过对应的成员调用
    16. 		Person.className = 'className';//通过类直接声明的变量是静态变量，只可用类名调用
    17.         console.log(person.objName);//objName
    18.         console.log(person.className);//Undefined
    19.         console.log(Person.objName);//Undefined
    20. 		console.log(Person.className);//className
    21.     script>
    22. head>
    23. <body>
    24.     
    25. body>
    26. html>

     

    | 原型对象 __ _proto___

    • 构造函数的缺点：每创建一个新对象，就要在内存中开辟一个新的内存空间给构造函数。

    • 因此，我们可以把所有对象公用的属性、方法，放进原型对象prototype中

    • prototype是每个对象都有的一个内置对象。对象都会有一个属性 proto 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 proto 原型的存在

    • proto对象原型和原型对象 prototype 是等价的

    • proto对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性， 因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype

    • 对象原型（ proto）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性 ，constructor 我们称 为构造函数，因为它指回构造函数本身。

    • 一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可以给原型对象采取对象形式赋 值，但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了。 此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数

    • JavaScript 成员查找机制：

     

     

    • 一般，我们把公共属性放在构造函数中；把公共方法，放到原型对象身上

    • 构造函数中的this 指向我们实例对象. 原型对象里面放的是方法, 这个方法里面的this 指向的是 这个方法的调用者, 也就是这个实例对象.

      即：构造函数、原型函数的this，都指向【 【当前调用该构造/原型函数】的实例对象】

    • 代码示例：

    | 类的本质

     

     

     

  • 相关阅读:
    WRF后处理：python cartopy绘制土地利用/土地分类图//python绘制WRF下垫面类型（以北极为例）
    【Excel】 给证件照换底色
    快速搭建 SpringCloud Alibaba Nacos 配置中心
    vs中pygame窗口不显示
    安信可 RG-02 LoRaWAN 网关集成网络配置，实现MQTT配置链接至网络服务器，实现数据打通。
    实践笔记-docker安装及配置镜像源
    数字化门店转型| 舞蹈室管理系统| 门店小程序开发教程
    uni-app：实现页面效果2（canvas绘制，根据页面宽度调整元素位置）
    “/home/test/cc/bk-server/docker-compose.yml“ docker配置
    家政系统搭建，家政预约上门小程序开发制作
  • 原文地址：https://blog.csdn.net/m0_57265007/article/details/128006251