JavaScript从入门到放弃 - ES6中的对象和类

最新推荐文章于 2022-03-20 23:49:59 发布
最新推荐文章于 2022-03-20 23:49:59 发布
阅读量160 收藏
点赞数
分类专栏： 前端 文章标签： javascript jquery css html es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zglibk/article/details/107346235
版权
这篇博客详细介绍了JavaScript中的面向过程与面向对象的区别，重点讲解了ES6中的对象和类，包括如何创建类、添加属性和方法，以及类的继承。通过面向对象的案例分析，展示了如何实现面向对象版的tab栏切换功能，涵盖了类的实例化、方法调用、事件绑定等概念。
摘要由CSDN通过智能技术生成

重点讲解Tab栏切换、增、删、改

1. 面向过程与面向对象

  • 面向过程：就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用；
  • 面向对象：是把事务分解成为一个个对象，然后由对象之间分工与合作。

面向对象的思维特点：

  1. 抽取（抽象）对象的共用的属性和行为组织（封闭）成一个类（模板）；
  2. 对类进行实例化，获取类的对象（不断产生新的对象）。

面向对象编程首先考虑的是有哪些对象，按照面向对象的思维特点，不断创建对象、使用对象、指挥对象做事情。

面向过程与面向对象对比：

面向过程 面向对象
优点 性能比面向对象高，适合跟硬件联系很紧密的东
了解本专栏 订阅专栏 解锁全文 超级会员免费看
←か淡定☆ ヾ
关注
专栏目录
订阅专栏
JavaScript从入门到放弃 -（七）ES6
←か淡定☆ ヾ 的博客
07-30 582
目录1. ES6相关概念1.1 什么是 ES6 ?1.2 为什么使用 ES6 ?2 ES6新增语法2.1 新增关键字2.1.1 let 关键字小结2.1.2 const 关键字小结2.1.3 let、const、var 的区别2.2 解构赋值2.2.1 数组解构2.2.2 对象解构小结2.3 箭头函数2.3.1 语法规范2.3.2 箭头函数的调用2.3.3 this关键字 学习目标 能够说出使用let关键字声明变量的特点； 能够使用解构赋值从数组中提取值； 能够说出箭头函数拥有的特性； 能够使用剩余参数接
JavaScript高级篇----class类（class实现继承）
Cinderellahh92的博客
12-09 246
class创建类并实例化对象 class Star { constructor(uname) { this.uname = uname console.log(this)//this指的是实例化对象 } } var zxy = new Star('张学友') console.log(zxy) class类实现继承 //父类 class Father { constructor(x, y) { this.x = x .
JS高级----Js中的 “类“（class）
bjsyc123456的博客
11-23 1338
class： 早期 JavaScript 中是没有类的，面向对象大多都是基于构造函数和原型实现的 ES6 中开始增加了 “类” 相关的语法，使得 js中的面向对象实现方式更加标准 创建类 类中封装的并不是变量和函数，因此不能使用关键字 let、const 或 var 实例属性和实例方法： // 创建类 class 类名 { 实例属性 实例方法 } class Person { name = '小明' e
JS高级之class，构造函数原型和this
weixin_45532305的博客
03-03 1447
this和this指向问题 this最简单的解释就是谁调用它，它就指向谁。 改变this指向 call方法 多用于继承，自调用函数 函数.call(thisArg,params,params) thisArg 在fun 函数运行时指定的this 值 改变this params 传递其他参数 有返回值 apply方法 多用于数组，自调用函数 函数.apply(thisArg,para...
(精华)2020年7月4日 JavaScript高级篇 ES6(class类)
热门推荐
时光隧道
07-04 56万+
是什么 es6新提供的一种生成对象实例的写法 es5构造函数的另外一种写法（语法糖） 作用 无疑让写法更清晰 更像面向对象的写法 回顾之前es5生成实例对象 Person.prototype.say = function(){ console.log('我会说话'); } // 这是错误的写法 // Person.prototype.say = ()=>{ // console.log(`我是${this.name}`); // } function Person(name,a
【js高级】 class类
CSDNJXZK的博客
03-20 235
class 类 （es6） 类的创建 // 创建一个 class 类 class Crazy { constructor(name) { this.name = name } } // 实例化这个类 new Crazy(name) 通过class创建类，类名按首字母大写来命名 类里面有个constructor函数，可以接受传递过来的参数，同时返回实例对象，只要new这个类 constructor就会被调用，如果不写 会自动生成一个constructor 类的继承
JavaScript从入门到放弃 -（六）正则表达式
←か淡定☆ ヾ 的博客
07-28 295
正则表达式1. 正则表达式概述1.1 什么是正则表达式1.2 正则表达式的特点2. 正则表达式在JavaScript中的使用2.1 创建正则表达式2.1.1 通过调用 RegExp 对象的构造函数创建2.1.2 通过字面量创建2.2 test测试正则表达式3. 正则表达式中的特殊字符3.1 正则表达式的组成3.2 边界符3.3 字符类3.3.1 [ ] 方括号 学习目标 了解正则表达式的作用； 能够写出简单的正则表达式； 能够使用正则表达式对表单进行验证； 能够使用正则表达式替换内容。 学习内容： 正
JavaScript从入门到放弃 -（二）继承
←か淡定☆ ヾ 的博客
07-20 141
目录1. Call()2.利用父构造函数继承属性 1. Call() 它的作用是： call()可以调用函数； call()可以修改函数运行时this的指向：使用call()的时候，参数1是修改后的this指向，参数2，参数3...使用逗号隔开连接。 fun.call(thisArg,arg1,arg2,...) 1) `thisArg`：当前调用函数`this`的指向对象； 2) arg1,arg2...：传递的其他普通参数。 在ES6之前并没有提供extends继承。我们可以通
JavaScript从入门到放弃 -（四）E5 新增方法
←か淡定☆ ヾ 的博客
07-24 222
目录5. trim方法6. 对象方法6.1 Object.keys()6.1.1 作用6.1.2 语法6.2 Object.defineProperty()6.2.1 作用6.2.2 语法 5. trim方法 去除字符串两端的空格 var str = ' helloWorld ' console.log(str.trim() //输出helloWorld 去除两端空格 var str1 = ' he l l oWorld ' console.log(str.trim() //输出he l
ES6从入门到放弃PPT.zip
03-11
这份“ES6从入门到放弃”的资料，可能是为了帮助初学者系统学习和理解这一重要的编程语言升级。 1. **箭头函数** 箭头函数是ES6中的一大亮点，它的语法简洁明了，使得函数定义更加紧凑。例如，传统的函数定义： `...
前端的葵花宝典 - 红宝书《JavaScript高级程序设计（第4版）》学习笔记
←か淡定☆ ヾ 的博客
09-28 1万+
对于前端经典书籍《JavaScript高级程序设计》是慕名已久，几天前收到某社区消息推送，即入手了最新的第四版中文版纸质和电子书，希望能好好系统的学习一下这门技术，并将学习笔记记录于此。
JavaScript高级语法打包 - babel插件安装配置报错！Error: Cannot find module ‘@babel/preset-preset.env‘
←か淡定☆ ヾ 的博客
12-12 9166
目录1. 插件安装和配置2. 运行打包 - 报错信息3. 解决办法 1. 插件安装和配置 安装babel转换器相关的包： npm i babel-loader @babel/core @babel/runtime -D 安装babel语法插件相关的包： npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties –D 在项目根目录中，创建 babel 配置
Vue 开发中常见报错与处理
←か淡定☆ ヾ 的博客
01-02 6692
1. “xxxx” is assigned a value but never used.eslintno-unused-vars 错误原因：eslint的验证语法 解决办法：在错误语句后添加注释 // eslint-disable-line no-unused-vars
一键快速生成 Vue 的 HTML页面结构代码
←か淡定☆ ヾ 的博客
12-03 5980
VS Code除了使用 !+Tab 在html文件中快速创建html结构代码之外，还可以自己定义代码段，这里分享如下在 Vue 环境下快速通过成 html 结构。
分享16个经典的免费UI素材网站
←か淡定☆ ヾ 的博客
12-01 3664
今天给大家分享一波硬核网站，作为一名前端，不能总依靠UI小姐姐，自己动手、丰衣足食。
Vue - 去除控制台“你正在开发模式下运行Vue”的警告
←か淡定☆ ヾ 的博客
12-03 3374
去除Vue控制台警告！ You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html
学习笔记之数据可视化（二）——页面布局（上）
←か淡定☆ ヾ 的博客
07-05 2393
~继上节2. 项目页面布局2.1、基础布局 2. 项目页面布局 2.1、基础布局 准备一个超大盒子viewport 在最外层包裹看板，用flex布局划分为三份（即三列：左、中、右）：
vue 单文件组件中，输入template 按 tab 键不能自动补全标签的解决办法
←か淡定☆ ヾ 的博客
12-27 2144
1. 操作步骤 选择： 文件 ⇒\Rightarrow⇒ 首选项 ⇒\Rightarrow⇒ 设置 ⇒\Rightarrow⇒ 搜索 emmet，选择 编辑 setting.json 添加如下代码： "emmet.includeLanguages": { "vue-html": "html", "vue": "html" } Ctrl + s 保存即可。 2. 效果 ...
JavaScript对象创建指南 - 从入门到精通
"这篇教程详细介绍了如何在JavaScript中创建新对象，JavaScript作为一种基于对象和事件驱动的编程语言，它的简洁性和动态性使得它在Web开发中广泛应用。JavaScript和Java虽然名字相似，但实际上由不同公司开发，有着...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

←か淡定☆ ヾ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值