浅谈javascript面向对象理解
1.面向对象与面向编程的比较
1.1 面向对象(oop)
- 面向对象是把事物分解称为一个个对象,然后由对象之间分工与合作,是以对象功能划分问题,而不是步骤
- 特征: 封装性、继承性、多态性
- 优点: 优点:易维护、易复用、易扩展,由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统,使系统 更加灵活、更加易于维护
- 缺点: 性能比面向过程低
面向对象的思维特点:
- 抽取(抽象)对象共用的属性和行为组织(封装)成一个类(模板)
- 对类进行实例化, 获取类的对象
1.2 面向过程(pop)
- 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了,面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了
- 优点:性能比面向对象高,适合跟硬件联系很紧密的东西,例如单片机就采用的面向过程编程。
- 缺点:没有面向对象易维护、易复用、易扩展
2. ES6中的类和对象
在js中,对象是一组无序的相关属性和方法的集合,万物皆对象
对象是由属性和方法组成的:
- 属性: 事物的特征,在对象中用属性来表示
- 方法: 事物的行为,在对象中用方法来表示
在 ES6 中新增加了类的概念,可以使用 class 关键字声明一个类,之后以这个类来实例化对象
类与对象的区别:
- 类抽象了对象的公共部分,它泛指某一大类(class)
- 对象特指某一个,通过类实例化一个具体的对象
2.1 类的创建
语法:
class name {// 添加属性和方法,也可以再嵌入一个类class age {},
}
创建实例
let a = new name();
// 类必须使用new实例化对象
2.2 类 constructor 构造函数
constructor() 方法是类的构造函数(默认方法),用于传递参数,返回实例对象,通过 new 命令生成对象实例时,自动调用该方法。如果没有显示定义, 类内部会自动给我们创建一个constructor()
语法:
class Person {constructor(name,age) { // constructor 构造方法或者构造函数this.name = name;this.age = age;}sayHi() {console.log('我会唱歌');}// 注意,方法之间不需要加逗号。同时函数不需要加function关键字
}
创建实例:
var ldh = new Person('刘德华', 18);
console.log(ldh.name);
ldh.sayHi();
2.3 类的继承
实例:
class Father {constructor(surname) {this.surname= surname;}say() {console.log('你的姓是' + this.surname);}
}
class Son extends Father{ // 这样子类就继承了父类的属性和方法
}
var damao= new Son('刘');
damao.say();
super关键字用于访问和调用对象父类上的函数,可以调用父类的构造函数,也可以调用父类的普通函数
语法:
class Father {constructor(x,y) {this.x = x;this.y = y;}sum() {console.log(this.x + this.y);}say() {return '我是爸爸';}}
class Son extends Father{constructor(x,y) {// this.x = x;// this.y = y;super(x,y); // 调用了父类中的构造函数 ,super必须写在子类this之前调用// 子类在构造函数中使用super, 必须放到 this 前面 (必须先调用父类的构造方法,在使用子类构造方法)this.x = x;this.y = y;}say() {console.log(super.say() + '的儿子'); // 利用super调用父类的函数}substract() {console.log(this.x - this.y);}}var son = new Son(11,2);console.log(son);son.say();son.substract();son.sum();
2.4 注意点
- 在 ES6 中类没有变量提升,所以必须先定义类,才能通过类实例化对象.
- 类里面的共有属性和方法一定要加this使用.
- 类里面的this指向问题.
- constructor 里面的this指向实例对象, 方法里面的this 指向这个方法的调用者
浅谈javascript面向对象理解相关推荐
- 浅谈JavaScript 面向对象编程[转]
这周心血来潮,翻看了现在比较流行的几个 JS 脚本框架的底层代码,虽然是走马观花,但也受益良多,感叹先人们的伟大-- 感叹是为了缓解严肃的气氛并引出今天要讲的话题,"javascript 面 ...
- 浅谈javascript中原型(prototype)、构造函数、对象实例及三者之间的关系
转自:http://www.cnblogs.com/zhangwei412827/archive/2012/12/14/2816263.html 浅谈javascript中原型(prototype). ...
- 浅谈JavaScript作用域,关于Java的学习路线资料
javascript是目前web领域中使用非常广泛的语言,不管是在前端还是在后端都能看到它的影子,可以说web从业者不论怎样都绕不开它.在前端领域,各种框架层出不穷.在后端领域,nodejs可谓如火如 ...
- 浅谈 JavaScript 编程语言的编码规范--转载
原文:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/ 对于熟悉 C/C++ 或 Java 语言的工程师来说,Jav ...
- JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6
Node.js 的基础教学 之 exports 和 module.exports:https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript.ES5.ES6 ...
- 浅谈 JavaScript 编程语言的编码规范
转自:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/?ca=drs-tp4608 developerWorks 中 ...
- JavaScript面向对象——理解构造函数继承(类继承)
JavaScript面向对象--理解构造函数继承(类继承) 构造函数式继承(类继承) function SuperClass(id) {// 引用类型公有属性this.books = ['JavaSc ...
- html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight...
浅谈JavaScript中scrollTop.scrollHeight.offsetTop.offsetHeight 发布时间:2020-07-17 09:27:20 来源:亿速云 阅读:223 作者 ...
- 浅谈JavaScript中的NaN
浅谈JavaScript中的NaN NaN概念以及简单案例 追寻的纯粹该拥有自己的本质.-JC.F 什么是NaN? NaN:NaN(Not a Number),它表示不是数字,但是仍是数值类型. Na ...
最新文章
- 金山网盾监测:游戏玩家下载西西游戏外挂会中大量***
- MATLAB R2022 最新中英文版 数据处理
- 程序高手和菜鸟的区别是什么?
- 安卓与Linux共存,Android和Linux重新合并成一个操作系统
- Amazon Seller Central is Temporarily Unavailable
- docker公共存储库_Docker入门(2)——镜像结构和私有镜像库
- windows 10 Tera Term显示乱码
- speedoffice(表格)怎么插入文本框?
- 利用计算机建立动画中的 画面 由,计算机图形术在三维动画中的应用.doc
- Wonderful Coloring - 2
- Python-----从所示的三门成绩中,生成个人成绩单,并显示每个人选修了几门课程。
- 中企动力牵手七鑫易维 以眼球追踪技术剔除建站顽疾
- FAST-LIO2代码解析(一)
- 微信扫码登陆在chrome浏览器被拦截
- cad拖动有残影_LCD 残影问题分析及常见解决办法
- SpringMVC05:AJAX的使用
- 7月Python最佳开源项目Top 10
- 蓝牙AoA精准定位产品
- android 文本阅读,如何在Android中阅读文本文件?
- linux用户切换pts,Linux下的tty,pts,pty…和多窗口切换 | 云上小悟
热门文章
- 阿里内核数据库文章-目录
- excel中单元格日期为计算机日期,#excle里设置今天的日期#excel表格时间如何自动修改为当天的时间...
- 三星note20u计算机功能,三星Note20Ultra隐藏功能有哪些-有哪些使用技巧
- Scala初级实践——统计手机耗费流量(1)
- 2018 年度读书总结
- 运维开发工程师的必备技能总结
- 如何去图片水印?三个方法让你学会图片去水印
- Android Studio实现有趣的星座配对APP
- win10用html文件做壁纸,利用win10自带工具制作动态壁纸的简单方法
- VMware Vsphere-下