JavaScript高级教程(面向对象编程)
目录
面向对象编程
ES6中的类和对象
构造函数和原型
对象原型__proto__
constructor构造函数
构造函数、实例、原型对象三者之间的关系
原型链
扩展内置对象
继承
面向对象编程
有两大编程思想:面向过程和面向对象;
面向过程编程POP(Process-oriented programming)
面向过程即分析出解决问题所需要的步骤,然后用函数将这些步骤一步步实现,使用的时候再一个个的一次调用就可以了;
即将大象装进冰箱,从面向过程来看,需要打开冰箱门、装进去大象、关上冰箱门
面向对象编程OOP(Object Oriented Programming)
面向对象即把事务分解成为一个个对象,然后由对象之间分工与合作;是以对象功能来划分问题,而不是步骤;在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工;
面向对象编程具有灵活、代码可复用、容易维护和开发的优点,更适合多人合作的大型软件项目;
具有封装性、继承性、多态性等特性;
即将大象装进冰箱,从面向对象来看,要先找出对象,并写出 这些对象的功能;如大象对象,冰箱对象;
面向过程与面向对象编程思想两种方式对比:
面向过程 | 面向对象 | |
优点 | 性能比面向对象高,适合跟硬件联系很紧密的东西,如单片机就采用的面向过程编程 | 易维护、易复用、易拓展,可设计出低耦合的系统,使系统更加灵活、更加易于维护 |
缺点 | 没有面向对象易维护、易复用、易拓展 | 性能比面向对象低 |
面向对象的思维特点:
1、抽取(抽象)对象共用的属性和行为组织(封装)成一个类(模板);
2、对类进行实例化,获取类的对象
面向对象编程我们考虑的是有哪些对象,按照面向对象的思维特点,不断的创建对象,使用对象,指挥对象做事情;
ES6中的类和对象
- 对象
在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,如字符串、数值、数组、函数等;
对象是由属性和方法组成的:
属性:事物的特征,在对象中用属性来表示(名词);
方法:事物的行为,在对象中用方法来表示(动词);
- 类(class):
在ES6中新增了类的概念,可用class关键字声明一个类,之后用该类实例化对象;
类和对象关系:
类抽象了对象的公共部分,它泛指某一大类(class);
对象特指某一个,通过类实例化一个具体的对象;
创建类
class 类名 { // 此处类名不要加括号// 类中的函数体}
创建实例:
var xx = new 类名(); // 类必须使用new实例化对象
类constructor构造函数
constructor()方法是类的构造函数(默认方法),用于传递参数,返回实例对象,通过new命令生成对象实例,自动调用该方法。若没有显示定义,类内部会自动给我们创建一个constructor()。
<script>// 创建类class Person {constructor(uname, sex, age) {this.uname = uname;this.sex = sex;this.age = age;}}// 创建实例对象var xm = new Person('小明', 'female', 19);var xs = new Person('小衫', 'male', 18);console.log(xm, xs);</script>
输出结果如下:
类中添加方法:
类中所有函数均不需要写function,且多个函数方法之间不需要添加符号分隔;
<script>// 创建类class Person {constructor(uname, sex, age) {this.uname = uname;this.sex = sex;this.age = age;}// 类中添加方法Say() {console.log('我叫' + this.uname, '性别' + this.sex, '今年' + this.age);}}// 创建实例对象var xm = new Person('小明', '女', 19);var xs = new Person('小衫', '男', 18);console.log(xm, xs);// 通过实例调用方法xm.Say(); // 我叫小明 性别女 今年19xs.Say(); // 我叫小衫 性别男 今年18</script>
继承
继承是指子类可以继承父类的一些属性和方法,语法如下;
class Father {// 父类
}
class Son extends Father {// 子类继承父类
}
看下面一个错误示例:
<script>class Father {constructor(x, y) {this.x = x;this.y = y;}sum() {console.log(this.x + this.y);}}class Son extends Father {constructor(x, y) {this.x = x;this.y = y;}}var son = new Son(1, 2);son.sum();
</script>
运行该代码,会报如下错误:
Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructorat new Son (ObjTsting.html:24:17)
这是因为子类中无法使用父类的sum方法,在父类方法中this.x和this.y中的this指代的是父类,而子类中传过来的参数中,this.x和this.y指代的是子类,所有会报错;
那要如何继承父类中的参数和方法呢?此时则需要super关键字~
super关键字
它用于访问和调用对象父类上的函数,可以调用父类的构造函数,也可以调用父类的普通函数,上述例子就可以改造成:
<script>class Father {constructor(x, y) {this.x = x;this.y = y;}sum() {console.log(this.x + this.y);}}class Son extends Father {constructor(x, y) {super(x, y); // 调用父类的构造函数}}var son = new Son(1, 2);son.sum(); // 3
</script>
继承是指若子类有属性和方法,则用子类的属性和方法,若无,则继承父类方法;
子类在构造函数中使用super,必须放到this前面(即必须先调用父类的构造方法,再使用子类的构造方法);
<script>class Father {constructor(uname, sex) {this.uname = uname;this.sex = sex;}}class Son extends Father {constructor(uname, age) {super(uname); // 调用父类的构造函数(uname)this.age = age; // 定义子类独有的属性}}
</script>
类里面共有的属性和方法一定要加this使用;构造函数中的this 指向的是创建的实例对象;谁调用类中的方法,this就指向谁;
在ES6中类没有变量提升,所以必须要先定义类,才能通过类实例化对象;
构造函数和原型
构造函数和原型是在ES6出来之前存在的,后被类取代;在ES6之前,对象不是基于类创建的,而是用一种成为构造函数的特殊函数来定义对象和它们的特征。
创建对象可通过如下三种方式:
1、对象字面量
2、new Object()
3、自定义构造函数
<script>var obj1 = {}; // 通过字面量创建对象var obj2 = new Object(); // 利用new创建对象function Obj3(uname, age) { // 利用构造函数创建对象this.uname = uname;this.age = age;this.sing = function() {console.log('这是构造函数中包含的方法');}}var dog = new Obj3('小狗', 1);var cat = new Obj3('小猫', 1.5);
</script>
构造函数是一种特殊的函数,主要用于初始化对象,即为对象成员变量赋初始值,它总与new一起使用,他们可把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面;
在JS中,使用构造函数时要注意以下两点:
1、构造函数用于创建某一类对象,其首字母要大写;
2、构造函数要和new一起使用才有意义
new 在执行时会做四件事情:
1、在内存中创建一个新的空对象;
2、让this指向这个新的对象;
3、执行构造函数里面的代码,给这个新对象添加属性和方法;
4、返回这个新对象(所以构造函数里面不需要return)
实例成员与静态成员
构造函数中的属性和方法我们称为成员,成员可以添加;
实例成员就是构造函数内部通过this添加的成员;实例成员只能通过实例化的对象来访问;不可以通过构造函数来访问实例成员;
静态成员及在构造函数本身上添加的成员;静态成员只能通过构造函数来访问
<script>function Obj3(uname, age) { // 利用构造函数创建对象this.uname = uname;this.age = age;this.sing = function() {console.log('这是构造函数中包含的方法');}}var dog = new Obj3('小狗', 1);console.log(dog.uname); // 小狗 // 只能通过实例化的对象来访问实例成员console.log(Obj3.uname); // undefined 不可以通过构造函数访问实例成员// 静态成员是指在构造函数本身上添加的成员,静态成员只能通过构造函数来访问Obj3.sex = 'male';console.log(Obj3.sex); // male
</script>
构造函数的问题
构造函数方法很好用,但是存在浪费内存的问题;
不同实例对象会开辟多个空间用于存放同一个函数,这样就会造成内存浪费;
既然使用同一个对象构建出来的实例对象,那么该函数和属性应该是所有对象所共享的,JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象。注意,这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。因此可以将那些不变的方法,直接定义在prototype上,这样所有对象的实例就可以共享这些方法。
对象原型__proto__
对象都会有一个属性__proto__指向构造函数的prototype原型对象,之所以我们对象可使用构造函数prototype原型对象的属性和方法,就是因为对象有__proto__原型的存在。
- __proto__对象原型和原型对象prototype是等价的
- __proto__对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象prototype,即如下示意图:
constructor构造函数
对象原型(__proto__)和构造函数(prototype)原型对象里面都有一个属性constructor属性,constructor我们称为构造函数,因为它指回构造函数本身。
他主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。
<script>function Obj3(uname, age) { // 利用构造函数创建对象this.uname = uname;this.age = age;}Obj3.prototype = {sing: function() {console.log('wangwang');}}var dog = new Obj3('小狗', 1);console.log(Obj3.prototype); console.log(dog.__proto__);console.log(Obj3.prototype === dog.__proto__); // true
</script>
构造函数、实例、原型对象三者之间的关系
原型链
(图来自黑马程序员pink老师前端教程~)
只要是对象,就有原型对;
当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性;
若没有则查找它的原型(即__proto__指向的prototype对象);
如果还没有就查找原型对象的原型,以此类推一直找到Object为止;
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说是一条路线
扩展内置对象
可以通过原型对象,对原来的内置对象进行扩展自定义的方法,比如给数组增加自定义求偶数和的功能;
<script>console.log(Array.prototype);Array.prototype.sum = function() {var sum = 0;for (var i = 0; i < this.length; i++) {sum += this[i];}return sum;}var arr = [1, 2, 3, 4];console.log(arr.sum()); // 10
</script>
注意:数组和字符串内置对象不能给原型对象覆盖操作Array.prototype = {},只能是Array.prototype.xxx = function() {}的方法
继承
同理,ES6之前亦没有extends继承,我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承;
- 使用call()方法
调用call()方法可以修改函数运行时的this指向,语法如下:
函数名.call(thisArg, arg1, arg2,....)
其中,thisArg为当前调用函数this的指向对象,args等为传递的其它参数;
<script>function fn(x, y) {console.log('看看这个数是多少');console.log(this);}var o = {sum: 12}fn.call(o, 1, 2); // this指向了o,里面含有sum
</script>
JavaScript高级教程(面向对象编程)相关推荐
- JavaScript高级语法-面向对象编程模式的特性及实现
@写在前面:对于初学者友好,变量声明没有采取ES6+标准,且学且珍惜
- 尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记
前言 这个是我学习过程中的笔记,分享给大家,希望对大家有用. 学习内容是尚硅谷JavaScript高级教程(javascript实战进阶),这里是视频链接. 我在前面有两篇对于web前端HTML和CS ...
- JavaScript学习笔记---面向对象编程-JS高级部分(pink老师)
目录 一.面向对象编程介绍 1.1 两大编程思想 1.面向过程编程POP(Process-Oriented Programming) 2.面向对象编程OOP(Object Oriented Progr ...
- JavaScript高级(面向对象)
文章目录 1 面向对象编程介绍 1.2 面向过程编程 POP(Process-oriented programming) 1.3 面向对象编程 OOP (Object Oriented Program ...
- javaScript设计模式之面向对象编程(object-oriented programming,OOP)(二)
接上一篇 面向对象编程的理解? 答:面向对象编程,就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与动作(方法).这个对象我们称之为类.面向对象编程思想其中一个特点就是封装,就是把你需 ...
- javascript 绘制uml_js面向对象编程和UML类图的设计
引言 前端一直以来由于JavaScript的语言特性和一些限制导致不能很好的和Java等强类型语言一样面向对象化编程,导致es6到来以后,class的语法糖或者ts中面向对象编程的设计显得比较薄弱,接 ...
- 【前端系列教程之JavaScript】15_JavaScript面向对象编程
JavaScript面向对象编程 面向对象概述 什么是对象 Everything is object (万物皆对象) 对象到底是什么,我们可以从两次层次来理解. (1) 对象是单个事物的抽象. 一本书 ...
- javascript高级程序设计(python编程代码大全)
JavaScript权威指南和JavaScript高级程序设计哪本好? <JavaScript权威指南>比<JavaScript高级程序设计>难很多,个人看法 先看:<J ...
- JavaScript 数据类型、面向对象编程
目录 数据类型 变量 类型转换 字符串常用方法 数值型常用方法 数组 数组的创建.赋值 数组常用方法 数组迭代 对象 对象的创建.使用 遍历对象 操作对象属性的2种方式 快速置空对象各个字段的值 js ...
- 菜鸟教程 之 JavaScript 高级教程
From:https://www.runoob.com/js/js-objects.html JavaScript 对象 JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... ( ...
最新文章
- Llinux课程计划安排
- tensorflow eager调试模式关键导入如下两行便于debug
- 1.8 简单卷积网络示例-深度学习第四课《卷积神经网络》-Stanford吴恩达教授
- Eclipse开发工具之崩溃和备份
- ClickHouse Keeper 源码解析
- java 获取web目录结构_Intellij Idea Javaweb 目录结构及获取项目内资源
- TCP粘包和拆包的定义,产生的原因以及解决方案
- XElement.Load 需要释放吗_因为信用卡逾期还不上坐牢了,刑满释放后,还需要继续还钱吗?...
- 【转】SVN中的Branches分支以及Tags标签详解与应用举例
- 用php写一个user类,使用php怎么编写一个用户查询类
- 命令端口C++检测本地网络端口占用
- (附源码)计算机毕业设计ssm大众点评管理系统
- 第03讲 struts2中ActionSupport引入
- 宋宝华Linux培训笔记-Linux系统开发与工具
- 带log的计算器html代码,lg计算器(log计算器在线)
- 2017年中国银行业软件测试成果交流会”在京成功举办-「D-Uni」
- 实现文件及文件批量改名的工具(包含未确定盘符的情况下)
- 【TCP长连接】使用TCP长连接提升服务性能
- JavaScript的表单验证
- 调查:十大房价上涨潜力最大城市
热门文章
- Introduction to Computer Networking学习笔记(二十五):NATs
- python import from区别,python中import与from方法总结
- bable转换html里面的js,javascript – 在Babel中转换插件与语法插件
- 计算机网络零碎笔记:IP协议(一)
- java中如何获得方法中的参数名
- HDU 5348 MZL's endless loop(DFS去奇数度点+欧拉回路)
- c语言打印uint64, int64
- task 13-change the lcd to 32bpp form 16bpp.
- Linux防火墙iptables学习笔记(四)iptables实现NAT
- ID与Class的区别(#与。的区别)CSS