Skip to content

Latest commit

 

History

History
601 lines (288 loc) · 18.1 KB

7_面向对象.md

File metadata and controls

601 lines (288 loc) · 18.1 KB

面向对象是现实的抽象方式

对象是JavaScript中一个非常重要的概念,这是因为对象可以将多个相关联的数据封装到一起,更好的描述一个事物:

  • 比如我们可以描述一辆车:Car,具有颜色(color)、速度(speed)、品牌(brand)、价格(price),行驶(travel)等 等;
  • 比如我们可以描述一个人:Person,具有姓名(name)、年龄(age)、身高(height),吃东西(eat)、跑步(run) 等等;

用对象来描述事物,更有利于我们将现实的事物,抽离成代码中某个数据结构:

  • 所以有一些编程语言就是纯面向对象的编程语言,比Java;
  • 你在实现任何现实抽象时都需要先创建一个类,根据类再去创建对象;

image-20220613074220876

JavaScript的面向对象

JavaScript其实支持多种编程范式的,包括函数式编程和面向对象编程:

  • JavaScript中的对象被设计成一组属性的无序集合,像是一个哈希表,有key和value组成;
  • key是一个标识符名称,value可以是任意类型,也可以是其他对象或者函数类型;
  • 如果值是一个函数,那么我们可以称之为是对象的方法;

如何创建一个对象呢?

  • 早期使用创建对象的方式最多的是使用Object类,并且使用new关键字来创建一个对象:
  • 这是因为早期很多JavaScript开发者是从Java过来的,它们也更习惯于Java中通过new的方式创建一个对象;
  • 后来很多开发者为了方便起见,都是直接通过字面量的形式来创建对象:
  • 这种形式看起来更加的简洁,并且对象和属性之间的内聚性也更强,所以这种方式后来就流行了起来;

创建对象的两种方式

image-20220613074402851

image-20220613074413936

对属性操作的控制

在前面我们的属性都是直接定义在对象内部,或者直接添加到对象内部的:

  • 但是这样来做的时候我们就不能对这个属性进行一些限制:比如这个属性是否是可以通过delete删除的?这个 属性是否在for-in遍历的时候被遍历出来呢?

image-20220613074447200

如果我们想要对一个属性进行比较精准的操作控制,那么我们就可以使用属性描述符。

  • 通过属性描述符可以精准的添加或修改对象的属性;
  • 属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改;

Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此 对象。

image-20220613074532486

可接收三个参数:

  • obj要定义属性的对象;
  • prop要定义或修改的属性的名称或 Symbol;
  • descriptor要定义或修改的属性描述符;

返回值:

  • 被传递给函数的对象, 会修改原对象。

image-20220613074608275

第三个参数就是一个属性描述符上面为什么没有呢?

因为height是不可枚举的

属性描述符分类

属性描述符的类型有两种:

  • 数据属性(Data Properties)描述符(Descriptor);
  • 存取属性(Accessor访问器 Properties)描述符(Descriptor);

image-20220613074651735

数据属性描述符

数据数据描述符有如下四个特性:[[Configurable]]:

表示属性是否可以通过 delete删除属性,是否可以修改它的特性,或者是否可以将它修改为存取属性 描述符;

  • 当我们直接在一个对象上定义某个属性时,这个属性的[[Configurable]]为true;
  • 当我们通过属性描述符定义一个属性时,这个属性的[[Configurable]]默认为false;

[[Enumerable]]:表示属性是否可以通过for-in或者Object.keys()返回该属性;

  • 当我们直接在一个对象上定义某个属性时,这个属性的[[Enumerable]]为true;
  • 当我们通过属性描述符定义一个属性时,这个属性的[[Enumerable]]默认为false;

[[Writable]]:表示是否可以修改属性的值;

  • 当我们直接在一个对象上定义某个属性时,这个属性的[[Writable]]为true;
  • 当我们通过属性描述符定义一个属性时,这个属性的[[Writable]]默认为false;

[[value]]:属性的value值,读取属性时会返回该值,修改属性时,会对其进行修改;

  • 默认情况下这个值是undefined;
let obj = {
    name: 'wts',
    age: 18
}
Object.definedProperty(obj, 'address', {
    value: '北京市',
    configurable: false    //不可配置
})
delete obj.name   //允许的
delete obj.adress    //是不允许

Object.defineProperty(obj, 'address', {
    value: '广州市',
    configurable: true
})    //这里是在修改address,但是上面的配置是不允许修改,所以这里是不行的, 不可以重新定义属性描述符了
let obj = {
    name: 'wts',
    age: 18
}
Object.definedProperty(obj, 'address', {
    value: '北京市',
    configurable: false,    //不可配置
    enumerable: false    //不可枚举
})

//这里是遍历不到的
for(let key in obj){
    console.log(key)    //是拿不到北京市的
}
Object.keys(obj)        //这里是拿不到北京市的

如果enumerable是true的话,是可以拿到北京市的
let obj = {
    name: 'wts',
    age: 18
}
Object.definedProperty(obj, 'address', {
    value: '北京市',
    configurable: false,    //不可配置
    enumerable: false    //不可枚举
        writable: false    //不可写的
})
obj.address = '深圳市'
console.log(obj.address)    //北京市,没有修改掉
let obj = {
    name: 'wts',
    age: 18
}
Object.definedProperty(obj, 'address', {})

这里用了属性描述符,但是什么都没写,那么
configurable: false
enumerable: false
writable: false
value: undefined
这些事默认值

let obj = {
    name: 'wts',
    age: 18
}
如果没有使用属性描述符,那么默认值是什么呢
value: wts(赋值的value)
configurable: true
enumerable: true
writable: true

默认情况下这个值是undefined;

image-20220613074944841

image-20220613074958654

image-20220613075011757

存取属性描述符

存取属性描述符有如下四个特性:

  • [[Configurable]]:表示属性是否可以通过delete删除属性,是否可以修改它的特性,或者是否可以将它修改为存取属性 描述符;
    • 和数据属性描述符是一致的;
    • 当我们直接在一个对象上定义某个属性时,这个属性的[[Configurable]]为true;
    • 当我们通过属性描述符定义一个属性时,这个属性的[[Configurable]]默认为false;
  • [[Enumerable]]:表示属性是否可以通过for-in或者Object.keys()返回该属性;
    • 和数据属性描述符是一致的;
    • 当我们直接在一个对象上定义某个属性时,这个属性的[[Enumerable]]为true;
    • 当我们通过属性描述符定义一个属性时,这个属性的[[Enumerable]]默认为false;
  • [[get]]:获取属性时会执行的函数。默认为undefined
  • [[set]]:设置属性时会执行的函数。默认为undefined

存储属性描述符测试代码

image-20220720065221818

同时定义多个属性

Object.defineProperties() 方法直接在一个对象上定义 多个 新的属性或修改现有属性,并且返回该对象。

image-20220720065251726

一般我们会通过下划线来定义一个属性(私有属性),这个getter也是一个黑盒子,我们不知道它是怎么调用的,但是根据推测的话,应该是我们在通过obj.age的时候,会通过obj.get来调用,或者是get.apply(this),进行绑定this,所以get中的this指向的是obj

对象方法补充

获取对象的属性描述符:

  • getOwnPropertyDescriptor
  • getOwnPropertyDescriptors

禁止对象扩展新属性:preventExtensions

  • 给一个对象添加新的属性会失败(在严格模式下会报错);

密封对象,不允许配置和删除属性:seal

  • 实际是调用preventExtensions
  • 并且将现有属性的configurable:false

冻结对象,不允许修改现有属性: freeze

  • 实际上是调用seal
  • 并且将现有属性的writable: false

创建多个对象的方案

如果我们现在希望创建一系列的对象:比如Person对象

  • 包括张三、李四、王五、李雷等等,他们的信息各不相同;
  • 那么采用什么方式来创建比较好呢?

目前我们已经学习了两种方式:

  • new Object方式;
  • 字面量创建的方式;

image-20220720065621286

image-20220720065625853

image-20220720065630215

这种方式有一个很大的弊端:创建同样的对象时,需要编写重复的代码;

创建对象的方案 – 工厂模式

我们可以想到的一种创建对象的方式:工厂模式

  • 工厂模式其实是一种常见的设计模式;
  • 通常我们会有一个工厂方法,通过该工厂方法我们可以产生想要的对象;

image-20220720065713228

image-20220720065718229

认识构造函数

工厂方法创建对象有一个比较大的问题:我们在打印对象时,对象的类型都是Object类型

  • 但是从某些角度来说,这些对象应该有一个他们共同的类型(比如person类型);
  • 下面我们来看一下另外一种模式:构造函数的方式;

我们先理解什么是构造函数?

  • 构造函数也称之为构造器(constructor),通常是我们在创建对象时会调用的函数;
  • 在其他面向的编程语言里面,构造函数是存在于类中的一个方法,称之为构造方法;
  • 但是JavaScript中的构造函数有点不太一样;

JavaScript中的构造函数是怎么样的?

  • 构造函数也是一个普通的函数,从表现形式来说,和千千万万个普通的函数没有任何区别;
  • 那么如果这么一个普通的函数被使用new操作符来调用了,那么这个函数就称之为是一个构造函数;

那么被new调用有什么特殊的呢?

image-20220720065852332

调用构造函数,小括号甚至可以不写

new操作符调用的作用

如果一个函数被使用new操作符调用了,那么它会执行如下操作:

  1. 在内存中创建一个新的对象(空对象);
  2. 这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性;(后面详细讲);
  3. 构造函数内部的this,会指向创建出来的新对象;
  4. 执行函数的内部代码(函数体代码);
  5. 如果构造函数没有返回非空对象,则返回创建出来的新对象;

image-20220720070003603

创建对象的方案 – 构造函数

我们来通过构造函数实现一下:

image-20220720070034771

这个构造函数可以确保我们的对象是有Person的类型的(实际是constructor的属性,这个我们后续再探讨);

但是构造函数就没有缺点了吗?

  • 构造函数也是有缺点的,它在于我们需要为每个对象的函数去创建一个函数对象实例;

认识对象的原型

JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]](这个东西我们访问不到,但是在ECMA的规范中是有这样一个概念的,),这个特殊的对象可以指向另外一个对象。

那么这个对象有什么用呢?

  • 当我们通过引用对象的属性key来获取一个value时,它会触发 [[Get]]的操作;
  • 这个操作会首先检查该属性是否有对应的属性,如果有的话就使用它;
  • 如果对象中没有该属性,那么会访问对象[[prototype]]内置属性指向的对象上的属性;

那么如果通过字面量直接创建一个对象,这个对象也会有这样的属性吗?如果有,应该如何获取这个属性呢?

  • 答案是有的,只要是对象都会有这样的一个内置属性;

获取的方式有两种:

  • 方式一:通过对象的 proto 属性可以获取到(但是这个是早期浏览器自己添加的,存在一定的兼容性问题, 并不是标准中的属性);
  • 方式二:通过 Object.getPrototypeOf 方法可以获取到;

image-20220720070223972

ES5提供了一种方法,提供了一种方法可以获取原型Object.getPrototypeOf(obj)

image-20220720070238773

age在自己对象里面找不到,就会去原型里面找

image-20220720070251868

对象的原型被称为隐式原型

函数的原型 prototype

image-20220720070317493

image-20220720070323137

特殊

image-20220720070333218

image-20220720070339202

image-20220720070345278

那么我们知道上面的东西对于我们的构造函数创建对象来说有什么用呢?

  • 它的意义是非常重大的,接下来我们继续来探讨;

这里我们又要引入一个新的概念:所有的函数都有一个prototype的属性:

image-20220720070416394

你可能会问题,老师是不是因为函数是一个对象,所以它有prototype的属性呢?

  • 不是的,因为它是一个函数,才有了这个特殊的属性
  • 而不是它是一个对象,所以有这个特殊的属性;

image-20220720070438940

再看new操作符

我们前面讲过new关键字的步骤如下:

  1. 在内存中创建一个新的对象(空对象);
  2. 这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性;(后面详细讲);

那么也就意味着我们通过Person构造函数创建出来的所有对象的[[prototype]]属性都指向Person.prototype:

image-20220720070521778

image-20220720070527761

image-20220720070533820

创建对象的内存表现

image-20220720070553443

创建对象的内存表现

image-20220720070614803

image-20220720070621108

赋值为新的对象

image-20220720070641447

prototype添加属性

image-20220720070731701

image-20220720070737402

constructor属性

事实上原型对象上面是有一个属性的:constructor

  • 默认情况下原型上都会添加一个属性叫做constructor(ECMA要求添加的,不存在浏览器兼容问题),这个constructor指向当前的函数对象;

所有函数都有一个name属性,指向的就是函数名

Person.constructor.name 就是Person

image-20220720070821634

image-20220720070826355

重写原型对象

如果我们需要在原型上添加过多的属性,通常我们会重新整个原型对象:

image-20220720070859837

前面我们说过, 每创建一个函数, 就会同时创建它的prototype对象, 这个对象也会自动获取constructor属性;

  • 而我们这里相当于给prototype重新赋值了一个对象, 那么这个新对象的constructor属性, 会指向Object构造函 数, 而不是Person构造函数了

image-20220720070919756

image-20220720070925043

但是缺少一个constructor,如果不用,没有它也行,但是规范要求有,所以

image-20220720070937588

但是我们这样写和原始的prototype还是不一样,因为别人的constructor是不可枚举的

image-20220720071003096

原型对象的constructor

如果希望constructor指向Person,那么可以手动添加:

上面的方式虽然可以, 但是也会造成constructor的[[Enumerable]]特性被设置了true。

  • 默认情况下, 原生的constructor属性是不可枚举的.
  • 如果希望解决这个问题, 就可以使用我们前面介绍的Object.defineProperty()函数了.

image-20220720071123717

image-20220720071129531

创建对象 – 构造函数和原型组合

我们在上一个构造函数的方式创建对象时,有一个弊端:会创建出重复的函数,比如running、eating这些函数

image-20220720071157516

  • 那么有没有办法让所有的对象去共享这些函数呢?
  • 可以,将这些函数放到Person.prototype的对象上即可;

image-20220720071220801

不会影响this的因为是通过p1.eating调用的,所以eating中的this指向的是p1