JavaScript面向对象

最新推荐文章于 2024-02-28 23:59:43 发布
最新推荐文章于 2024-02-28 23:59:43 发布
阅读量503 收藏
点赞数
分类专栏： JavaScript基础知识 文章标签： class 面向对象编程 类 javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M_ik_Z/article/details/117854302
版权

JavaScript面向对象

JavaScript面向对象

1-1 面向对象编程介绍

1-1.1 两大编程思想：
  • 面向过程
  • 面向对象

1-2 面向过程编程 POP（Process-oriented programming）

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就行了。

举例了解：将大象装进冰箱，面向过程做法：
	1. 打开冰箱，
	2. 把大象放进去，
	3. 关上冰箱门。

面向过程，就是按照我们已经分析好的步骤，按照步骤解决问题。

1-3 面向对象编程 OOP（Object Oriented Programming）

面向对象就是把事务分解成为一个个对象，然后由对象之间分工与合作。

举例了解：将大象装进冰箱，面向对象做法：先找出对象，并写出这些对象的功能。
	1. 大象对象。
		* 进去
	2. 冰箱对象。
		* 打开
		* 关闭
	3. 使用大象和冰箱的功能。

面向对象是以对象功能来划分问题，而不是步骤。

  1. 在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。
  2. 面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。
  3. 面向对象的特性：
    • 封装性：封装代码。
    • 继承性：儿子会继承爸爸的属性。
    • 多态性：同一个对象在不同时刻可以体现出不同的状态。

1-4 面向过程和面向对象的对比

  1. 面向过程：

    • 优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。
    • 缺点：没有面向对象易维护、易复用、易扩展。

  2. 面向对象：

    • 优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护。
    • 缺点：性能比面向过程低。

ES6中的类和面向对象

2-1 面向对象

  1. 面向对象更贴近我们的实际生活，可以使用面向对象描述现实世界事物，但是事物分为具体的事物和抽象的事物。
手机			  抽象的（泛指的）
三星某型号		具体的（特指的）

  1. 面向对象的思维特点：

    • 抽取（抽象）对象共用的属性和行为组织（封装）成一个类（模板）。

    • 对类进行实例化，获取类的对象。

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

2-2 对象

  1. 现实生活中：万物皆对象。对象是一个具体的事物，看的见摸得着的实物。例如：一本书，一辆车，一个人可以是对象，一个数据库，一张网页，一个与远程服务器的连接也可以是对象。
  2. 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串，数值，数组，函数等。
  3. 对象是由属性和方法组成的：
    • 属性：事物的特征，在对象中用属性来表示（常用名词）。
    • 方法：事物的行为，在对象中用方法来表示（常用动词）。

2-3 类

  1. 类 class
    在 ES6 中新增了类的概念，可以使用class关键词声明一个类，之后以这个类来实例化对象。
    • 类抽象了对象的公共部分，他泛指某一大类（class）
    • 对象特指某一个，通过类实例化一个具体的对象。
  2. 面向对象的思维特点：
    • 抽取（抽象）对象共用的属性和行为组织（封装）成一个类（模板）。
    • 对类进行实例化，获取类的对象。

2-4 创建类

  • 语法：
class name{
	// class body
}
  • 创建实例：
var xx = new name()

注意：类必须使用 new 实例化对象。

  • 最简单的案例
// 创建类 class 创建一个明星类
class Star{
	
}

// 利用类创建对象
new Star()

2-4 类 constructor 构造函数

  1. constructor( )方法是类的构造函数（默认方法），用于传递参数和返回实例对象，通过 new 命令生成对象实例时，自动调用该方法。如果没有显示定义，类内部会自动给我们创建一个constructor( )。
    • 案例：
// 创建类 class 创建一个明星类
class Star{
	constructor(uname){
		this.uname = uname
	}
}

// 利用类创建对象
var ldh = new Star('刘德华')
console.log(ldh.uname)
// 运行结果是：在控制台输出刘德华。
  1. 总结：
    • 通过 class 关键词创建类，类名我们还是习惯性定义首字母大写。
    • 类里面有个 constructor( ) 函数，可以接受传递过来的参数，同时返回实例对象。
    • constructor( ) 函数只要 new 生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数。
    • 生成实例 new 不能省略。
    • 最后注意语法规范，创建类 类名后面不要加小括号，生成实例 类名后面加小括号，构造函数不需要加 function。

2-5 类添加方法

  • 语法：
class Person{
	constructor(name,age){		// constructor 构造器或者构造函数。
		this.name = name
		this.age = age
	}
	say(){
		console.log(this.name + '你好')
	}
}
// 1）我们类里面所有的函数不需要写 function。
// 2）多个函数方法之间不需要添加逗号分隔。
  • 案例：
// 创建类 class 创建一个明星类
class Star{
	constructor(uname，age){
		this.uname = uname
		this.age = age
	}
	sing(song){
		// console.log('我唱歌')
		console.log(this.name + song)
	}
}

// 利用类创建对象
var ldh = new Star('刘德华',18)
var zxy = new Star('张学友',20)
ldh.sing('冰雨')
zxy.sing('李香兰')
// 输出结果是：刘德华冰雨
//			 张学友李香兰

类的继承

3-1 继承

  1. 现实中的继承：子承父业，比如我们都继承了父亲的姓。
  2. 程序中的继承：子类可以继承父类的一些属性和方法。
  3. 语法：
    • extends 可以让子类继承父类的属性和方法。
	class Father{		// 父类
	
	}
	class Son extends Father{		// 子类继承父类
	
	}
  • 案例：
	class Father{
		constructor(){
	
		}
		money{
			console.log(100)
		}
	}
	class Son extends Father{
	
	}
	var son = new Son()
	son.money()

// 输出结果是：在控制台输出100。

3-2 super 关键字

  1. super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数。
    • super 关键词调用父类的构造函数案例：
	class Father {
		construter(x,y) {
			this.x = x
			this.y = y
		}
		sum() {
			console.log(this.x + this.y)
		}
	}
	class Son extends Father {
		construter(x,y) {
			super(x,y)	// 调用了父类中的构造函数。
		}
	}
	var son = new Son(1,2)
	son.sum
	
	// 输出结果是：在控制台输出 3。
  • super 关键词调用父类的普通函数案例：
	// 1）继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有。就先执行子类的。
	// 2）继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法（就近原则）。

	class Father {
		say() {
			return '我是爸爸'
		}
	}
	class Son extends Father {
		say() {
			// console.log('我是儿子')
			console.log(super.say() + '的儿子')
			// super.say() 就是调用父类中的普通函数 say()
		}
	}
	var son = new Son
	son.say()

// 输出结果是：在控制台输出“我是爸爸的儿子”。
  • 3-3 子类继承父类方法同时扩展自己的方法
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 关键字调用父类的构造函数。
                // super 关键词必须在子类 this 之前调用。
                super(x,y)
                this.x = x
                this.y = y
            }
            subtract(){
                console.log(this.x - this.y)
            }
        }
        var son = new Son(5,3)
        son.subtract()
        son.sum()

注意：子类在构造函数中使用 super 关键字，必须放到 this 前面（必须先调用父类的构造方法，再使用子类构造方法。）

ES6中的类和对象

三个注意点

  1. 在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象。
  2. 类里面的共有的属性和方法一定要加 this 使用。
  3. 类里面 this 的指向问题。
  4. constructor 里面的 this 指向实例对象，方法里面的 this 指向这个方法的调用者。
JavaScript 面向对象
菜鸟小铭的博客
07-08 1118
JavaScript高级语法之面向对象 这篇文章主要讲了JavaScript ES6之后有类的概念的面向对象的方法和ES5之前没有类的概念时的面向对象的方法 如有错误，欢迎前来指正 JavaScript 面向对象(ES6之后) JavaScript中的对象是无序的属性和方法的集合 创建类 同样使用大驼峰命名法，首字母大写 代码示例： // 声明类 class 类名 { // class body } // 实例化对象 var 对象名 = new 类名(); 在类中所有的函数都不用加
JavaScript 面向对象编程
gako15587481707的博客
06-18 1319
面向对象编程是一种程序设计思想，它具有 3 个显著的特征：封装、继承、多态。
js中对象属性、面向对象、面向过程、类、继承、以及原型原型链
ch2362710931的博客
08-08 338
对象字面量 对象字面量是对象定义的简写形式，目的是为了简化包含大量属性的对象的创建。 也可以使用字符串、数字、bool类型来定义。 但要注意此类情况（后值覆盖前值）： 访问/设置方式 configurable（可配置） 表示属性是否可以通过删除并重新定义，是否可以修改它的特性，以及是否可以把它改为访问器属性。默认情况下，所有直接定义在对象上的属性的这个特性都是 。 enumerable 表示属性是否可以通过循环返回。默认情况下，所有直接定义在对象上的属性的这个特性都是。 writable 表示属
JavaScript面向过程与面向对象的区别
weixin_48431966的博客
05-06 494
JavaScript面向过程与面向对象的区别？ 1.要知道这个两个区别你得明白面向过程与面向对象的区别首先介绍面向过程 (1)面向过程:面向过程就是完成业务需要一个一个步骤去实现功能，使用的时候依次调用 (2)面向对象: 面向对象是把一个个分解成一个个对象，然后每个对象分工合作 (3)面向对象的特点: 封装性:每一个对象都是独立存在，封装后可以相互调用 保证了代码的安全性 继承性:一些公用代码 完全可以使用父亲的一些属性，子类直接可以去继承，减少代码重复和沉余 多态性:子类不仅可以继承父类的属性
JS中面向对象和面向过程的区别
qq_38220077的博客
06-19 1700
前言 要搞懂面向对象和面向过程的区别，我们首先要了解什么是面向对象。什么是面向过程。 面向对象 面向对象的方法主要是把事物给对象化，包括其属性和行为。面向对象编程更贴近实际生活的思想。总体来说面向对象的底层还是面向过程，面向过程抽象成类，然后封装，方便使用就是面向对象（万物皆对象）。 面向过程 面向过程是一种以过程为中心的编程思想。这些都是以什么正在发生为主要目标进行编程，不同于面向对象的是谁在受影响。与面向对象明显的不同就是封装、继承、类。简写为POP 之前在那篇博客上看到这个比喻，觉得特别恰当，挺容
ES6 类(Class)的继承(extends)和自定义存(setter)取值(getter)详解
热门推荐
pcaxb的专栏
12-21 1万+
转载请注明预见才能遇见的博客：http://my.csdn.net/ 原文地址： ES6 类(Class)的继承(extends)和自定义存(setter)取值(getter)详解 ES6的Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要简单很多,这也是平常大多数面向对象语言的方式。 1.类的super方法 子类必须在constructor方
JavaScript 面向对象详解
qq_36081714的博客
08-09 4739
JavaScript面向对象
JavaScript面向对象编程
最新发布
Kali与编程
02-28 1045
例如，我们可以定义一个人类（Person）的类，这个类包括属性（姓名、年龄、性别）和方法（吃饭、睡觉等），然后通过构造函数来创建人类的对象。封装（Encapsulation）是面向对象编程的一种基本原则，它指的是将对象的属性和方法组合在一起，形成一个独立的单元，并对外部隐藏对象的实现细节。这样可以保证代码的灵活性和可维护性。在上面的例子中，我们使用字面量的方式创建了一个名为p2的对象，它具有name为’Jerry’、age为25、gender为’female’的属性和eat、sleep两个方法。
JavaScript面向对象目录
qq_42911663的博客
01-12 914
JavaScript面向对象目录 《谈一谈JavaScript面向对象》 《JavaScript面向对象与原型》 《JavaScript面向对象 (call()方法) 》 《JavaScript面向对象之继承（上）》 《JavaScript面向对象之继承（下）》 《JavaScript面向对象之ES6中的类和继承》 《JavaScript面向对象之多态》 ...
Javascript面向对象编程.
03-26
在提供的资源中，《代码之美》PDF文件可能包含了关于编程实践和代码风格的指导，而《Javascript面向对象编程》PPT可能更具体地阐述了JavaScript OOP的细节和示例。学习这些材料将有助于深入理解JavaScript的面向对象...
再谈javascript面向对象编程
12-09
JavaScript并非Java的子集或附属品，而是一门独立的语言，拥有自己独特的面向对象编程机制。尽管它的名称可能会引起混淆，但JavaScript的正式名称是ECMAScript，这是由欧洲计算机制造商协会（ECMA）制定的标准。 ...
7. 吴恩达机器学习课程-作业7-Kmeans and PCA
wujing1_1的博客
02-22 1038
fork了别人的项目，自己重新填写，我的代码如下 https://gitee.com/fakerlove/machine-learning/tree/master/code 代码原链接 文章目录7. 吴恩达机器学习课程-作业7-Kmeans and PCA7.1 k-means7.1.1 题目介绍7.1.2 算法流程7.1.3 实现k-means7.1.4 测试7.2 图像压缩与k-均值7.3 PCA7.3.1 题目介绍7.3.2 算法流程7.3.3 代码1) 示例数据集2) 实现PCA3) 脸图像数据集
算法提高分类学习刷题——1.动态规划——1.3背包模型
m0_51474171的博客
02-25 3470
（1）01背包 模型 题目介绍 有 N件物品和一个容量为 V 的背包，每件物品有各自的价值且只能被选择一次，要求在有限的背包容量下，装入的物品总价值最大。 「0-1 背包」是较为简单的动态规划问题，也是其余背包问题的基础。 动态规划是不断决策求最优解的过程，「0-1 背包」即是不断对第 i个物品的做出决策，「0-1」正好代表不选与选两种决定。 二维 （1）状态f[i][j]定义：前i个物品，背包容量j下的最优解（最大价值）： 当前的状态依赖于之前的状态，可以理解为从初始状态f[0][0] = 0开.
算法提高分类学习刷题——1.动态规划——1.2.最长上升子序列模型
m0_51474171的博客
02-21 1440
最长上升子序列模型 1.最长上升子序列 题目描述 给定一个长度为 N 的数列，求数值严格单调递增的子序列的长度最长是多少。 输入格式 第一行包含整数 N。 第二行包含 N 个整数，表示完整序列。 输出格式 输出一个整数，表示最大长度。 数据范围 1≤N≤1000， −109≤数列中的数≤109 输入样例： 7 3 1 2 1 8 5 6 输出样例： 4 解题思路 因为以i结尾的子序列，一定是由前i-1个数结尾的子序列长度加一取max 比如一个子序列a[j]a[i] ,那么当a[j]<a[i
类和对象进阶
sqjddb的博客
02-23 505
/关于访问限定符的几点说明 /类的实例化 /计算类对象的大小 /深入理解this指针 /六大默认成员函数 /const修饰成员函数 /细谈成员函数 /对象成员的初始化 /static成员 /友元 /内部类
经典的图像分类模型
最白の白菜的博客
02-22 5282
目录经典的图像分类模型AlexNetAlexNet的网络架构手写数字势识别数据读取模型编译模型训练模型评估VGGVGG的网络架构手写数字势识别数据读取模型编译模型训练模型评估GoogLeNetInception 块GoogLeNet模型B1模块B2模块B3模块B4模块B5模块手写数字识别数据读取模型编译模型训练模型评估延伸版本InceptionV2InceptionV3ResNet残差块ResNet模型手写数字势识别数据读取模型编译模型训练模型评估 经典的图像分类模型 AlexNet 学习目标 知道Ale
年薪20W的自动化测试工程师教你用Postman做接口测试
02-23 2016
The higher your test coverage, the more flexible and bug-resistant your code will be, and the less time you’ll spend debugging hot fixes in production. 测试覆盖率越高，代码就越灵活，生产中调试修补程序所花费的时间就越少。 首先，比较遗憾的一点是，Postman对并发测试并不好，但支持指定次数与间隔时间的串行测试。 官方文档链接：Postman .
现代JavaScript面向对象编程探索
"javascript面向对象编程" JavaScript面向对象编程是一种基于对象和原型的编程范式，它允许开发者通过创建和操作对象来构建复杂的应用程序。在JavaScript中，对象是数据（属性）和函数（方法）的集合，这些函数可以...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值