js高级-面向对象

440 阅读7分钟

JavaScript的面向对象

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

JavaScript中的对象被设计成一组属性的无序集合,像是一个哈希表,有key和value组成key是一个标识符名称, value可以是任意类型,也可以是其他对象或者函数类型

如果值是一个函数,那么我们可以称之为是对象的方法

JavaScript创建对象的两种方式

1.早期使用创建对象的方式最多的是使用Object类,并且使用new关键字来创建一个对象:

这是因为早期很多JavaScript开发者是从Java过来的,它们也更习惯于Java中通过new的方式创建一个对象

// 1.创建方式一: 通过new Object()创建
    var obj = new Object()
    obj.name = "why"
    obj.age = 18
    obj.height = 1.88
    obj.running = fucntion() {
        console.log(this.name + "在跑步~")
    }

2.后来很多开发者为了方便起见,都是直接通过字面量的形式来创建对象

这种形式看起来更加的简洁,并且对象和属性之间的内聚性也更强,所以这种方式后来就流行了起来

    // 2.创建方式二: 字面量形式
    var info = {
        name:"kebe",
        age:40,
        height:1.98
        eating: function(){
        console.log(this.name + "在吃东西")
        }
    }

字面量形式其实是第一种方式的语法糖,其执行的时候也是通过new Object()的形式创建的。

JavaScript 对属性操作的控制

基本操作

获取属性

    var obj = {
      name: "why",
      age: 18
    }

    console.log(obj.name)

给属性赋值

    var obj = {
      name: "why",
      age: 18
    }

    console.log(obj.name)

删除属性

      var obj = {
          name: "why",
          age: 18
        }
    delete obj.name
    console.log(obj)

遍历属性

    for (var key in obj) {
      console.log(key)
    }

对属性操作的控制

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

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

如果我们想要对一个属性进行比较精准的操作控制,那么我们就可以使用属性描述符。 (1)通过属性描述符可以精准的添加或修改对象的属性 (2)属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改

Object.defineProperty

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

    Object.defineProperty(obj,prop,descriptor)

1.参数

Object.defineProperty()可接收三个参数:

(1)obj要定义属性的对象;

(2)prop要定义或修改的属性的名称或 Symbol

(3)descriptor要定义或修改的属性描述符

2.返回值

被传递给函数的对象。

3.分类

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

(1)数据属性(Data Properties)描述符(Descriptor);

(2)存取属性(Accessor访问器 Properties)描述符(Descriptor)

截屏2022-04-30 下午6.16.37.png

数据属性描述符

数据数据描述符有如下四个特性\

[[Configurable]]:表示属性是否可以使用delete删除属性,是否可以修改它的特性,或者是否可以将它修改为存取属性描述符;
当我们直接在一个对象上定义某个属性时,这个属性的[[Configurable]]为true;
当我们通过属性描述符定义一个属性时,这个属性的[[Configurable]]默认为false;

[[Enumerable]]:表示属性是否可以通过for-in或者Object.keys()返回该属性;
当我们直接在一个对象上定义某个属性时,这个属性的[[Enumerable]]为true;
当我们通过属性描述符定义一个属性时,这个属性的[[Enumerable]]默认为false;

[[Writable]]:表示是否可以修改属性的值;
当我们直接在一个对象上定义某个属性时,这个属性的[[Writable]]为true;
当我们通过属性描述符定义一个属性时,这个属性的[[Writable]]默认为false;

[[value]]:属性的value值,读取属性时会返回该值,修改属性时,会对其进行修改;
默认情况下这个值是undefined;

数据属性描述符举例

    //name 和age 虽然没有使用属性描述符来定义,但是她们也是具备对应的特性的
    //value:赋值的value
    //configurable:true
    //enmerable:true
    //writable:true
    var obj = {
        name: "why"
        age:18
    }
    //数据属性描述符
    //用了属性描述副,那么会有默认的特性
    Object.defineProperty(obj,"address",{
        value:"北京市", // 如不设置,默认值为undefined
        //该属性不可删除/也不可以重新定义属性描述符
        configurable:false, // 默认值为false
        //配置是否可以对(address)属性进行枚举
        enumerable:true,//默认值为false
        //配置是否可以赋值(写入值)
        writable:false //默认值为false
    })

存取属性描述符

数据数据描述符有如下四个特性:\

[[Configurable]]:表示属性是否可以通过delete删除属性,是否可以修改它的特性,或者是否可以将它修改为存取属性 描述符;
和数据属性描述符是一致的;
当我们直接在一个对象上定义某个属性时,这个属性的[[Configurable]]为true;
当我们通过属性描述符定义一个属性时,这个属性的[[Configurable]]默认为false;

[[Enumerable]]:表示属性是否可以通过for-in或者Object.keys()返回该属性;
和数据属性描述符是一致的;
当我们直接在一个对象上定义某个属性时,这个属性的[[Enumerable]]为true;
当我们通过属性描述符定义一个属性时,这个属性的[[Enumerable]]默认为false;\

[[get]]:获取属性时会执行的函数。默认为undefined\

[[set]]:设置属性时会执行的函数。默认为undefined

存储属性举例

var obj = {
  name: "why",
  age: 18,
  _address: "北京市" // 隐藏的属性一般以下划线开头
}
var obj = {
  name: "why",
  age: 18,
  _address: "北京市"
}
//1.当我们希望隐藏某一个私有属性,希望直接被外界使用和赋值时,可以使用存储属性描述符
//2.如果我们希望截获某一个属性的访问和设置的过程,也会使用存储属性描述符
Object.defineProperty(obj,"address",{
    enumerable:true,
    configurable:true,
    get:function(){
        foo()
        return this._address
    },
    set:function(value) {
        bar()
        this._address = value
    }
})
obj.address = "上海市"
obj.address = "上海市"
console.log(obj.address)

function foo() {
  console.log("获取了一次address的值")
}

function bar() {
  console.log("设置了addres的值")
}
//获取了一次address的值
//北京市
//设置了addres的值
//获取了一次address的值
//上海市

同时定义多个属性

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

    var obj = {
      // 私有属性(js里面是没有严格意义的私有属性)
      _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:"why"
        },
        age:{
            configurable:true,
            enumerable:true,
            get:function(){
                return this._age
            },
            set: function(value){
                _this._age = value
            }
        }
    })
    obj.age = 19
    console.log(obj.age)
    console.log(obj)
  //  19
    /*{
      _age: 19,
      _eating: [Function: _eating],
      age: [Getter/Setter],
      name: 'why'
    }*/

其他对象方法

获取对象的属性描述符:
getOwnPropertyDescriptor
getOwnPropertyDescriptors\

禁止对象扩展新属性:preventExtensions
给一个对象添加新的属性会失败(在严格模式下会报错);

密封对象,不允许配置和删除属性:seal
实际是调用preventExtensions
并且将现有属性的configurable:false

冻结对象,不允许修改现有属性: freeze
实际上是调用seal
并且将现有属性的writable: false

var obj = {
  // 私有属性(js里面是没有严格意义的私有属性)
  _age: 18,
  _eating: function() {}
}

Object.defineProperties(obj, {
  name: {
    configurable: true,
    enumerable: true,
    writable: true,
    value: "why"
  },
  age: {
    configurable: true,
    enumerable: true,
    get: function() {
      return this._age
    },
    set: function(value) {
      this._age = value
    }
  }
})

// 获取某一个特性属性的属性描述符
console.log(Object.getOwnPropertyDescriptor(obj, "name")) //{ value: 'why', writable: true, enumerable: true, configurable: true }
console.log(Object.getOwnPropertyDescriptor(obj, "age"))//{
  get: [Function: get],
  set: [Function: set],
  enumerable: true,
  configurable: true
}

// 获取对象的所有属性描述符
console.log(Object.getOwnPropertyDescriptors(obj))/*
{
  _age: { value: 18, writable: true, enumerable: true, configurable: true },
  _eating: {
    value: [Function: _eating],
    writable: true,
    enumerable: true,
    configurable: true
  },
  name: {
    value: 'why',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    get: [Function: get],
    set: [Function: set],
    enumerable: true,
    configurable: true
  }
}
*/
var obj = {
  name: 'why',
  age: 18
}

// 1.禁止对象继续添加新的属性
Object.preventExtensions(obj)

obj.height = 1.88
obj.address = "广州市"

console.log(obj) //{ name: 'why', age: 18 }

// 2.禁止对象配置/删除里面的属性
Object.seal(obj)
delete obj.name
console.log(obj.name)//why

// 3.让属性不可以修改(writable: false)
Object.freeze(obj)
obj.name = "kobe"
console.log(obj.name)//why