1.1面向过程编程

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

1.2面向对象过程

思路：把事务分解成一个一个对象，然后由对象之间分工与合作。

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

特性：封装性，继承性，多态性

2构造函数

封装是面向对象思想中比较重要的一部分，JS面向对象可以通过构造函数实现的封装。

同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的

总结：

①构造函数提现了面向对象的封装特性

②构造函数实例创建的对象彼此独立，互不影响

function Star(uname,age){
this.uname = uname
this.age=age
this.sing = function(){
console.log('我会唱歌')}
}
//实例对象，获得了构造函数中封装的所有逻辑
const ldh = new Star('刘德华',18)
const zxy = new Star('张学友',18)

2.1 封装是面向对象思想中比较重要的一部分，JS面向对象可以通过构造函数实现的封装

之前我们学过的构造函数的方法很好用，但是存在浪费内存的问题

2.2 面向对象编程的特性，比如封装性，继承性等，可以借助构造函数来实现。

总结：JS面向对象可以借助构造函数来实现。但是构造函数存在浪费内存的问题。

3 原型

上述说构造函数有浪费内存的问题，所以这个问题通过什么来解决？

原型！

3.1原型

原型是什么？一个对象。我们也成为了prototype原型对象。

每一个构造函数都有一个prototype属性（也就是原型对象）

这个对象可以挂载函数，因此对象实例化不会多次创建原型上的函数来节约内存

我们通常把一些不需要变化的方法，直接定义在prototype对象上，这样所有对象的实例化就可以共享这些方法。

构造函数和原型对象中this 都是指向实例化的对象

<script>//构造函数function Star(uname,age){//this的指向是实例化对象this.uname=uname;this.age=age;// this.sing =function(){//     console.log('唱歌')// }// this.rap=function(){//     console.log('rap')// }}const ldh = new Star('ldh',18)const zxy = new Star('zxy',18)console.dir(Star.prototype)//构造函数的原型对象 prototype Star.prototype.sing=function(){console.log('唱歌')}//也可以直接用 赋值Star.prototype.eye=2;console.log(ldh.eye);console.log(ldh.sing===zxy.sing)</script>

3.1.2this 指向问题？

构造函数和原型对象中的this都指向实例化的对象

案例对比

现在构造函数

3.2 constructor 属性

每个原型对象里面都有个constructor属性（constructor构造函数）

作用：该属性指向该原型对象的构造函数，简单理解，就是指向我的爸爸，我是有爸爸的孩子

使用场景：

如果有多个对象的方法，我们可以给原型对象采取对象形式赋值.

但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了

此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。

总结：constructor 属性指向原型对象的构造函数。

3.3 对象原型

对象都会有一个属性 __proto__ 指向构造函数的prototype 原型对象。之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有 __proto__ 对象原型的存在。

注意事项：

①__proto__ 是JS非标准属性

②[[prototype]]和__proto__意义相同（dir中输出的）

③用来表明当前实例对象指向哪个原型对象prototype

④_proto__对象原型里面也有一个 constructor属性，指向创建该实例对象的构造函数

1. prototype是什么？哪里来的？

 原型（原型对象）

 构造函数都自动有原型

2. constructor属性在哪里？作用干啥的？

 prototype原型和对象原型__proto__里面都有

 都指向创建实例对象/原型的构造函数

3. __proto__属性在哪里？指向谁？

 在实例对象里面

 指向原型 prototype

3.4原型继承

继承是面向对象编程的另一个特征，通过继承进一步提升代码的封装的程度，JavaScript中大多是借助原型对象实现继承的特性。

龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。

原型继承的封装

把公共的部分抽取出来放到一个类里面

原型继承的继承

继承让两个不同的函数继承一个公共类的属性和方法

会存在的问题？

分析原因？

解决？

利用构造函数 new 实例化每次都可以生成一个新对象的方法

修改后

3.5原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链

查找规则

① 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。

② 如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）

③ 如果还没有就查找原型对象的原型（Object的原型对象）

④ 依此类推一直找到 Object 为止（null）

⑤ __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线

⑥ 可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

JS面向过程+面向对象编程区别，原型的应用相关推荐

JS 面向对象编程、原型链、原型继承（个人学习总结）
一.面向对象 1. 面向对象是所有语言都有的一种编程思想,组织代码的一种形式基于对象的语言:JS语言面向对象的语言:c++ java c# 2. 面向对象 3大特征封装:将重用代码封装到函数 ...
JS中的面向对象编程
JS中的面向对象编程小课堂目录 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考文献 8.更多讨论 1.背景介绍什么是对象? ECMA-262把对象定 ...
VSCode自定义代码片段9——JS中的面向对象编程
JavaScript的面向对象编程 {// JS'OOP// 9 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自 ...
Java面向对象(OOP)--面向过程面向对象 OOP详解
1. 面向过程 & 面向对象语言的进化发展跟生物的进化发展其实是一回事,都是"物以类聚".相近的感光细胞聚到一起变成了我们的眼睛,相近的嗅觉细胞聚到一起变成了我们的鼻子. ...
[js] 举例说明面向对象编程有什么缺点？
[js] 举例说明面向对象编程有什么缺点? 有实例化开销,内存消耗比较大,性能消耗比较大个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌 ...
什么是面向对象编程？面向对象和面向过程有什么区别？
面向对象面向对象的程序设计(Object-Oriented Programming,简记为OOP),是当下最流行的程序设计方式之一.在面向对象的设计思想中,将程序视为多个对象共同协作的结果.程序被划 ...
面向对象和面向过程之间的区别以及优缺点
面向对象和面向过程详解说到面向对象,我们都知道C#, Java, C++, python, JS- 都是面向对象的编程语言说到面向过程,我们都知道C,fortran等都是面向过程的编程语言今天我 ...
Java面向对象和面向过程有什么区别？网友：傻傻分不清楚……
面向对象,Obeject Oriented,是一种编程术语.面向对象是当今软件开发方法的主流方法之一,他是把数据以及对数据的操作放在一起,作为一个相互依存的整体,就是我们所说的对象.对同类对象抽象出其 ...
通俗易懂地说明「面向对象」和「面向过程」的区别
一.面向对象是什么面向对象 (Object Oriented,OO) 的思想对软件开发相当重要,它的概念和应用甚至已超越了程序设计和软件开发,扩展到如数据库系统.交互式界面.应用结构.应用平台.分布 ...

JS面向过程+面向对象编程区别，原型的应用