主页
  • 主页
  • 分类
  • 热文
  • 教程
  • 面试
  • 标签
JavaScript

JavaScript 基础

JavaScript 主页
JavaScript 概述
JavaScript 特性
JavaScript 启用
JavaScript 展示位置
JavaScript 语法
JavaScript hello_world
JavaScript console.log()
JavaScript 注释
JavaScript 变量
JavaScript let 语句
JavaScript 常量
JavaScript 数据类型
JavaScript 类型转换
JavaScript 严格模式
JavaScript 保留关键字

JavaScript 操作符

JavaScript 操作符
JavaScript 算术运算符
JavaScript 比较操作符
JavaScript 逻辑运算符
JavaScript 位运算符
JavaScript 赋值运算符
JavaScript 条件运算符
JavaScript typeof 运算符
JavaScript Nullish 合并运算符
JavaScript delete 运算符
JavaScript 逗号运算符
JavaScript 分组运算符
JavaScript Yield 运算符
JavaScript 扩展运算符
JavaScript 指数运算符
JavaScript 运算符优先级

JavaScript 控制流

JavaScript if...else 语句
JavaScript while 循环
JavaScript for 循环
JavaScript for...in 循环
JavaScript for...of 循环
JavaScript 循环控制
JavaScript break 语句
JavaScript continue 语句
JavaScript switch 语句
JavaScript 可迭代对象

JavaScript 函数

JavaScript 函数
JavaScript 函数表达式
JavaScript 函数参数和参数值
JavaScript 默认参数
JavaScript Function() 构造函数
JavaScript 函数提升
JavaScript 自执行函数
JavaScript 箭头函数
JavaScript 函数调用
JavaScript call() 方法
JavaScript apply() 方法
JavaScript bind() 方法
JavaScript 闭包
JavaScript 作用域
JavaScript 全局变量
JavaScript 智能函数参数

JavaScript 对象

JavaScript Number 对象
JavaScript Boolean 对象
JavaScript String 对象
JavaScript 数组对象
JavaScript 日期对象
JavaScript DataView 对象
JavaScript 处理程序
JavaScript Math 对象
JavaScript 正则表达式
JavaScript Symbol 类型
JavaScript Set 对象
JavaScript WeakSet 对象
JavaScript Map 对象
JavaScript WeakMap 对象
JavaScript 可迭代对象
JavaScript Reflect 对象
JavaScript TypedArray
JavaScript 模板字面量
JavaScript 标记模板

JavaScript 面向对象

JavaScript 对象
JavaScript 类
JavaScript 对象属性
JavaScript 对象方法
JavaScript 静态方法
JavaScript 显示对象
JavaScript 对象访问器属性
JavaScript 对象构造器
JavaScript 原型(Prototype)
JavaScript ES5 对象方法
JavaScript 封装
JavaScript 继承
JavaScript 抽象
JavaScript 多态
JavaScript 解构赋值
JavaScript 数组解构
JavaScript 嵌套解构
JavaScript 可选链
JavaScript 全局对象
JavaScript mixins
JavaScript 代理(Proxy)

JavaScript Cookies

JavaScript Cookies操作
JavaScript Cookie 属性
JavaScript 删除 Cookies

JavaScript 浏览器 BOM

JavaScript 浏览器对象模型(BOM)
JavaScript 窗口对象
JavaScript Document 对象
JavaScript 屏幕对象
JavaScript Window History 对象
JavaScript Navigator 对象
JavaScript Location 对象
JavaScript Console 对象

JavaScript Web APIs

JavaScript Web API
JavaScript History API
JavaScript 存储 API
JavaScript Forms API
JavaScript Worker API
JavaScript Fetch API
JavaScript 定位 API

JavaScript 事件

JavaScript 事件
JavaScript DOM 事件
JavaScript addEventListener()
JavaScript 鼠标事件
JavaScript 键盘事件
JavaScript 表单事件
JavaScript 窗口事件
JavaScript 事件委托
JavaScript 事件冒泡
JavaScript 事件捕获
JavaScript 自定义事件

JavaScript 错误处理

JavaScript 错误处理
JavaScript try-catch
JavaScript 调试
JavaScript 自定义错误
JavaScript 扩展错误

JavaScript 重要关键字

JavaScript this'关键字
JavaScript void 关键字
JavaScript new 关键字
JavaScript var 关键字

JavaScript HTML DOM

JavaScript HTML DOM
JavaScript DOM 方法
JavaScript 文档对象
JavaScript DOM 元素
JavaScript 文档表单
JavaScript 更改 HTML
JavaScript 更改 CSS
JavaScript DOM 动画
JavaScript DOM 导航
JavaScript DOM 集合
JavaScript 节点列表

JavaScript 杂项

JavaScript Ajax
JavaScript 异步迭代
JavaScript Atomics 对象
JavaScript 剩余参数
JavaScript 页面重定向
JavaScript 对话框
JavaScript 打印网页
JavaScript 表单验证
JavaScript 创建动画
JavaScript 多媒体
JavaScript 图像地图
JavaScript 浏览器兼容性
JavaScript JSON
JavaScript 多行字符串
JavaScript 浅拷贝
JavaScript 日期格式
JavaScript 获取日期方法
JavaScript 调用栈
JavaScript 引用类型
JavaScript 设置日期方法
JavaScript 模块
JavaScript IndexedDB
JavaScript clickjacking(点击劫持)
JavaScript 动态导入
JavaScript BigInt
JavaScript 柯里化(Currying)
JavaScript 图形库
JavaScript Blob
JavaScript Unicode
JavaScript 绘制图形
JavaScript 防抖
JavaScript 性能
JavaScript 编码规范

基础

JavaScript 主页
JavaScript 概述
JavaScript 特性
JavaScript 启用
JavaScript 展示位置
JavaScript 语法
JavaScript hello_world
JavaScript console.log()
JavaScript 注释
JavaScript 变量
JavaScript let 语句
JavaScript 常量
JavaScript 数据类型
JavaScript 类型转换
JavaScript 严格模式
JavaScript 保留关键字

操作符

JavaScript 操作符
JavaScript 算术运算符
JavaScript 比较操作符
JavaScript 逻辑运算符
JavaScript 位运算符
JavaScript 赋值运算符
JavaScript 条件运算符
JavaScript typeof 运算符
JavaScript Nullish 合并运算符
JavaScript delete 运算符
JavaScript 逗号运算符
JavaScript 分组运算符
JavaScript Yield 运算符
JavaScript 扩展运算符
JavaScript 指数运算符
JavaScript 运算符优先级

控制流

JavaScript if...else 语句
JavaScript while 循环
JavaScript for 循环
JavaScript for...in 循环
JavaScript for...of 循环
JavaScript 循环控制
JavaScript break 语句
JavaScript continue 语句
JavaScript switch 语句
JavaScript 可迭代对象

函数

JavaScript 函数
JavaScript 函数表达式
JavaScript 函数参数和参数值
JavaScript 默认参数
JavaScript Function() 构造函数
JavaScript 函数提升
JavaScript 自执行函数
JavaScript 箭头函数
JavaScript 函数调用
JavaScript call() 方法
JavaScript apply() 方法
JavaScript bind() 方法
JavaScript 闭包
JavaScript 作用域
JavaScript 全局变量
JavaScript 智能函数参数

对象

JavaScript Number 对象
JavaScript Boolean 对象
JavaScript String 对象
JavaScript 数组对象
JavaScript 日期对象
JavaScript DataView 对象
JavaScript 处理程序
JavaScript Math 对象
JavaScript 正则表达式
JavaScript Symbol 类型
JavaScript Set 对象
JavaScript WeakSet 对象
JavaScript Map 对象
JavaScript WeakMap 对象
JavaScript 可迭代对象
JavaScript Reflect 对象
JavaScript TypedArray
JavaScript 模板字面量
JavaScript 标记模板

面向对象

JavaScript 对象
JavaScript 类
JavaScript 对象属性
JavaScript 对象方法
JavaScript 静态方法
JavaScript 显示对象
JavaScript 对象访问器属性
JavaScript 对象构造器
JavaScript 原型(Prototype)
JavaScript ES5 对象方法
JavaScript 封装
JavaScript 继承
JavaScript 抽象
JavaScript 多态
JavaScript 解构赋值
JavaScript 数组解构
JavaScript 嵌套解构
JavaScript 可选链
JavaScript 全局对象
JavaScript mixins
JavaScript 代理(Proxy)

Cookies

JavaScript Cookies操作
JavaScript Cookie 属性
JavaScript 删除 Cookies

浏览器 BOM

JavaScript 浏览器对象模型(BOM)
JavaScript 窗口对象
JavaScript Document 对象
JavaScript 屏幕对象
JavaScript Window History 对象
JavaScript Navigator 对象
JavaScript Location 对象
JavaScript Console 对象

Web APIs

JavaScript Web API
JavaScript History API
JavaScript 存储 API
JavaScript Forms API
JavaScript Worker API
JavaScript Fetch API
JavaScript 定位 API

事件

JavaScript 事件
JavaScript DOM 事件
JavaScript addEventListener()
JavaScript 鼠标事件
JavaScript 键盘事件
JavaScript 表单事件
JavaScript 窗口事件
JavaScript 事件委托
JavaScript 事件冒泡
JavaScript 事件捕获
JavaScript 自定义事件

错误处理

JavaScript 错误处理
JavaScript try-catch
JavaScript 调试
JavaScript 自定义错误
JavaScript 扩展错误

重要关键字

JavaScript this'关键字
JavaScript void 关键字
JavaScript new 关键字
JavaScript var 关键字

HTML DOM

JavaScript HTML DOM
JavaScript DOM 方法
JavaScript 文档对象
JavaScript DOM 元素
JavaScript 文档表单
JavaScript 更改 HTML
JavaScript 更改 CSS
JavaScript DOM 动画
JavaScript DOM 导航
JavaScript DOM 集合
JavaScript 节点列表

杂项

JavaScript Ajax
JavaScript 异步迭代
JavaScript Atomics 对象
JavaScript 剩余参数
JavaScript 页面重定向
JavaScript 对话框
JavaScript 打印网页
JavaScript 表单验证
JavaScript 创建动画
JavaScript 多媒体
JavaScript 图像地图
JavaScript 浏览器兼容性
JavaScript JSON
JavaScript 多行字符串
JavaScript 浅拷贝
JavaScript 日期格式
JavaScript 获取日期方法
JavaScript 调用栈
JavaScript 引用类型
JavaScript 设置日期方法
JavaScript 模块
JavaScript IndexedDB
JavaScript clickjacking(点击劫持)
JavaScript 动态导入
JavaScript BigInt
JavaScript 柯里化(Currying)
JavaScript 图形库
JavaScript Blob
JavaScript Unicode
JavaScript 绘制图形
JavaScript 防抖
JavaScript 性能
JavaScript 编码规范

JavaScript ES5 对象方法


上一章 下一章

ECMAScript 5(ES5)是2009年引入的语言的重要修订版。它增加了许多对象方法到JavaScript中,这些方法用于操作和保护对象。这些方法为我们提供了有效遍历对象属性、操作值以及对对象执行各种操作的方式。对象操作是JavaScript编程的基本方面。

JavaScript ES5 对象方法

在 ES5 中,添加了与对象相关的方法来操作和保护对象。下表列出了这些对象方法及其描述:

操纵对象的方法

序号 方法 描述
1 create() 创建带有指定原型对象的新对象。
2 defineProperty() 在对象的原型上克隆对象并添加新属性。
3 defineProperties() 在特定对象中定义一个属性并获取更新后的对象。
4 getOwnPropertyDescriptor() 获取对象属性的属性描述符。
5 getOwnPropertyNames() 获取对象属性。
6 getPrototypeOf() 获取对象的原型。
7 keys() 以数组格式获取对象的所有键。

保护对象的方法

序号 方法 描述
1 freeze() 通过冻结对象防止添加或更新对象属性。
2 seal() 封装对象。
3 isFrozen() 检查对象是否已被冻结。
4 isSealed() 检查对象是否已被封装。
5 isExtensible() 检查对象是否可扩展。
6 keys() 以数组格式获取对象的所有键。
7 preventExtensions() 阻止对象的原型更新。

让我们通过一些例子来理解上述列出的每个方法。

JavaScript Object.create() 方法

JavaScript Object.create() 方法创建一个带有指定原型对象和属性的新对象。这是一个静态方法。

JavaScript 中 Object.create() 方法的语法如下:

Object.create(proto, propertiesObject) 

Object.create() 方法的参数如下:

  • proto - 用作新对象原型的对象。
  • propertiesObject (可选) - 定义新对象属性的对象。

示例

在下面的示例中,使用 person 对象作为其原型创建了 student 对象。

<html>
<body>
  <div id="output"> </div>
  <script>  
    const person = {
      firstName: "John",
      lastName: "Doe"
    };

    const student = Object.create(person);
    student.age = 18;
    
    document.getElementById("output").innerHTML = 
    student.firstName + "<br>" +
    student.lastName + "<br>" +
    student.age;  

  
</script>
</body>
</html>

输出:

John
Doe
18

JavaScript Object.defineProperty() 方法

你可以使用 Object.defineProperty() 方法定义对象的单一属性或更新属性值和元数据。这是一个静态方法。

JavaScript 中 Object.defineProperty() 方法的语法如下:

Object.defineProperty(obj, prop, descriptor) 

Object.defineProperty() 方法的参数如下:

  • obj - 要在其上定义或修改属性的对象。
  • prop (字符串或符号) - 要定义或修改的属性名称。
  • descriptor - 定义属性属性的对象。

示例

下面的示例包含 car 对象的品牌、型号和价格属性。我们使用 defineProperty() 方法在对象中定义了 'gears' 属性。

<html>
<body>
    <div id="output">The obj object is - </div>
    <script>
        const car = {
            brand: "Tata",
            model: "Nexon",
            price: 1000000,
        }

        Object.defineProperty(car, "gears", {
            value: 6,
            writable: true,
            enumerable: true,
            configurable: true
        })
        
        document.getElementById("output").innerHTML += JSON.stringify(car);
    
</script>
</body>
</html>

输出:

The obj object is - {"brand":"Tata","model":"Nexon","price":1000000,"gears":6}

JavaScript Object.defineProperties() 方法

JavaScript 中的 Object.defineProperties() 方法是一个静态方法,用于定义对象的新属性或修改属性。

JavaScript 中 Object.defineProperties() 方法的语法如下:

Object.defineProperties(obj, props)

Object.defineProperties() 方法的参数如下:

  • obj - 要在其上定义或修改属性的对象。
  • props (字符串或符号) - 要定义或修改的属性名称。

示例

在下面的示例中,我们使用 Object.defineProperties() 方法添加两个新属性名为 property1 和 property2。property1 是可写的,而 property2 是不可写的。

<html>
<body>
  <div id="output"> </div>
  <script>  

    const object1 = {};

    Object.defineProperties(object1, {
      property1: {
        value: 42,
        writable: true,
      },
      property2: {
      value: "Tutorials Point",
      writable: false,},
    });

    document.getElementById("output").innerHTML = 
    "Property1 : "  + object1.property1 + "<br>" +
    "Property2 : "  + object1.property2;
    
  
</script>
</body>
</html>

输出:

Property1 : 42
Property2 : Tutorials Point

JavaScript Object.getOwnPropertyDescriptor() 方法

JavaScript 中的 Object.getOwnPropertyDescriptor() 方法返回对象特定属性的属性描述符。返回的属性描述符是一个 JavaScript 对象。

JavaScript Object.getOwnPropertyNames() 方法

JavaScript 中的 Object.getOwnPropertyNames() 方法返回一个数组,其中包含给定对象中的所有属性,包括可枚举和不可枚举的属性。

示例

在下面的示例中,我们使用 getOwnPropertyNames() 方法来获取创建对象的属性名。

<html>
<body>
  <div id="output"> </div>
  <script>  
    const obj = {
      a: 10,
      b: 20,
      c: 30,
    };
    document.getElementById("output").innerHTML = Object.getOwnPropertyNames(obj);
  
</script>
</body>
</html>

输出:

a,b,c

JavaScript Object.getPrototypeOf() 方法

JavaScript 中的 Object.getPrototypeOf() 方法返回指定对象的原型。这是 ES5 中添加的一个静态 JavaScript 方法。

示例

<html>
<body>
  <div id="output"> </div>
  <script>  
    const prototype1 = {name: "John Doe"};
    const object1 = Object.create(prototype1);
    const prot = Object.getPrototypeOf(object1)
    document.getElementById("output").innerHTML = JSON.stringify(prot);
  
</script>
</body>
</html>

输出:

{"name":"John Doe"}

JavaScript Object.keys() 方法

JavaScript 中的 Object.keys() 方法接受一个对象作为参数,并返回一个数组,其中包含该对象自身可枚举属性的名字。

示例

<html>
<body>
  <div id="output"> </div>
  <script>  
    let person = {
      name: "John Doe",
      age: 20,
      profession: "Software Engineer"
    };

    document.getElementById("output").innerHTML = Object.keys(person);
  
</script>
</body>
</html>

输出:

name,age,profession

JavaScript Object.freeze() 方法

JavaScript 中的 Object.freeze() 是一个静态方法,用于冻结一个对象。一个被冻结的对象不能再被修改。不能添加新的属性,也不能移除现有属性,其属性的值也不能被修改。

示例

<html>
<body>
  <div id="output"> </div>
  <script>  
    const obj = {
      prop: 23,
    };

    Object.freeze(obj);    
    // obj.prop = 33;
    // 在严格模式下抛出错误
    document.getElementById("output").innerHTML = obj.prop;
  
</script>
</body>
</html>

输出:

23

JavaScript Object.seal() 方法

JavaScript 中的 Object.seal() 静态方法密封一个对象。在一个密封的对象中,不能添加新的属性,也不能删除属性。

示例

<html>
<body>
  <div id="output"> </div>
  <script>  
    const obj = {
      property: 34,
    };

    Object.seal(obj);
    obj.property = 33;
    document.getElementById("output").innerHTML = obj.property;

    delete obj.property; // 当对象被密封时不能删除
    
    document.getElementById("output").innerHTML = obj.property;
  
</script>
</body>
</html>

输出:

33

JavaScript Object.isFrozen() 方法

JavaScript 中的 Object.isFrozen() 方法如果给定的对象被冻结则返回 true,否则如果对象未被冻结则返回 false。

示例

<html>
<body>
  <div id="output1"> </div>
  <div id="output2"> </div>
  <script>  
    const person = {
      age: 21,
    };
    document.getElementById("output1").innerHTML = Object.isFrozen(person);
    // 预期输出: false
    Object.freeze(person);
    document.getElementById("output2").innerHTML += Object.isFrozen(person);
    // 预期输出: true
  
</script>
</body>
</html>

输出:

false
true

JavaScript Object.isSealed() 方法

JavaScript 中的 Object.isSealed() 方法用于检查给定的对象是否已被密封。如果是,则返回 true;如果不是,则返回 false。

示例

<html>
<body>
  <div id="output1"> </div>
  <div id="output2"> </div>
  <script>  
    const person = {
      name: "John Doe",
    };
    document.getElementById("output1").innerHTML = Object.isFrozen(person);
    // 预期输出: false
    Object.seal(person);
    document.getElementById("output2").innerHTML += Object.isSealed(person);
    // 预期输出: true
  
</script>
</body>
</html>

输出:

false
true

JavaScript Object.preventExtensions() 方法

ES5 中的 Object.preventExtensions() 方法用来阻止对象的原型更新。同时也阻止新的属性被添加到对象中。

示例

<html>
<body>
  <div id="output"> </div>
  <script>  
    const person = {};
    Object.preventExtensions(person);
    try {
      Object.defineProperty(person, 'name', {
        value: "John Doe",
      });
    } catch (e) {
      document.getElementById("output").innerHTML = e;
    }
  
</script>
</body>
</html>

输出:

TypeError: Cannot define property name, object is not extensible

JavaScript Object.isExtensible() 方法

JavaScript 中的 Object.isExtensible() 方法用来检查一个对象是否是可扩展的。如果给定的对象是可以扩展的,则返回 true,否则返回 false。如果一个对象可以添加新的属性,则它是可扩展的。

示例

<html>
<body>
  <div id="output1"> </div>
  <div id="output2"> </div>
  <script>  
    const person = {
      name: "John Doe",
    };
    
    document.getElementById("output1").innerHTML = Object.isExtensible(person);
    // 预期输出: true
    Object.preventExtensions(person);
    document.getElementById("output2").innerHTML += Object.isExtensible(person);
    // 预期输出: false
  
</script>
</body>
</html>

输出:

true
false
上一章 下一章
阅读号二维码

关注阅读号

联系二维码

联系我们

© 2024 Yoagoa. All rights reserved.

粤ICP备18007391号

站点地图