JavaScript中的面向对象

news2024/11/25 10:44:10

面向对象编程是一种编程范式。

面向对象。何为对象?

复习一下:
JavaScript中的数据类型分为:
原始类型:数值型,字符串型,布尔型、ES6新增的symbol
特殊类型:undefined型,null型
组合类型:对象型Object

对象是一个组合,是一个容器。他把关于这个实物的所有属性和行为都放在了一起。例如我们把一个人给数据化了。

let p1 = {
  name:"张三",
  age:30,
  sex:"男",
  job:'程序员',
  address:'xx省xx市xxx',
  eat(){
    console.log("吃饭");
  },
  sleep(){
    console.log("睡觉");
  }
}

上面就是创建了一个对象,这个对象表示的张三这个人。
如果我要在创建一个李四 一个王五 这应该怎么办?这些对象都是同一类的东西,我们可以使用一个模板,然后调用这个模板,就可以得出这一类的对象、这个模板就是
那么,JavaScript中如何创建类呢?

构造函数创建类

在es5中,是通过构造函数来创建类的。

function Person(name,age,sex,address){
  this.name = name;
  this.age = age;
  this.sex = sex;
  this.address = address;
  this.eat = function(){
    console.log('吃饭');
  };
  this.sleep = function(){
    console.log("睡觉");
  }
}

var p1 = new Person("张三",30,'男','北京');
p1.eat();
p1.sleep();

var p2 = new Person("李四",20,'男','上海');
p2.eat();
p2.sleep();

ps:javascript这个语言,是一个养成类的语言,历史变化太多,导致创建一个对象有很多办法。这里我们只说最后,最成熟的办法。

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
  }
  Person.prototype.eat = function(){
    console.log('吃吃吃');
  }
  let p = new Person('张三',20,'男');
  p.eat();
  console.log(p);

通过上面的代码,我们可以知道:

  1. 构造函数也是一个函数,只不过通常构造函数的首字符大写;
  2. 调用构造函数的时候,必须加new 关键字,才可以创建对象;
  3. 构造函数内部使用this,this指向的是新创建的对象。

使用new关键字调用函数的时候,程序到底是怎么执行的呢?

  1. 创建一个空对象 {};
  2. 将构造函数中的this指针指向创建的空对象;
  3. 执行构造函数的函数体,给空对象添加属性与属性值;
  4. 最后返回这个对象。

但是上面的方法有个问题,就是对于eat sleep这些行为,没有必要每一个对象都创建一个。可以把eat sleep这些行为,放在一个地方,并且这个地方的东西,可以被这个构造函数创建的所有的类共享。这个地方就是原型对象

原型对象

  • 每一个函数都是一个对象,是Function类的对象;
  • 每一个函数都有一个原型属性,属性值叫做原型对象。
  • 这个原型属性原型对象是针对构造函数来讲的;
  • 构造函数创建的对象共享该构造函数的原型对象上的所有属性。

构造函数、原型对象、实例
所以我们最后es5中创建类的成熟写法是:

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
  }
  Person.prototype.eat = function(){
    console.log('吃吃吃');
  }
  let p = new Person('张三',20,'男');
  p.eat();
  console.log(p);

面向对象的三大特点:封装、继承、多态。

上面创建类的过程就是封装;
接下来,看下如何实现继承。

继承

ES5的继承是基于原型对象的。

继承就是子类可以使用父类的东西;
每一个构造函数创建的对象都可以共享(使用)其原型对象的属性和方法;
所以,当一个子类想要继承父类的属性和方法的时候,就要把父类对象放在子类的构造函数的原型对象上。

function A()
		{
			this.a = "aaa";
		}

		function B(){
			this.b = "bbb";
		}
		B.prototype = new A();

		//原型继承: 将子类的构造函数的原型指针指向父类的实例

		var b1 = new B();
		console.log(b1);
		console.log(b1.b);
		console.log(b1.a);//可以使用另一个对象中的属性 完成了继承

每一个构造函数都有一个原型对象,原型对象中的属性与方法可以被这个构造函数创建出来的所哟的实例共享。那么,如果将A构造函数的原型指向另一个对象的实例new B(),那个这个对象的实例b中也有一个指针指向了B的原型对象,依次下去,就形成原型链。

es6中的类封装

es6中引入了关键字class进行封装。代码的可读性更好。

class Person{
            constructor(name,age,sex){
                this.name = name;
                this.age = age;
                this.sex = sex;
            }
            eat(){
                console.log(this.name + '吃饭');
            }
            sleep(){
                console.log('睡觉');
            }
        }

        let p = new Person('张三',20,'男');
        p.eat();
        p.sleep();

注意:
1、class关键字;
2、每一个类中都必须包含一个名为constructor的构造函数。注意函数名必须是constructor
3、calss中封装的方法相当于是添加到了原型对象上;

es6中的类的继承

class Person{
            constructor(name,age,sex){
                this.name = name;
                this.age = age;
                this.sex = sex;
            }
            eat(){
                console.log(this.name + '吃饭');
            }
            sleep(){
                console.log('睡觉');
            }
        }

        let p = new Person('张三',20,'男');
        p.eat();
        p.sleep();

        class Teacher extends Person{
            constructor(name,age,sex,subject){
                super(name,age,sex);
                this.subject = subject;
            }

            wrok(){
                console.log(this.name+"老师正在上课。科目是:"+this.subject);
            }
        }

        let t = new Teacher('王五',30,'男','数学');
        t.eat();
        t.wrok();

注意:
1、继承的关键字 extends
2、子类中调用父类,是通过super关键字实现的。

目前推荐es6的写法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/701641.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

chatgpt赋能python:隐藏输入:保护密码和敏感数据的有效方法

隐藏输入:保护密码和敏感数据的有效方法 在今天的数字时代,网络安全成为了无所不在的话题。密码和敏感数据的泄漏是任何人都不想看到的结果。因此,在这种情况下,隐藏输入成为了保护我们的密码和敏感数据的有效方法。 Python是数…

el-date-picker设置右侧显示图标

<template><div><el-form ref"form" label-width"100px"><el-form-item label"日期&#xff1a;" class"date_box"><el-date-picker v-model"time" type"date" :clearable"true&…

【GaussDB分布式特性】

GaussDB分布式特性 实验环境一、分布式架构二、分片和分区 实验环境 华为云GaussDB云数据库&#xff0c;规则如下&#xff1a; 集群拓扑结构&#xff0c;如下&#xff1a; 一、分布式架构 逻辑架构 常用部署方式 部署说明&#xff1a; 1.双AZ采用带第三方仲裁方式部署&am…

利用低代码平台实现协同办公,助力企业提升效益

概要&#xff1a;本文介绍了协同办公的作用&#xff0c;以及利用低代码平台实现协同办公的优势。同时也分享了天翎为华晨汽车打造的低代码协同工具&#xff0c;帮助企业提高管理效率&#xff0c;改善运营模式&#xff0c;提升产品质量及生产精益化。展示了咨询库、原料质量录入…

无锁队列ringbuff实现以及性能

文章目录 一、使用场景二、对比有锁优势三、无锁队列实现方式四、循环队列实现1&#xff09;数据结构设计3&#xff09;代码实现4&#xff09;性能测试5&#xff09;总结 一、使用场景 无锁队列主要适用于高并发场景或者对性能要求较高的场景&#xff0c;主要使用场景有如下几…

pytorch的permute(dims) 函数的功能详解

有三块 二维矩阵 如下 把二维矩阵堆叠起来&#xff0c;就是三维 矩阵 这样的矩阵 从x方向看&#xff08;0维&#xff09; 有三块 记为3&#xff0c;每块从y方向看&#xff08;1维&#xff09;的行是3&#xff0c;从z方向看&#xff08;2维&#xff09;列也是3&#xff0c;故三…

计算机中丢失mfc140.dll怎么解决?mfc140.dll是什么文件?

在计算机运行软件或者游戏的时候&#xff0c;提示mfc140.dll丢失&#xff0c;无法正常启动运行。 mfc140.dll是Windows操作系统中用于支持C编程语言的一个动态链接库&#xff0c;它包含了C运行时库的一些基本功能。用于支持Microsoft Visual Studio的MFC&#xff08;Microsoft …

论文解读:FastSAM | Fast Segment Anything | 基于yolov8-seg实现 比SAM快50倍

发表时间&#xff1a;2023.06.21 论文地址&#xff1a;http://export.arxiv.org/pdf/2306.12156 项目地址&#xff1a;https://github.com/CASIA-IVA-Lab/FastSAM 最近提出的任意分割模型&#xff08;SAM&#xff09;在许多计算机视觉任务中产生了重大影响。它正在成为许多高级…

NIO总结

简要介绍 NIO&#xff08;Non-blocking IO&#xff09;是Java 1.4版本开始引入的一个新的IO API&#xff0c;旨在代替传统IO&#xff0c;它引入了缓冲区和通道的概念&#xff0c;通过选择器实现多路复用。 传统IO会区分字节流InputStream和OutputStream以及字符流Reader和Wri…

GD32 时钟和晶振修改

芯片型号&#xff1a;gd32f470zi 库版本&#xff1a;GD32F4xx_Firmware_Library_V3.0.4 当需要修改外部晶振和主频时需要修改到以下几个地方 1.gd32f4xx.h //此宏定义为我们实际使用的外部晶振频率&#xff0c;此处改为实际使用的25M #define HXTAL_VALUE ((uint32_t)2…

单片机学习 13-I2C_EEPROM

I2C-EEPROM 实验 ​ 这一章我们来学习如何使用 51 单片机的 IO 口模拟 I2C 时序&#xff0c;并实现与AT24C02&#xff08;EEPROM&#xff09;之间的双向通信。开发板板载了 1 个 EEPROM 模块&#xff0c;可实现IIC 通信。本章要实现的功能是&#xff1a;系统运行时&#xff0c…

如何排查 Electron V8 引发的内存 OOM 问题

经过长达大半年时间的崩溃治理后&#xff0c;基于 Electron 框架开发的新版 PC 淘宝直播推流客户端的稳定性终于赶超基于QT 框架开发的旧版本了。剩下的崩溃问题中有 40% 是跟内存 OOM 有关&#xff0c;其中 V8FatalErrorCallback js heap OOM 问题整整困扰了我一个多月。历经千…

Pytorch--模型微调finetune--迁移学习 (待继续学习)

https://www.bilibili.com/video/BV1Z84y1T7Zh/?spm_id_from333.788&vd_source3fd64243313f29b58861eb492f248b34 主要方法 torchvision 微调timm 微调半精度训练 背景&#xff08;问题来源&#xff09; 解决方案 大模型无法避免过拟合&#xff0c;

嵌入式综合性开源项目分享

不定期有小伙伴问&#xff1a; 哪里有好的嵌入式项目&#xff1f; 怎么才能提高编程水平&#xff1f; 有实战项目可以分享一下吗&#xff1f; 目录 第一&#xff1a;嵌入式综合Awesome Embedded 第二&#xff1a;多功能按键MultiButton 第三&#xff1a;软件定时器模块M…

计算机网络学习笔记-应用层

目录 概述 客户-服务器方式&#xff08;C/S&#xff09; 对等方式&#xff08;P2P&#xff09; 域名系统DNS 域名 四种类型 根域名服务器 顶级域名服务器 权限域名服务器 本地名服务器 域名解析过程 万维网WWW 超媒体与超链接 工作方式 URL&#xff08;统一资源…

Spring Boot 中的 WebSocketMessageBrokerConfigurer

Spring Boot 中的 WebSocketMessageBrokerConfigurer 在现代 Web 应用程序中&#xff0c;WebSocket 已成为一种流行的通信协议&#xff0c;它允许客户端和服务器之间实时双向通信。在 Spring Boot 中&#xff0c;我们可以使用 WebSocketMessageBrokerConfigurer 接口来配置 We…

vivo 自研鲁班分布式 ID 服务实践

作者&#xff1a;vivo IT 平台团队- An Peng 本文介绍了什么是分布式ID&#xff0c;分布式ID的业务场景以及9种分布式ID的实现方式&#xff0c;同时基于vivo内部IT的业务场景&#xff0c;介绍了自研鲁班分布式ID服务的实践。 一、方案背景 1.1 分布式ID应用的场景 随着系统的…

【Servlet】HttpServletRequest、HttpServletResponse

目录 &#x1f381;1 HttpServletRequest &#x1f4a5;1.1 通过 query string 来进行传递 &#x1f437;1.2 通过 body (form) 来进行传递 &#x1f6f8;1.3 通过 body(json) 来进行传递 &#x1f358;2. HttpServletResponse &#x1f476;2.1 为响应设置状态码 200 …

JVM 常量池

一、常量池使用 的数据结构 常量池底层使用HashTable key 是字符串和长度生成的hashValue&#xff0c;然后再hash生成index, 改index就是key&#xff1b;Value是一个HashTableEntry&#xff1b; 1、key hashValue hash string(name&#xff0c; len) index hash to…

LeetCode 打卡day48--打家劫舍I, II, III

一个人的朝圣 — LeetCode打卡第48天 知识总结 Leetcode 198. 打家劫舍题目说明代码说明 Leetcode 213. 打家劫舍 II题目说明代码说明 Leetcode 337. 打家劫舍 III题目说明代码说明 知识总结 今天全是打家劫舍系列的题目, 还挺有意思的 Leetcode 198. 打家劫舍 题目链接 题目…