08.深入JS面向对象

章鱼妹爱前端
90 阅读8分钟

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

  • 对象是JavaScript中一个非常重要的概念，这是因为对象可以将多个相关联的数据封装到一起，更好的描述一个事物：
    • 比如我们可以描述一辆车：Car，具有颜色（color）、速度（speed）、品牌（brand）、价格（price），行驶（travel）等等；
    • 比如我们可以描述一个人：Person，具有姓名（name）、年龄（age）、身高（height），吃东西（eat）、跑步（run）等等；
  • 用对象来描述事物，更有利于我们将现实的事物，抽离成代码中某个数据结构：
    • 所以有一些编程语言就是纯面向对象的编程语言，比Java；
    • 你在实现任何现实抽象时都需要先创建一个类，根据类再去创建对象；

图片.png

二、JavaScript的面向对象

  • JavaScript其实支持多种编程范式的，包括函数式编程和面向对象编程：
    • JavaScript中的对象被设计成一组属性的无序集合，像是一个哈希表，有key和value组成；
    • key是一个标识符名称，value可以是任意类型，也可以是其他对象或者函数类型；
    • 如果值是一个函数，那么我们可以称之为是对象的方法；
  • 如何创建一个对象呢？
    • 早期使用创建对象的方式最多的是使用Object类，并且使用new关键字来创建一个对象：
      • 这是因为早期很多JavaScript开发者是从Java过来的，它们也更习惯于Java中通过new的方式创建一个对象；
    • 后来很多开发者为了方便起见，都是直接通过字面量的形式来创建对象：
      • 这种形式看起来更加的简洁，并且对象和属性之间的内聚性也更强，所以这种方式后来就流行了起来；

三、创建对象的两种方式

图片.png

四、对属性操作的控制

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

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

      图片.png

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

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

五、Object.defineProperty

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

    图片.png

  • 可接收三个参数：

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

  • 返回值：

    • 被传递给函数的对象

六、属性描述符

  • 属性描述符的类型有两种：

    • 数据属性（Data Properties）描述符（Descriptor）；
    • 存取属性（Accessor访问器 Properties）描述符（Descriptor）；

    图片.png

1.数据属性描述符

这段代码给obj创建了一个address，然后里面的配置都是在配置address，configurable决定了是否可以配置，如果为false，那么我们就不能对address进行删除（delete),即使写了这行代码，也不会把它删除，在严格模式下还会报错。这里的writable决定了是否可以修改值，比如说它为false时，我们再obj.address="赣州市"就不会生效，这里同样在严格模式下会报错

address是使用属性描述符来定义的，这四个属性在默认情况下都为false，name和age虽然没有使用属性描述符来定义，但是他们也是具备对应的特征的，这四个属性默认情况下都为true

var obj = {

    name:"yjf",

    age:9

}

Object.defineProperty(obj,'address',{
    //里面有很多配置
    value:"上海市",
    //是否可配置（删除，修改）
    configurable:false,
    //是否可以枚举
    enumerable:false,
    //是否可以赋值（写入值）
    writable:false

})

console.log(obj);

for (var key in obj){

    console.log(key);

}

console.log(Object.keys(obj));

输出结果

图片.png

当enumerable；true时，输出结果

图片.png

图片.png

2.存取属性描述符

框起来的三部分，只能绿+黄，或者绿+红，黄和红不能同时存在，绿+红为存储属性描述符

图片.png

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

那么，什么时候会用到存储属性描述符呢？

  1. 隐藏某一个私有属性被希望直接被外界使用和赋值

  2. 如果我们希望截获某一个属性它访问和设置值的过程时，也会使用存储属性描述符

    图片.png

七、同时定义多个属性

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

    var obj = {

    _age:18,

    _eating:function(){},

}

Object.defineProperties(obj,{

    name:{

        configurable:true,

        enumerable:true,

        writable:true,

        value:'yjfsz'

    },

    age:{

        configurable:true,

        enumerable:true,

        get(){

            return this._age

        },

        set(value){

            this._age = value

        }

    }

})

console.log(obj.age);//18

  • 如果age里面的configurable和enumerable为true时，还有一种写法

    var obj = {

    _age:18,

    _eating:function(){},

    set age(value){

        this._age = value

    },

    get age(){

        return this._age

    }

}

Object.defineProperties(obj,{

    name:{

        configurable:true,

        enumerable:true,

        writable:true,

        value:'yjfsz'



    },

    // age:{

    //     configurable:true,

    //     enumerable:true,

    //     get(){

    //         return this._age

    //     },

    //     set(value){

    //         this._age = value

    //     }

    // }

})

console.log(obj);

  • 这种写法和之前那种的区别就是，这里打印出来的obj里面有get和set

    图片.png

八、对象方法补充

  • 获取对象的属性描述符：
    • getOwnPropertyDescriptor
    • getOwnPropertyDescriptors
  • 禁止对象扩展新属性：preventExtensions
    • 给一个对象添加新的属性会失败（在严格模式下会报错）；
  • 密封对象，不允许配置和删除属性：seal
    • 实际是调用preventExtensions
    • 并且将现有属性的configurable:false
  • 冻结对象，不允许修改现有属性： freeze
    • 实际上是调用seal
    • 并且将现有属性的writable: false

九、创建多个对象的方案

1.普通创建对象的方案

  • 如果我们现在希望创建一系列的对象：比如Person对象
    • 包括张三、李四、王五、李雷等等，他们的信息各不相同；
    • 那么采用什么方式来创建比较好呢？
  • 目前我们已经学习了两种方式：

    • new Object方式；

    • 字面量创建的方式；

      图片.png

  • 这种方式有一个很大的弊端：创建同样的对象时，需要编写重复的代码；

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

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

  • 工厂模式其实是一种常见的设计模式；

  • 通常我们会有一个工厂方法，通过该工厂方法我们可以产生想要的对象；

    图片.png

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

I.认识构造函数

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

    • 但是从某些角度来说，这些对象应该有一个他们共同的类型；
    • 下面我们来看一下另外一种模式：构造函数的方式；

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

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

  • JavaScript中的构造函数是怎么样的？

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

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

II.new操作符调用的作用

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

  1. 在内存中创建一个新的对象（空对象）；

  2. 这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性；（后面详细讲）；

  3. 构造函数内部的this，会指向创建出来的新对象；

  4. 执行函数的内部代码（函数体代码）；

  5. 如果构造函数没有返回非空对象，则返回创建出来的新对象；

    图片.png

III.构造函数创建对象

  • 我们来通过构造函数实现一下： 图片.png

  • es6语法也可以用class Person{ }来创建构造函数

  • 这个构造函数可以确保我们的对象是有Person的类型的（实际是constructor的属性，这个我们后续再探讨）；

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

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

    图片.png

avatar
文章
阅读
粉丝