js--面向对象(三大特点、new、this、继承、克隆等)

127 阅读3分钟

1、三大特点:封装、继承、多态:js对象底层都是关联数组,可用for...in循环遍历

1、封装:{} 、new 构造函数 分别创建1个/多个

2、继承:js中继承都是通过原型对象实现父对象中的成员,子对象无需重复创建,就可直接使用!

  • 原型对象:替所有子对象集中保存共有属性值和方法的父对象,即构造函数的prototype属性

  • 原型链:由多级父对象逐级继承形成的链式结构;保存着: 一个对象可用的所有属性和方法;控制着: 属性和方法的使用顺序:就近原则: 先子级后父级 3、多态:同一个函数在不同情况下表现出不同的状态

  • 重载overload: 同一个函数,输入不同的参数,执行不同的逻辑

  • 重写override: (推翻、遮挡)

总结:①封装: 创建对象,2种:如果只创建一个对象: {},如果反复创建多个相同结构的对象: 构造函数

②继承: 所有子对象共用的属性值和方法,都要放在构造函数的原型对象中

③多态: 重写: 只要觉得从父对象继承来的成员不要用,都在子对象中重写同名成员

内置类型:12种

  • Number、String、Boolean、Symbol

  • Undefined、Null

  • Array、Date、RegExp、Math

  • Function、Object

2重点

new 做了4件事:

  • 创建一个空对象obj

  • 自动让这个空对象继承构造函数的原型对象,即obj.proto=构造函数.prototype

  • 调用构造函数,其中的this指向这个空对象

  • 返回新对象的地址 重点:构造函数的返回值为对象{}时,new失效。

this执行时的8种情况:

  • 1)obj.fn() this指向obj
  • 2)new fn() this指向new创建的新对象
  • 3)fn() 无.无new,this指向window,严格模式(usestrict)下,this->undefined
  • 4)构造函数的原型对象中
  • 5)DOM事件处理函数中(this指dom元素)
  • 6)Vue中:默认值vue实例,methods中指当前组件,如果想获得当前出发事件的DOM元素对象,必须用$event关键字和e.target联合使用
  • 7)箭头函数中(最近一层作用域中的this),底层相当于.bind()
  • 8)可用call或apply,临时替换一次函数中的this,可用bind,永久替换函数中的this

3、创建对象的10种方式

  • 1)new Object() 缺点:步骤多
  • 2)字面量: var 对象名={} 缺点: 如果反复创建多个对象,代码会很冗余
  • 3)工厂函数方式:本质还是new Object(),无法根据原型对象判断类型
  • 4)构造函数方式:2步:先用构造函数定义一类对象的统一属性结构和方法,再用new反复创建相同属性结构,不同属性值的多个对象,缺点: 如果构造函数中包含方法,则重复创建,浪费内存
  • 5)原型对象方式:先创建完全相同的对象,再给子对象添加个性化属性。操作 构造函数.prototype
  • 6)混合模式:先创建完全相同的对象,再给子对象添加个性化属性。结合4)和5)
  • 7)动态混合:先创建完全相同的对象,再给子对象添加个性化属性。类似6),内部+if判断
  • 8)寄生构造函数:构造函数里调用其他的构造函数。类似工厂函数
  • 9)ES6 class: i. 用class{}包裹原构造函数+原型对象方法 ii. 原构造函数名升级为整个class的名字,所有构造函数统一更名为"constructor“ iii.原型对象中的方法,不用再加prototype前缀,也不用=function,直接简写为: 方法名(){ ... ...}
  • 10)稳妥构造函数:闭包,不用this,不用new!安全,可靠。