JavaScript 进阶第三天

目录

编程思想

面向过程编程

面向对象编程 (oop)

对比

构造函数

原型

原型

constructor 属性

对象原型

原型继承

原型链

---

编程思想

面向过程编程

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

举个例子：蛋炒饭

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

面向对象编程 (oop)

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

举个例子：盖浇饭

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

在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。

面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。

面向对象的特性：

 封装性

 继承性

 多态性

对比

面向过程编程

优点： 性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。

缺点： 没有面向对象易维护、易复用、易扩展

面向对象编程

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

缺点： 性能比面向过程低

生活离不开蛋炒饭，也离不开盖浇饭，选择不同而已，只不过前端不同于其他语言，面向过程更多

构造函数

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

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

总结：

1. 构造函数体现了面向对象的封装特性

2. 构造函数实例创建的对象彼此独立、互不影响

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

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

原型

原型

1 构造函数通过原型分配的函数是所有对象所 共享的 。

2 JavaScript 规定， 每一个构造函数都有一个 prototype 属性 ，指向另一个对象，所以我们也称原型对象

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

4 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

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

1. 原型是什么 ？

 一个对象，我们也称为 prototype 为 原型对象

2. 原型的作用是什么 ？

 共享方法

 可以把那些不变的方法，直接定义在 prototype 对象上

3. 构造函数和原型里面的this指向谁 ？

 实例化的对象

①：给数组扩展求最大值方法和求和方法

constructor 属性

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

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

使用场景：

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

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

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

 

思考

构造函数可以创建实例对象，构造函数还有一个原型对象，一些公共的属性或者方法放到这个原型对象身上

但是为啥实例对象可以访问原型对象里面的属性和方法呢？

对象原型

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

 

注意：

 __proto__ 是JS非标准属性

 [[prototype]]和__proto__意义相同

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

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

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

 原型（原型对象）

 构造函数都自动有原型

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

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

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

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

 在实例对象里面

 指向原型 prototype

原型继承

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

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

1. 封装- 抽取公共部分

把男人和女人公共的部分抽取出来放到人类里面

2. 继承- 让男人和女人都能继承人类的一些属性和方法

 把男人女人公共的属性和方法抽取出来 People

 然后赋值给Man的原型对象，可以共享这些属性和方法

 注意让constructor指回Man这个构造函数

3. 问题：

如果我们给男人添加了一个吸烟的方法，发现女人自动也添加这个方法

3. 问题：--原因

男人和女人都同时使用了同一个对象，根据引用类型的特点，他们指向同一个对象，修改一个就都影响

4. 解决：

需求：男人和女人不要使用同一个对象，但是不同对象里面包含相同的属性和方法

答案：构造函数

new 每次都会创建一个新的对象

5. 继承写法完善

构造函数  new 出来的对象 结构一样，但是对象不一样

 // 子类的原型 =  new 父类  

    Woman.prototype = new Person()   // {eyes: 2, head: 1}

    // 指回原来的构造函数

    Woman.prototype.constructor = Woman

原型链

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

原型链-查找规则

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

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

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

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

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

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

instanceof的作用

自己理解

 console.log(ldh instanceof Person);
    console.log(ldh instanceof Object);
    console.log(Person instanceof Object);
    console.log(Array instanceof Object);
    console.log(/sa/ instanceof Object);
    console.log('--');
    console.log(function () { } instanceof Object);



判断前面的东西是不是属于后面
返回true/false

两句话记住

只要是原型对象就有constructor属性     指向创造该原型对象的构造函数

只要是对象就有（__proto__）  （对象原型）              指向原型对象