JavaScript的对象详解

zayyo2024-09-01 10:26

作为程序员，我们常常会听见一种说法，那就是面向对象编程。那到底什么是对象呢？有改如何面向对象编程呢？今天我们就来详细讲讲

什么是对象呢？

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

比如我们可以描述一辆车：Car，具有颜色（color）、速度（speed）、品牌（brand）、价格（price），行驶（travel）等等；

又比如我们可以描述一个人：Person，具有姓名（name）、年龄（age）、身高（height），吃东西（eat）、跑步（run）等等；

那么对象的使用有什么好处呢？

使用对象来描述事物，更有利于我们将现实的事物，抽离成代码中某个数据结构，所以有一些编程语言就是纯面向对象的编程语言，比Java。你在实现任何现实抽象时都需要先创建一个类，根据类再去创建对象

那么在JavaScript中的对象又是怎么样的呢？

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

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

如何创建一个对象呢？

早期使用创建对象的方式最多的是使用Object类，并且使用new关键字来创建一个对象：这是因为早期很多JavaScript开发者是从Java过来的，它们也更习惯于Java中通过new的方式创建一个对象

javascript 复制代码 
// 1.创建方式一: 通过new Object()创建
var obj = new Object()
obj.name = "zayyo"
obj.age = 18
obj.height = 1.88
obj.running = function() {
  console.log(this.name + "在跑步~")
}

后来很多开发者为了方便起见，都是直接通过字面量的形式来创建对象：这种形式看起来更加的简洁，并且对象和属性之间的内聚性也更强，所以这种方式后来就流行了起来

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

在前面我们的属性都是直接定义在对象内部，或者直接添加到对象内部的，但是这样来做的时候我们就不能对这个属性进行一些限制了；比如这个属性是否是可以通过delete删除的？这个属性是否在for-in遍历的时候被遍历出来呢？

对象属性的操作

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

Object.defineProperty()

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

object.defineProperty ( obj, prop,descriptor)

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

参数
  • obj要定义属性的对象
  • prop要定义或修改的属性的名称或 Symbol
  • descriptor要定义或修改的属性描述符
返回值

被传递给函数的对象。

属性描述符分类

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

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

数据属性描述符

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

  1. [[Configurable]]（是否可存取）：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；

    --- 当我们直接在一个对象上定义某个属性时，这个属性的[[Configurable]]默认为true ；

    --- 当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为false；

  2. [[Enumerable]]（是否可枚举）：表示属性是否可以通过for-in或者Object.keys()返回该属性；

    --- 当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]默认为true ；

    --- 当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为false；

  3. [[Writable]]（是否可修改）：表示是否可以修改属性的值；

    --- 当我们直接在一个对象上定义某个属性时，这个属性的[[Writable]]为true ；

    --- 当我们通过属性描述符定义一个属性时，这个属性的[[Writable]]默认为false；

  4. [[value]]（属性的值）：属性的value值，读取属性时会返回该值，修改属性时，会对其进行修改；默认情况下这个值是undefined

代码示例：

javascript 复制代码 
// name和age虽然没有使用属性描述符来定义, 但是它们也是具备对应的特性的
// value: 赋值的value
// configurable: true
// enumerable: true
// writable: true
var obj = {
  name: "zayyo",
  age: 18
}

// 数据属性描述符
// 用了属性描述符, 那么会有默认的特性
Object.defineProperty(obj, "address", {
  // 很多配置
  value: "广州市", // 默认值undefined
  // 该特殊不可删除/也不可以重新定义属性描述符
  configurable: false, // 默认值false
  // 该特殊是配置对应的属性(address)是否是可以枚举
  enumerable: true, // 默认值false
  // 该特性是属性是否是可以赋值(写入值) 
  writable: false // 默认值false
})

// 测试configurable的作用
delete obj.name
console.log(obj.name) //undefined
delete obj.address
console.log(obj.address)  //广州市

// 因为上面configurable已经设置成false所以Object.defineProperty修改也是无效的
Object.defineProperty(obj, "address", {
  value: "广州市",
  configurable: true
})

// 测试enumerable的作用
console.log(obj)
for (var key in obj) {
  console.log(key)
}
console.log(Object.keys(obj))

// 测试Writable的作用
obj.address = "深圳"
console.log(obj.address)

存取属性描述符

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

  1. [[Configurable]]：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；

    --- 当我们直接在一个对象上定义某个属性时，这个属性的[[Configurable]]为true；

    --- 当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为false)

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

    --- 当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为true；

    --- 当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为false；

  3. [[get]]：获取属性时会执行的函数。默认为undefined

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

下面我们同样用代码来示例

javascript 复制代码 
var obj = {
  name: "zayyo",
  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
  }
})

console.log(obj.address)

obj.address = "广州市"
console.log(obj.address)

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

function bar() {
  console.log("设置了addres的值")
}

//set、get的定义方法二、
var obj = {
  // 私有属性(js里面是没有严格意义的私有属性)
  _age: 18,
  _eating: function() {},
  set age(value) {
    this._age = value
  },
  get age() {
    return this._age
  }
}

那如果过我们想同时定义多个属性呢？接下里我们就讲解如何同时定义多个属性的方法

如何同时定义多个属性？

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

代码示例

javascript 复制代码 
var obj = {}

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

还有一些不常用但是确实存在的一些对象方法给大家补充一下

对象方法补充

获取对象的属性描述符：
  • getOwnPropertyDescriptor（获取对象某一个特性属性的属性描述符）
  • getOwnPropertyDescriptors（获取对象的所有属性描述符）

代码示例：

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

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

// 获取对象某一个特性属性的属性描述符
console.log(Object.getOwnPropertyDescriptor(obj, "name"))
console.log(Object.getOwnPropertyDescriptor(obj, "age"))

// 获取对象的所有属性描述符
console.log(Object.getOwnPropertyDescriptors(obj))
禁止对象扩展新属性：preventExtensions

给一个对象添加新的属性会失败（在严格模式下会报错）

代码示例：

javascript 复制代码 
var obj = {
  name: 'zayyo',
  age: 18
}

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

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

console.log(obj)

密封对象，不允许配置和删除属性：seal

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

代码示例：

javascript 复制代码 
// 2.禁止对象配置/删除里面的属性
// 方法一、自己遍历
for (var key in obj) {
  Object.defineProperty(obj, key, {
    configurable: false,
    enumerable: true,
    writable: true,
    value: obj[key]
  })
}
// 方法二、seal属性
Object.seal(obj)

delete obj.name
console.log(obj.name)

冻结对象，不允许修改现有属性： freeze

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

代码示例：

javascript 复制代码 
// 3.让属性不可以修改(writable: false)
Object.freeze(obj)

obj.name = "kobe"
console.log(obj.name)

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

创建多个对象的方案

学过java的同学应该知道，设计模式中有一个工厂设计模式，它就很好的能够满足我们的需求，通常我们会有一个工厂方法，通过该工厂方法我们可以产生想要的对象

javascript 复制代码 
// 工厂模式: 工厂函数
// 定义一个 createPerson函数
function createPerson(name, age, height, address) {
  // 1、函数内首先先创建一个对象
  var p = {}
  // 2、再进行对对象进行创建属性和赋值
  p.name = name
  p.age = age
  p.height = height;
  p.address = address

  p.eating = function() {
    console.log(this.name + "在吃东西~")
  }

  p.running = function() {
    console.log(this.name + "在跑步~")
  }

  return p
}

var p1 = createPerson("张三", 18, 1.88, "广州市")
var p2 = createPerson("李四", 20, 1.98, "上海市")
var p3 = createPerson("王五", 30, 1.78, "北京市")

// 但是工厂模式的有一个很大的缺点就是获取不到对象最真实的类型
console.log(p1, p2, p3)

工厂方法创建对象有一个比较大的问题：我们在打印对象时，对象的类型都是Object类型 但是从某些角度来说，这些对象应该有一个他们共同的类型，下面我们来看一下另外一种方法：构造函数的方式

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

什么是构造函数?---想详细了解可以点击阅读我的这篇文章

构造函数也是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别，构造函数也是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别，我们也可以简单的理解为构造函数就是JavaScript函数；

用构造函数创建多个对象

javascript 复制代码 
// 规范: 构造函数的首字母一般是大写,用构造函数创建多个对象
function Person(name, age, height, address) {
  this.name = name
  this.age = age
  this.height = height
  this.address = address

  this.eating = function() {
    console.log(this.name + "在吃东西~")
  }

  this.running = function() {
    console.log(this.name + "在跑步")
  }
}

var p1 = new Person("张三", 18, 1.88, "广州市")
var p2 = new Person("李四", 20, 1.98, "北京市")

console.log(p1)
console.log(p2)
p1.eating()
p2.eating()

这个构造函数可以确保我们的对象是有Person的类型的。
但是构造函数就没有缺点了吗？

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

JavaScript中的类和对象

当我们编写如下代码的时候，我们会如何来称呼这个Person呢？

javascript 复制代码 
function Person(){

}
var p1 =new Person()
var p2 =new Person()

在JS中Person应该被称之为是一个构造函数，从很多面向对象语言过来的开发者，也习惯称之为类，因为类可以帮助我们创建出来对象p1、p2。如果从面向对象的编程范式角度来看，Person确实是可以称之为类的

接下来我们详细讲解一下面向对象的特性----继承

面向对象的特性 -- 继承

面向对象有三大特性：封装、继承、多态

封装：我们前面将属性和方法封装到一个类中，可以称之为封装的过程

继承：继承是面向对象中非常重要的，不仅仅可以减少重复代码的数量，也是多态前提（纯面向对象中）

多态：不同的对象在执行时表现出不同的形态

那么这里我们核心讲继承

那么继承是做什么呢？

继承可以帮助我们将重复的代码和逻辑抽取到父类中，子类只需要直接继承过来使用即可

在真正实现继承之前，我们先来理解一个非常重要的概念：原型链

JavaScript原型链

我们知道，从一个对象上获取属性，如果在当前对象中没有获取到就会去它的原型上面获取,这种往上级去寻找的方式，就形成了原型链

代码示例:

javascript 复制代码 
var obj = {
  name: "zayyo",
  age: 18
}

// [[get]]操作
// 1.在当前的对象中查找属性
// 2.如果没有找到, 这个时候会去原型链(__proto__)对象上查找
// 在obj的上级没有address属性
obj.__proto__ = {
}

// 原型链
// 在obj的上上级也没有address属性
obj.__proto__.__proto__ = {
  
}
// 在obj的上上上级添加了一个address属性， 就可以找到address的值，然后打印出来
obj.__proto__.__proto__.__proto__ = {
  address: "广州市"
}

console.log(obj.address)
那么什么地方是原型链的尽头呢？比如第三个对象是否也是有原型__proto__属性呢

那我们就用代码时打印试试，看能不能找到它的尽头

javascript 复制代码 
var obj = { name: "zayyo" }

// console.log(obj.address)

// 到底是找到哪一层对象之后停止继续查找了呢?
// 字面对象obj的原型是 [Object: null prototype] {}

console.log(obj.__proto__) //[Object: null prototype] {}

// obj.__proto__ => [Object: null prototype] {}
console.log(obj.__proto__.__proto__) //null

找到后面，我们发现obj.proto.__proto__打印的已经是null了，obj.__proto__打印的是[Object: null prototype] {}，很明显字面对象obj的原型就是== [Object: null prototype] {}==

那么我们可能会问题： [Object: null prototype] {} 原型有什么特殊吗？
  • 特殊一：该对象有原型属性，但是它的原型属性已经指向的是null，也就是已经是顶层原型了
  • 特殊二：该对象上有很多默认的属性和方法
    我们来打印看看顶层对象里面都有些什么，这里的属性太多了，我们就不一一解释了，感兴趣的同学自己去查吧
javascript 复制代码 
console.log(Object.getOwnPropertyDescriptors(Object.prototype))

// {
//   constructor: {  //构造属性
//     value: [Function: Object],
//     writable: true,
//     enumerable: false,
//     configurable: true
//   },
//   __defineGetter__: {  
//     value: [Function: __defineGetter__],
//     writable: true,
//     enumerable: false,
//     configurable: true
//   },
//   __defineSetter__: { 
//     value: [Function: __defineSetter__],
//     writable: true,
//     enumerable: false,
//     configurable: true
//   },
//   hasOwnProperty: {
//     value: [Function: hasOwnProperty],
//     writable: true,
//     enumerable: false,
//     configurable: true
//   },
//   __lookupGetter__: {
//     value: [Function: __lookupGetter__],
//     writable: true,
//     enumerable: false,
//     configurable: true
//   },
//   __lookupSetter__: {
//     value: [Function: __lookupSetter__],
//     writable: true,
//     enumerable: false,
//     configurable: true
//   },
//   isPrototypeOf: {
//     value: [Function: isPrototypeOf],
//     writable: true,
//     enumerable: false,
//     configurable: true
//   },
//   propertyIsEnumerable: {
//     value: [Function: propertyIsEnumerable],
//     writable: true,
//     enumerable: false,
//     configurable: true
//   },
//   toString: {
//     value: [Function: toString],
//     writable: true,
//     enumerable: false,
//     configurable: true
//   },
//   valueOf: {
//     value: [Function: valueOf],
//     writable: true,
//     enumerable: false,
//     configurable: true
//   },
//   ['__proto__']: {
//     get: [Function: get __proto__],
//     set: [Function: set __proto__],
//     enumerable: false,
//     configurable: true
//   },
//   toLocaleString: {
//     value: [Function: toLocaleString],
//     writable: true,
//     enumerable: false,
//     configurable: true
//   }
// }

我们来试试给改变对象的隐性原型（proto），隐私原型一般指向顶层原型[Object: null prototype] {}，我们们修改了就 等于在他们中间加了一层，最终的顶层原型还是[Object: null prototype] {}，这是毋庸置疑的

javascript 复制代码 
var obj = {
  name: "zayyo",
  age: 18
}

var obj2 = {
  address: "广州市"
}
obj.__proto__ = obj2//把boj的隐性原型指向boj2，obj2变成了obj的上层原型

Object.prototype //原本的顶层原型
console.log(obj.__proto__) //{ address: '北京市' }
console.log(obj.__proto__.__proto__) //[Object: null prototype] {}
console.log(obj.__proto__.__proto__.__proto__) //null
console.log(Object.prototype)//[Object: null prototype] {}

console.log(obj.__proto__ === Object.prototype) //false

那么如果我们想要实现继承，要怎么来实现呢？

如果我们现在需要实现继承，那么就可以利用原型链来实现了，接下来我们用代码给大家演示一下

javascript 复制代码 
在这里插入代码片
相关推荐
小曲曲1 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下，循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
Theodore_10223 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js：提升开发效率，更轻量、更高效的状态管理方案！
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中，vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
----云烟----5 小时前
QT中QString类的各种使用
开发语言·qt
lsx2024065 小时前
SQL SELECT 语句：基础与进阶应用
开发语言
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作