JavaScript面向对象

2023-10-26

JavaScript面向对象:

面向过程

面向过程就是讲需求一步一步自己完全实现
如:一堆衣服,需要自己一件一件洗。

面向对象

面向对象是把有共同特征的方法抽取为类
比如:一堆衣服,都需要洗,创建洗衣机类 女朋友类,让她洗。

类的定义和使用:

定义格式:

    class 类名 {
        //构造方法
        constructor(变量列表) {
     		变量赋值
        }

        方法名(参数列表) {
        	方法体;
        	return;
        }

第一种:class类{}

使用:let 对象名 = new 类名();

<script>
    //定义Person类
    class Person {
        //构造方法
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }

        //show方法
        show() {
            document.write(this.name + "," + this.age + "<br>");
        }

        //eat方法
        eat() {
            document.write("吃饭...");
        }
    }

    //使用Person类
    let p = new Person("张三", 23);
    p.show();
    p.eat();
</script>

第二种:字面量定义

使用:对象名.方法

<script>
    // 定义类
    let person = {
        name: "itzhuzhu",
        age: 23,
        // 定义数组
        hobby: ["看美女", "想美女", "玩美女"],

        eat: function () {
            document.write("看美女吃饭");
        }
    };
    // 使用类和方法
    document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby.length);
    person.eat();
</script
继承:

让类与类产生子父类的关系,子类可以使用父类有权限的成员。
继承关键字:extends
顶级父类:Object

<script>
    //定义Person类
    class Person{
        //构造方法
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        //eat方法
        eat(){
            document.write("吃饭...");
        }
    }

    //定义Worker类继承Person
    class Worker extends Person{
        constructor(name,age,salary){
            super(name,age);
            this.salary = salary;
        }

        show(){
            document.write(this.name + "," + this.age + "," + this.salary + "<br>");
        }
    }

    //使用Worker
    let w = new Worker("张三",23,10000);
    w.show();
    w.eat();
</script
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript面向对象 的相关文章

  • 我怎样才能向下滚动到多行文本框的底线,Javascript的scrollIntoView对此不起作用

    我正在尝试创建一个基本的视频和文本聊天网站 在房间页面中 我有 Flash 视频和一个文本框 多行 其中显示发送到房间的所有消息和一个文本框 供用户通过单击输入和发送旁边的按钮 tr td td tr
  • Node + Express + Nginx 未设置 Cookie

    我有一个使用 Express 的 Node 应用程序 我尝试为我的客户端设置 cookie 它在本地环境 http 上运行良好 但是一旦我投入生产 https 我就很好地收到了cookie 我可以在响应中看到它 但它没有设置 任何想法 Ng
  • 如何在 jquery 上并排区分 mouseout/leave 事件?

    有没有办法知道鼠标事件是否已从元素的特定一侧离开 我的意思是 我有一个带有 mouseover mouseenter 事件的 DIV 并且我只想在鼠标离开到元素的左侧时触发该操作DIV 并向右 但如果它从底部或顶部离开 则不应触发任何操作
  • jquery $('id').text 带粗体

    我有一个 jquery 可以更改链接的文本 如下所示 if urlfind gt 0 linkurl text More info 和 HTML a href a 我试图为此链接添加粗体 但添加 b More Info b 让它们在文本本身
  • 计算链接上的点击次数(不带 onclick)[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我有诸如此类的链接 a href h
  • Javascript:如何简化具有多个 OR 条件的 if 语句?

    很抱歉 如果我在写这篇文章时犯了错误 我是新来的 不知道这是如何工作的 希望我能尽快学会 我也是 JavaScript 新手 所以问题是 我有这个代码 elements js文件 我无法让它工作 放这个有用吗 if codePrompt c
  • 这个作用域/闭包什么时候在 javaScript 中被垃圾回收?

    我正在做一门课程 该课程正在讨论范围 闭包并简要提到垃圾收集 课程中提出一个问题 范围保持多久 答案是 直到 不再有任何提及它 是的 所以我们基本上说的是 是的 闭包有点像对隐藏范围对象的引用 所以只要有一些函数仍然有一个闭包 范围 该范围
  • 将数组传递给 include() javascript

    我试图找出一个字符串是否包含存储在数组中的多个字符串 includes 所以我尝试过 let string hello james console log string includes hello james 但它被返回为false 当我
  • javascript RegExp 的奇怪行为:相同的正则表达式产生不同的结果[重复]

    这个问题在这里已经有答案了 可能的重复 为什么 Javascript 中带有全局标志的 RegExp 会给出错误的结果 https stackoverflow com questions 1520800 why regexp with gl
  • 如何为 HTML 验证提供自定义验证错误消息?

    当我使用默认 HTML 验证时 它会显示默认错误消息 这不是我想向客户显示的 我需要自定义消息并为每个验证提供不同的信息 例如最小 最大 类型和要求 例如 该字段为必填项 值不匹配 参考传统的HTML代码
  • TinyMCE 选择文本并使用 javascript 激活链接对话

    我正在尝试编写一个自动化 使用黄瓜 水豚 硒 测试 它将在tinymce框中选择一些文本 单击链接按钮 然后打开链接选择页面 但链接按钮仅在选择某些文本时才变为活动状态 所以第一轮 tinyMCE activeEditor selectio
  • Vue Chart.js - 数据变化时图表不更新

    我正在使用 Vue js 和 Chart js 绘制一些图表 每次我调用该函数时generateChart 图表不会自动更新 当我在 Vue Devtools 中检查数据时 它们是正确的 但图表没有反映数据 但是 当我调整窗口大小时 图表确
  • 如何将对象传递给 onclick 事件[重复]

    这个问题在这里已经有答案了 可能的重复 Javascript 循环内的事件处理程序 需要闭包吗 https stackoverflow com questions 341723 event handlers inside a javascr
  • 在模型对象上设置属性?

    Hi 我正在构建 ASP NET MVC 站点并遇到了问题 在我的项目中 我得到了一个 modelview 类 其中包含几个属性 例如 public class myModelView public int MyProperty1 get
  • javascript 中的类和类名有什么区别?

    为了找到某个类名的子对象 我必须创建自己的辅助函数 findChildrenByTagName function obj name var ret for var k in obj children if obj children k cl
  • Html页面在底部加载

    我需要一个 HTML 页面在页面加载时自动向下滚动 所以基本上加载在底部 可以使用JavaScipt吗 请您帮助我或引导我走向正确的方向 感谢所有帮助 谢谢 尝试这个 window scroll 0 document documentEle
  • 是否包括触摸事件客户端X/Y 滚动?

    我正在尝试获取相对于的触摸坐标viewport来自触摸事件的浏览器 例如触摸启动 我尝试从 clientX Y 属性获取它们 但两者实际上都返回包括滚动在内的值 这是违反规范的 因为它说 clientX Y 应该返回坐标而不滚动 我尝试添加
  • 展平数组中的对象

    大家好 我从响应中获取了一系列对象 我需要将所有学生对象展平为简单的学生姓名 但不确定如何进行 任何帮助将不胜感激 数组示例 students id 123456 name Student Name active true students
  • Java 将函数添加到 json 对象而不使用引号。

    我正在用 java 构建一个 json 对象 我需要将一个函数传递到我的 javascript 中并使用 jquery isFunction 对其进行验证 我遇到的问题是我必须将 json 对象中的函数设置为字符串 但 json 对象将周围
  • JS 中的展开/休息运算符如何工作? [复制]

    这个问题在这里已经有答案了 我正在努力完全理解扩展 休息运算符在 JS 中的工作原理 我已经阅读了 MDN 文档 但我仍然不完全清楚 我在下面提供了一个示例 我在其中使用了它并且它按预期工作 const users name Samir a

随机推荐

  • RocketMQ吐血总结

    RocketMQ吐血总结 架构 概念模型 最基本的概念模型与扩展后段概念模型 存储模型 RocketMQ吐血总结 User Guide RocketMQ是一款分布式消息中间件 最初是由阿里巴巴消息中间件团队研发并大规模应用于生产系统 满足线
  • 矩阵分解(1)-- 矩阵分解之LU、LDLT、Cholesky分解

    1 分类 矩阵分解 decomposition factorization 是多半将矩阵拆解为数个三角形矩阵 triangular matrix 依使用目的的不同 可分为几类 与线性方程解法相关的矩阵分解 LU分解 奇异值分解 QR分解 极
  • 使用Tmux的基本操作与后台运行命令

    文章目录 Tmux简介 Tmux安装 Tmux基本使用 Tmux后台运行程序 Tmux简介 Tmux是 终端复用器 经常看到这种说法 它是可以把一次会话中的命令记录下来的工具 会话 终端 命令 程序的关系是 终端 交互的工具 gt 会话 一
  • 初始化字典的6种方式

    查了这么多资料 我就选取几个最常见的初始化字典的方法来说明一下吧 1 最直观 最易懂的 dic1 1years 1 2years 2 3years 3 4years 4 5years 5 2 dic2 dict t 1 p 2 注意 其中等
  • Sqli-labs靶场笔记5(Less8 布尔型注入)

    Less8跟之前的Less5 Less6一样 也可以用布尔型注入来做 我们简单的测试就可以知道闭合方式也是 所以关于原理部分就不写了 有疑惑的可以直接看我前面的博客 下面直接给出具体payload 报数据库名 id 1 and substr
  • 武邑中学2021高考成绩查询,武邑中学高考成绩

    问 衡水武邑中学怎么样 答 收费2 3万 大前年中考400多分的进衡水二中的去年高考600多分 而中考400多分去武中的去年高考300分都不到 这可是有名有姓的真人的真实情况 光复习生每年就60多个班 应届考生30多个班 每年六七千人都抬不
  • 箭头函数()=>{}与function的区别

    1 箭头函数与function定义函数的写法 function function fn a b return a b arrow function var foo a b gt return a b 2 this的指向 使用function
  • uni-app开发总结分享

    目录 一 uni app介绍 二 uni app和vue的具体区别 1 组件 标签的变化 2 js 3 uniapp自带路由和请求方式 三 环境搭建 1 安装HbuilderX 2 创建uni app项目 四 项目目录结构 五 运行uni
  • 安装mysql提示3306端口已经被占用解决方案

    今天遇到的问题是这样的 之前已经安装过mysql了 一直用的好好的 但是今天开启服务时报异常 无法启动 为了省事 于是想到卸载重装 在安装的过程中发现3306已经被占用 这也是一开始服务无法启动的原因 看到有人说用fport查看端口号 于是
  • JSP学生网上选课系统设计(源代码+论文+答辩PPT)

    QQ 19966519194 摘要 随着科学技术的不断提高 计算机科学日渐成熟 其强大的功能已为人们深刻认识 它已进入人类社会的各个领域并发挥着越来越重要的作用 学生选课系统作为一种现代化的教学技术 以越来越受到人民的重视 是一个学校不可缺
  • [Unity][ShaderGraph][FlowCanvas] SetFloat 无效:通过脚本控制 shader 的动态参数时需要使用参数的引用名

    我的 shader 很简单 就是一个 tiling and offset 制作滚动效果 然后我想用一个脚本控制 speed 但是实际运行没有起效果 一开始我看的这个 然后用的 sharedmaterial https forum unity
  • Stable Diffuse AI 绘画 之 ControlNet 插件及其对应模型的下载安装

    Stable Diffuse AI 绘画 之 ControlNet 插件及其对应模型的下载安装 目录 Stable Diffuse AI 绘画 之 ControlNet 插件及其对应模型的下载安装 一 简单介绍 二 ControlNet 插
  • Swift - 将String类型的数字转换成数字类型(支持十进制、十六进制)

    https www cnblogs com Free Thinker p 7243683 html 1 十进制的字符串转成数字 Swift中 如果要把字符串转换成数字类型 比如整型 浮点型等 可以先转成NSString类型 让后再转 1 2
  • JAVA:jdbc:sqlserver 连接SQLserver实例名

    weChatjdbc driverClassName com microsoft sqlserver jdbc SQLServerDriver weChatjdbc url jdbc sqlserver 127 0 0 1 instance
  • Ubuntu服务器下安装FastDFS及nginx配置访问等问题记录

    Ubuntu服务器下安装FastDFS及nginx配置访问 下载对应包 编译环境 包解压环境配置 配置nginx模块和安装nginx来进行访问该图片 下载对应包 下载方式一 直接使用 wget 下载 如果太慢 可以去github下载 然后上
  • 基于Matlab开发的动态机器人轨迹仿真

    基于Matlab开发的动态机器人轨迹仿真 近年来 机器人技术的发展已经进入了高速发展时期 控制与仿真技术作为机器人领域中至关重要的一环 也随之发展壮大 而在动态机器人轨迹仿真方面 Matlab作为一款具备强大数学计算能力的软件 在该领域中得
  • QT实现sqlite数据库连接池

    ifndef CONNECTIONPOOL H define CONNECTIONPOOL H FileName 数据库连接池 Function 获取连接时不需要了解连接的名字 支持多线程 保证获取到的连接一定是没有被其他线程正在使用 按需
  • MySQL 远程登录与其常用命令的介绍

    以下的文章主要介绍的是MySQL 远程登录与其常用命令的介绍 MySQL 远程登录与其常用命令之所以能在很短的时间内被人们广泛的应用 原因也是因为它们的独特功能 以下的文章就有对其相关内容的介绍 MySQL 远程登录及常用命令 第一招 My
  • Unbantu22.04使用DevStack一键部署OpenStack(使用nat静态IP)

    d 学习openstack的小白 第一步就遇到了大麻烦 下载并部署Openstack 传统的基于组件 一个个的安装配置更加麻烦 使用DevStack工具 一键部署可能是个不错的选择 But devstack部署期间总是会出现各种各样的错误
  • JavaScript面向对象

    JavaScript面向对象 面向过程 面向过程就是讲需求一步一步自己完全实现 如 一堆衣服 需要自己一件一件洗 面向对象 面向对象是把有共同特征的方法抽取为类 比如 一堆衣服 都需要洗 创建洗衣机类 女朋友类 让她洗 类的定义和使用 定义