当前位置： 首页 > news >正文

JavaScript的对象详解

news 2025/5/14 2:22:46

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

什么是对象呢？

对象是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的方式创建一个对象

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

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

// 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

代码示例：

// 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

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

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() 方法直接在一个对象上定义 多个 新的属性或修改现有属性，并且返回该对象

代码示例

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（获取对象的所有属性描述符）

代码示例：

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

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

代码示例：

var obj = {name: 'zayyo',age: 18
}// 1.禁止对象继续添加新的属性
Object.preventExtensions(obj)obj.height = 1.88
obj.address = "广州市"console.log(obj)

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

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

代码示例：

// 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

代码示例：

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

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

创建多个对象的方案

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

// 工厂模式: 工厂函数
// 定义一个 createPerson函数
function createPerson(name, age, height, address) {// 1、函数内首先先创建一个对象var p = {}// 2、再进行对对象进行创建属性和赋值p.name = namep.age = agep.height = height;p.address = addressp.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函数；

用构造函数创建多个对象

// 规范: 构造函数的首字母一般是大写,用构造函数创建多个对象
function Person(name, age, height, address) {this.name = namethis.age = agethis.height = heightthis.address = addressthis.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呢？

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

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

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

面向对象的特性 – 继承

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

封装：我们前面将属性和方法封装到一个类中，可以称之为封装的过程
继承：继承是面向对象中非常重要的，不仅仅可以减少重复代码的数量，也是多态前提（纯面向对象中）
多态：不同的对象在执行时表现出不同的形态

那么这里我们核心讲继承

那么继承是做什么呢？

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

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

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__属性呢

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

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，也就是已经是顶层原型了
  • 特殊二：该对象上有很多默认的属性和方法
    我们来打印看看顶层对象里面都有些什么，这里的属性太多了，我们就不一一解释了，感兴趣的同学自己去查吧
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] {}，这是毋庸置疑的

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

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

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

在这里插入代码片

http://www.mrgr.cn/news/16201.html

相关文章：

  • C--四种排序方法的补充
  • 足底筋膜炎怎么治疗效果好
  • 掌握AIGC的魔法：编写高质量提示词的艺术与科学
  • 【C++11及其特性】左值和右值
  • 高级字符串算法
  • 算法设计与分析：实验四 动态规划—鸡蛋掉落问题
  • Java之初始泛型
  • Android 15 大变更：支持 16K 内存分页，所有 native app 必须重编译～
  • 第六课，模运算进阶，计算机存储单位
  • 运用Premiere自学视频剪辑，这些岗位你能胜任！
  • 等保2.0--安全计算环境--TiDB数据库
  • 微服务优缺点以及如何拆分
  • YOLOv9独家改进：一种高效移动应用的卷积加性自注意Vision Transformer
  • 技术周总结08.26-09.01(软件架构)
  • 麦弗逊悬架KC特性分析APP开发与应用
  • 渐进式衰老？医美三剑客的“市梦率”幻灭了
  • 干货分享|分享一款自己常用的桌面整理神器 WPS桌面整理
  • 点击消除：删除连续重复的字符
  • 信息安全--（五）物理与环境安全技术（二）机房安全分析与防护
  • 【Linux操作系统】重装系统配置文件一条龙