JavaScript (原型链)

127 阅读3分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第N天,点击查看活动详情

理解原型

  • 原型对象:任何构造函数在被创建的时候,系统都会自动帮我们创建一个与之对应的对象,称之为原型对象 原型对象、构造函数、实例化对象之前的关系
  • 实例对象 由 构造函数 生成
  • 原型对象.constructor -> 自身对应的构造函数
  • 构造函数.prototype ->原型对象
  • 实例对象.proto ->自身构造函数的原型对象

面向对象三大特征

封装

将面向过程的代码封装到对象中

继承

一个对象(子)拥有另一个对象(父)所有的成员
原型继承:把父对象作为子对象构造涵数的原型

混入式继承

  • 解决方案:遍历父对象所有属性,添加到子对象中
  • 弊端:每继承一次,就要执行一次循环
  • 应用场景:单个对象继承

替换原型

  • 解决方案:将子对象的构造函数的原型替换成父对象
  • 弊端:会丢失原型之前的成员变量
  • 应用场景:给内置构造函数添加自定义方法 混合式:混入+替换原型
  • 解决方案:遍历父对象所有的属性,添加到子对象的构造函数中
  • 应用场景:多个对象继承

原型链

  • 每一个对象都有原型,原型本身又是对象,所以原型又有原型,以此类推形成一个链式结构,称为原型链
  • 对象访问原型链中的成员规则:就近原则
  • 当访问一个对象的成员变量时,会首先访问它自身的成员变量,如果有则访问。没有则在原型中寻找,能找到就访问,不能找到则继续往原型的原型中寻找,以此类推,如果找到原型链的顶端还是找不到,则程序报错:xxx is not undefined

image.png 关于对象补充知识点

  • instance运算符原理 instanceof语法: 对象 instanceof 构造函数
    作用:检测构造函数的prototype在不在实例对象的原型链中

image.png

  • 静态成员与实例成员 静态成员 函数对象自身的成员变量,例如Math.PI
    实例对象 构造函数实例化的对象的成员变量, 例如:[10,20].push()

关于arguments与剩余参数rest
arguments 获取函数所有的实参,是一个伪数组
应用: 用于实参数量不确定的函数 rest参数 语法:...形参名 ,获取参数剩下的所有的参数
注意点:
剩余参数必须写在最后一个形参位置
剩余参数在一般情祝下,可以替代argument

关于变量声明let与var

  • ES5声明变量特点:var (1)有变量提升:var声明提升到当前作用域最顶端
    (2)没有块级作用域:大括号(分支+循环)里面的变量是全局的
  • ES6声明变量特点:1et const (1)没有变量提升:变量必须要先声明,后使用
    (2)有块级作用域:大括号(份支+循环)里面的变量是局部的
  • 1et与const区别 (1)let变量:值可以修改的
    (2)const常量:值不可以修改,只能在声明的时候赋值

关于for-in与for-of区别

  • 功能不同 for-in: 遍历 下标+元素
    for-of: 遍历元素
  • 原型不同 for-in: 可以遍历原型中的属性
    for-of: 不可以遍历原型中的属性
  • 数据类型不同 for-in: 可以遍历 数组+对象
    for-of: 只能遍历数组

总结:如果想要下标和元素就用for-in,只想要元素就用for-of