我的 React 之旅:第 15 天

我的 react 之旅:第 15 天

面向对象编程(oop)
面向对象编程是一种基于对象概念的编程范式。

面向对象编程的关键原则
1.封装:

将相关变量和函数分组到一个对象中。鼓励减少函数中的参数,降低复杂性。例子:

function circle(radius) {    this.radius = radius;    this.draw = function() {        console.log('draw');    };}const circle = new circle(5);console.log(circle.radius); // access encapsulated propertycircle.draw(); // call encapsulated method

2.摘要:

隐藏细节和复杂性,仅暴露对象的必要部分。
简化界面并减少底层代码更改的影响。
示例:抽象方法,同时隐藏内部逻辑。

3.继承:

允许一个类(子类)继承另一个类(父类)的属性和方法。
减少冗余代码。
示例:

class animal {    eat() {        console.log("this animal is eating.");    }}class dog extends animal {    bark() {        console.log("the dog is barking.");    }}const dog = new dog();dog.eat(); // inherited from animaldog.bark();

4.多态性:

指具有多种形式的物体。
允许为不同的对象类型提供统一的接口,从而实现代码重用和灵活性。
示例:

class animal {    sound() {        console.log("this animal makes a sound.");    }}class dog extends animal {    sound() {        console.log("the dog barks.");    }}const animal = new animal();const dog = new dog();animal.sound(); // output: this animal makes a sound.dog.sound();    // output: the dog barks.

oop 的重要性

封装:降低复杂性并增强可重用性。抽象:隐藏实现细节,简化交互。继承:消除代码重复并促进重用。多态性:实现灵活性和简化的代码结构。

实际例子
类和构造函数

以结构化、简洁的方式创建对象。示例:

class product {    constructor(name, price) {        this.name = name;        this.price = price;    }    displayproduct() {        console.log(`product: ${this.name}`);        console.log(`price: $${this.price.tofixed(2)}`);    }    calculatetotal(salestax) {        return this.price + this.price * salestax;    }}const product1 = new product("laptop", 1200);product1.displayproduct();console.log(`total price: $${product1.calculatetotal(0.1).tofixed(2)}`);

与动物的传承

展示可重用性和方法重写。示例:

class Animal {    eat() {        console.log("This animal eats food.");    }}class Bird extends Animal {    fly() {        console.log("This bird can fly.");    }}const bird = new Bird();bird.eat();bird.fly();

反思
我学到了什么:

核心 oop 原则:封装、抽象、继承、多态性。降低代码复杂性和增强可重用性的实际用例。应用构造函数、方法和继承来解决现实世界的问题。

oop 是另一个层次。

明天我们再去!

以上就是我的 React 之旅:第 15 天的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1499387.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 21:44:51
下一篇 2025年12月19日 21:45:02

相关推荐

  • 优化HTML表单文件上传与URL重定向:异步操作的正确处理

    本文探讨了在html表单提交过程中,当需要异步动态设置表单 `action` 属性时,如何避免因 `e.preventdefault()` 和异步操作时序问题导致的提交失败或重定向失效。我们将深入分析常见错误模式,并提供一种将异步 `action` 更新与显式表单提交结合的解决方案,确保文件上传和页…

    2025年12月21日
    000
  • 深入探讨:检测原生密码输入框可见状态的挑战与解决方案

    本文旨在探讨如何检测html密码输入框的原生“显示密码”图标(如::-ms-reveal)的激活状态,并根据此状态触发css样式或javascript动画。我们将详细解析当前css :has()选择器与伪元素结合使用的局限性,解释为何无法直接通过原生机制检测密码可见性。最后,文章将提供一个健壮且跨浏…

    2025年12月21日
    000
  • Angular Formly 自定义组件验证消息未在失焦时显示问题的解决方案

    在 angular 应用中,当我们需要将自定义组件集成到响应式表单或 formly 表单中时,通常会实现 `controlvalueaccessor` 接口。这个接口允许自定义组件充当表单控件,与 angular 的表单系统进行双向数据绑定和状态同步。然而,一个常见的挑战是,在自定义组件中,表单验证…

    2025年12月21日
    000
  • JavaScript异步表单提交:解决动态Action与重定向失效问题

    本文深入探讨了在html表单提交过程中,当涉及异步操作动态设置 `action` 属性时,可能遇到的重定向和数据提交失效问题。核心在于理解 `e.preventdefault()` 的作用及异步函数在事件处理中的时序。教程提供了通过集中式 `onsubmit` 处理、先阻止默认行为、再异步更新 `a…

    2025年12月21日
    000
  • 实现平滑过渡的响应式导航菜单

    本教程将指导您如何使用简洁的css过渡和javascript事件监听,创建一个具有平滑滑入滑出动画效果的导航菜单。通过切换css类,我们可以优雅地控制导航菜单的可见性和动画,避免复杂的第三方库,同时强调html最佳实践,如id的唯一性。 构建可切换导航菜单:CSS过渡与JavaScript实践 在现…

    2025年12月21日
    000
  • 使用jQuery和CSS动态管理同类名元素样式:实现点击选中效果

    本教程详细阐述如何利用jquery和css为一组具有相同类名的元素实现点击选中效果。文章介绍了两种方法:一是通过css的`:focus`伪类处理可聚焦元素,二是通过jquery动态添加/移除css类,以实现更灵活和通用的选中状态样式切换,并提供了完整的代码示例和实践建议。 理解需求:动态样式切换 在…

    2025年12月21日
    000
  • 在React中利用Promise实现HTML Dialog的异步交互

    本文详细介绍了如何在React应用中,通过结合HTML的“元素和JavaScript的Promise机制,实现一个类似`window.confirm()`的异步模态对话框。我们将探讨如何利用全局状态管理来控制对话框的显示与隐藏,并捕获用户交互结果,从而实现流程的暂停与恢复。 实现异步模态对话框的需…

    2025年12月21日
    000
  • JavaScript动态创建元素与事件监听:菜单开关实战教程

    在javascript中动态创建dom元素并为其绑定事件是常见的开发需求,但若处理不当,可能导致事件监听失效。本文将深入探讨这一常见问题,并提供一套行之有效的解决方案,重点在于确保事件监听器在元素被创建并添加到dom后才进行绑定,同时兼顾代码的健壮性和用户体验,以实现如动态菜单开关等功能。 理解动态…

    2025年12月20日
    000
  • JavaScript动态创建元素事件监听:实现可开关菜单的正确姿势

    本文旨在解决javascript中动态创建dom元素(如菜单)后,无法正确为其绑定关闭事件的问题。核心在于理解事件监听器必须在元素被创建并添加到dom后才能有效绑定。文章将提供详细的解决方案,包括示例代码和最佳实践,确保动态ui组件的交互功能正常运行。 引言:动态UI与事件监听的挑战 在现代Web开…

    2025年12月20日
    000
  • Chrome扩展开发:解决图片资源加载失败的完整指南

    本文详细阐述了chrome扩展程序中图片资源加载失败的常见原因及解决方案。核心在于理解`manifest.json`中的`web_accessible_resources`配置,并掌握在内容脚本或动态生成元素中通过`chrome.runtime.geturl()`函数正确引用扩展内部图片资源的最佳实…

    2025年12月20日
    000
  • JavaScript无障碍访问性实现

    JavaScript若合理使用可提升无障碍体验,关键在于动态内容更新时采用aria-live属性、管理键盘焦点与语义化交互元素。 JavaScript在现代网页开发中扮演着重要角色,但若使用不当,可能破坏无障碍访问性(Accessibility, 简称a11y)。合理使用JavaScript可以增强…

    2025年12月20日
    000
  • Chrome 扩展程序中图片资源加载指南

    本文深入探讨Chrome扩展程序中图片资源加载不显示的问题,重点解析`manifest.json`中的`web_accessible_resources`配置、`chrome.runtime.getURL()`函数的使用,以及在JavaScript中设置`backgroundImage`时常犯的语法…

    2025年12月20日
    000
  • Chrome扩展开发:图片资源加载与显示疑难解析

    本文详细探讨Chrome扩展程序中图片资源加载不显示的问题,重点解析`manifest.json`中`web_accessible_resources`配置的重要性,以及如何在JavaScript中利用`chrome.runtime.getURL()`动态获取扩展程序内部资源的正确URL。通过具体代…

    2025年12月20日
    000
  • JavaScript日历式日期排布:优化HTML结构与事件处理

    本教程旨在解决使用javascript动态生成日历式日期排布时遇到的常见问题,特别是关于html ` ` 标签的正确处理和事件监听的优化。我们将深入探讨如何通过构建html字符串数组来避免`innerhtml`直接操作的陷阱,并采用事件委托机制实现高效、灵活的点击事件处理,从而生成一个结构清晰、功能…

    2025年12月20日
    000
  • Chrome扩展开发:解决内容脚本中图片资源不显示问题

    本文详细探讨chrome扩展开发中,内容脚本(content script)无法正确显示图片资源的问题及解决方案。核心在于理解`chrome.runtime.geturl()`的作用,并正确配置`manifest.json`中的`web_accessible_resources`,确保图片路径在ja…

    2025年12月20日
    000
  • Chrome扩展程序中图片资源加载指南:解决不显示问题

    本文旨在解决chrome扩展程序中图片资源无法正确显示的核心问题。我们将深入探讨在内容脚本中动态设置图片url时常见的错误,并提供使用 `chrome.runtime.geturl()` api 的正确方法。同时,文章还将详细阐述 `manifest.json` 文件中 `web_accessibl…

    2025年12月20日
    000
  • JavaScript 数组操作:在数组首尾添加元素的实用指南

    本文旨在清晰阐述如何在 JavaScript 中向数组的开头或末尾添加元素。我们将深入探讨 push() 和 unshift() 方法的用法,并通过示例代码演示其具体实现。此外,我们还会针对常见的错误用法进行分析,帮助开发者避免潜在问题,从而更加高效地操作数组。 在 JavaScript 中,向数组…

    2025年12月20日
    000
  • 跨域解决方案与安全策略实现

    跨域问题需通过CORS、反向代理等方案在安全与可用性间平衡。1. CORS通过设置Access-Control-Allow-Origin等响应头实现可控跨域,生产环境应避免通配符并校验Origin;2. 反向代理如Webpack Dev Server或Nginx将前端请求转发至后端,规避浏览器同源策…

    2025年12月20日
    000
  • JavaScript代理与反射API高级应用

    Proxy与Reflect可拦截并自定义对象操作,用于实现数据绑定、验证、响应式系统等高级功能,通过get/set捕获器结合Reflect转发默认行为,提升元编程能力。 JavaScript的代理(Proxy)与反射(Reflect)API为开发者提供了拦截和自定义对象底层操作的能力,是实现元编程的…

    2025年12月20日
    000
  • JavaScript实现动态搜索过滤与关键词高亮显示

    本教程详细介绍了如何利用javascript、html和css构建一个交互式搜索功能。通过实时监听用户输入,该功能能够动态过滤列表项,并对匹配的关键词进行高亮显示,从而显著提升用户在大量数据中查找信息的效率和体验。 引言 在现代Web应用中,为用户提供高效的数据搜索和筛选能力是提升用户体验的关键。本…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信