js面向对象入门

简介: js面向对象入门

通常我们写js以及调用:


function init(){
        console.log("init")
    }
function load(){
        console.log("load")
    }
init();
load();


在页面的script标签对里定义两个function,然后执行一下函数名即可。如果我们还要定义一些变量,或者别的函数啥的 ,则继续按照语法往下写。久而久之,这个页面函数不计其数,分不清哪些函数是同属一个功能,哪些函数同属另一个功能,这样很明显不友好,我之前就在几千行的js中找某个功能的N个方法,大多在一块,个别不在,很难找,特费劲。


大概是出身后端的原因,对面向对象有一定的理解,后来知道javascript也可以面向对象编程,一些写法自然也就有所变化了~


既然是面向对象编程,那么一切皆对象,我们就用对象这个点来阐述下面要讲到的面向对象编程。

什么是对象?=>万物皆对象。

对象的特征是什么=>具有一系列的属性和方法。


所以我们在进行面向对象编程的时候,重点看属性和方法。

avascript创建对象有三种方式,分别是字面量方式、函数方式、原型方式:


//字面量方式
    var obj1={
        init:function(){
            console.log("init1")
        }
    };
    obj1.init();
    //函数方式
    var obj2=function(){
        this.init=function(){
            console.log("init2")
        }
    }
    var obj2=new obj2();
    obj2.init();
    //原型方式
    function Obj3(){}
    Obj3.prototype.init=function(){
        console.log("init3");
    }
    var obj3=new Obj3();
    obj3.init();


字面量方式的本质其实是javascript的语法糖,var obj1={} 等价于 var obj1 = new Object();


函数方式也不复杂,可以理解为一个类,类里面就有属性和方法,当对这个类进行实例化,也就是new操作的时候,会生成一个具备类的属性和方法的对象。


原型方式涉及到javascript中的原型和原型链,这块比较深度, 目前不做多说,仅需知道即可。


关于使用面向对象进行编程,我很早时候写了一个栗子在github,https://github.com/lovemoqing/UploadImg/blob/master/UploadImg.html 可以点开看看。

  ...


小结一写,在面对业务庞杂的js代码时,在编写之初就应该设计好对象,以及对象的属性和方法,一般一个功能点对应一个对象,这样在编写js的时候,根据对象的划分,代码会非常优雅,也方便后续查找和维护。总之,写法只是一个入门,面向对象还有很多待深入的地方,比如javascript设计模式等。

 

PS:楼主邮箱 tccwpl@163.com

目录
相关文章
|
28天前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
210 2
|
8天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
8天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
12 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
17天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
45 10
|
14天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
1月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
1月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
22 1
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
396 1
|
1月前
|
Web App开发 JSON JavaScript
深入浅出:Node.js后端开发入门与实践
【10月更文挑战第4天】在这个数字信息爆炸的时代,了解如何构建一个高效、稳定的后端系统对于开发者来说至关重要。本文将引导你步入Node.js的世界,通过浅显易懂的语言和逐步深入的内容组织,让你不仅理解Node.js的基本概念,还能掌握如何使用它来构建一个简单的后端服务。从安装Node.js到实现一个“Hello World”程序,再到处理HTTP请求,文章将带你一步步走进Node.js的大门。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开一扇通往后端开发新世界的大门。