JavaScript进阶之深入面向对象

目录

  • 深入面向对象
    • 一、编程思想
      • [1.1 面向过程](#1.1 面向过程)
      • [1.2 面向对象(oop)](#1.2 面向对象(oop))
    • 二、构造函数
    • 三、原型
      • [3.1 原型](#3.1 原型)
      • [3.2 constructor属性](#3.2 constructor属性)
      • [3.3 对象原型](#3.3 对象原型)
      • [3.4 原型继承](#3.4 原型继承)
      • [3.5 原型链](#3.5 原型链)

深入面向对象

一、编程思想

1.1 面向过程

面向过程是分析解决问题所需要的步骤,用函数一步一步实现,再依次调用

分析步骤,按照步骤解决问题

优点:性能更高,适合与硬件联系更紧密

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

1.2 面向对象(oop)

面向对象把事务分解成对象,有对象之间分工合作

以对象功能划分问题 ,而不是步骤

特性:封装、继承、多态

优点:灵活、代码可复用、容易维护和开发、适合多人合作,可设置低耦合系统,更灵活

缺点:性能比面向过程低

二、构造函数

构造方法会造成浪费内存 问题

eg:

如果希望所有对象使用同一个函数,节省内存,就要用到原型

三、原型

3.1 原型

  1. 构造函数通过原型分配的函数是所有对象所共享的
  2. js规定每一个构造函数都有一个prototype 属性,指向另一个对象,所以我们也称为原型对象
  3. 这个对象可以挂载函数,对象实例化不会多次创建原型上函数,节约内存
  4. 我们可以把那些不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法
  5. 构造函数和原型对象中的this都指向实例化的对象

3.2 constructor属性

constructor:构造函数

作用:该属性指向原型对象的构造函数 ,简单理解,就是指向我的爸爸

使用场景:如果有多个对象 的方法,可以使用给原型对象采取对象形式赋值

但这样会覆盖 构造函数原型对象原来的内容 ,这样修改后的原型对象constructor不再指回当前构造函数 ,解决这个问题,可以在修改后的原型对象中,添加一个constructor指回原来的构造函数

eg:

3.3 对象原型

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

【注意】:① __proto__是js非标准属性 ② [[prototype]]__proto__意义相同 ③ 对象原型用来表明当前实例对象指向哪个原型对象prototype(即对象原型指向原型对象) ④ __proto__对象原型里也有一个constructor属性,指向创建该实例对象的构造函数__proto__是只读的,不能赋值

关系指向:

3.4 原型继承

问题:如上,如果创建男人和女人都继承Person,他们都使用了同一个对象 ,根据引用类型的特点,修改一个就都会改变(eg:对女人添加方法,同时也会影响男人,也给男人添加了这个方法)

解决:用构造函数创建Person,而不是对象

正确方法:下图:Person叫父类构造函数

3.5 原型链

原型链:对象都有__proto__属性,这个属性是他的对象原型,原型对象也是一个对象,也有__proto__属性,指向原型对象的对象原型,这样一层一层形成的链式结构称作原型链,最顶层找不到则返回null

【记住】:所有对象里面都有__proto__对象原型,所有的原型对象都有constructor属性指向创造原型对象的构造函数

相关推荐
小牛itbull7 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i16 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_18 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
闲暇部落18 分钟前
‌Kotlin中的?.和!!主要区别
android·开发语言·kotlin
GIS瞧葩菜27 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
chnming198732 分钟前
STL关联式容器之set
开发语言·c++
熬夜学编程的小王1 小时前
【C++篇】深度解析 C++ List 容器:底层设计与实现揭秘
开发语言·数据结构·c++·stl·list
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
GIS 数据栈1 小时前
每日一书 《基于ArcGIS的Python编程秘笈》
开发语言·python·arcgis
Mr.131 小时前
什么是 C++ 中的初始化列表?它的作用是什么?初始化列表和在构造函数体内赋值有什么区别?
开发语言·c++