主页
  • 主页
  • 分类
  • 热文
  • 教程
  • 面试
  • 标签
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 对象


上一章 下一章

JavaScript 对象是一种非原始数据类型,用于以键值对的形式存储数据。这些键值对通常被称为属性。在一个键值对中,键也称为“属性名”,是一个字符串,而值可以是任何类型。如果属性的值是一个函数,则该属性被称为方法。

对象使用花括号创建,每个属性之间用逗号分隔。每个属性写成属性名后跟冒号(:),然后是属性值。键:值对在对象中并不是按照特定顺序存储的,因此对象是一个无序的属性集合,这些属性写成键:值对的形式。

JavaScript 是一种面向对象编程(OOP)语言。如果一种编程语言提供了以下四种基本能力,则可以称之为面向对象的语言。

封装 — 将相关的信息(无论是数据还是方法)一起存储在一个对象中的能力。

抽象 — 隐藏对象实现细节的能力。

继承 — 一个类依赖另一个类(或多个类)的某些属性和方法的能力。

多态 — 编写一个可以在多种不同方式下工作的函数或方法的能力。

让我们详细了解一下 JavaScript 对象。

对象属性

对象属性可以是任何原始数据类型、对象或函数。对象属性通常是对象方法内部使用的变量,但也可以是页面中全局可见的变量。

向对象添加属性的语法如下:

objectName.objectProperty = propertyValue;

例如 — 下面的代码使用文档对象的 "title" 属性获取文档标题。

var str = document.title;

对象方法

方法是允许对象做某事或让某事发生在对象上的函数。函数和方法之间有一个小小的区别 — 函数是一个独立的语句单元,而方法是附加到对象上的,并且可以通过 this 关键字引用。

方法对于从将对象的内容显示到屏幕上到对一组本地属性和参数执行复杂的数学运算都有用。

例如 — 下面是一个简单的示例,演示如何使用文档对象的 write() 方法将任何内容写入文档。

document.write("这是一个测试");

创建新对象

所有用户定义的对象和内置对象都是从一个名为 Object 的对象派生出来的。

我们可以使用对象字面量来创建一个新的用户定义的对象。或者,我们可以创建一个构造函数,然后使用 new 关键字调用此函数以实例化一个对象。

在 JavaScript 中创建对象有多种方式。下面我们将学习所有的方式。

  • 使用对象字面量
  • 使用对象构造函数
  • 使用 Object.create() 方法
  • 使用 JavaScript ES6 类

JavaScript 对象字面量

在 JavaScript 中,‘{}’ 表示对象字面量。你可以在花括号之间添加键值对来定义一个对象。

使用对象字面量定义对象的语法如下:

const obj = {
   key: val,
}

你可以在花括号之间添加键值对。每个键值对之间用逗号分隔,并且键和值之间需要添加一个冒号(:)。

示例

在下面的示例中,我们定义了一个包含 4 个属性的 wall 对象。每个属性包含不同类型的不同值。

在输出中,你可以观察到对象属性及其值。

<html>
<body>
   <p id="output"> </p>
   <script>
      const myBook = {
         title: "Perl",
         author: "Mohtashim",
         pages: 355,
      }
      document.getElementById("output").innerHTML =
      "书名是 : " + myBook.title + "<br>" +
      "作者是 : " + myBook.author + "<br>" +
      "总页数 : " + myBook.pages;
   
</script>
</body>
</html>

输出:

书名是 : Perl
作者是 : Mohtashim
总页数 : 355

JavaScript new 操作符

new 操作符用于创建一个对象的实例。为了创建一个对象,new 操作符后面跟着构造方法。

在下面的示例中,构造方法是 Object()、Array() 和 Date()。这些构造函数是 JavaScript 内置的函数。

var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");

JavaScript Object() 构造函数

构造函数是一个创建并初始化对象的函数。JavaScript 提供了一个特殊的构造函数 Object() 来构建对象。Object() 构造函数的返回值被赋值给一个变量。

这个变量包含指向新对象的引用。分配给对象的属性不是变量,并且不需要使用 var 关键字定义。

示例

尝试下面的示例;它演示了如何创建一个 Object。

<body>  
   <p id="output"> </p>
   <script>
      var book = new Object();   // 创建对象
      book.subject = "Perl";     // 为对象分配属性
      book.author  = "Mohtashim";
      document.getElementById("output").innerHTML = 
      "书名是 : " + book.subject + "<br>" + 
      "作者是 : " + book.author;
   
</script>   
</body>

输出:

书名是 : Perl
作者是 : Mohtashim

JavaScript 构造函数

在 JavaScript 中,你可以定义一个自定义函数,并将其用作构造函数来定义一个新对象。这里,自定义函数充当模板。

自定义用户定义构造函数相对于 Object() 构造函数的好处在于,你可以根据需要向自定义函数添加参数。

下面是一个简单的语法,用于使用自定义用户定义构造函数创建对象。

// 对象模板
function ConstructorFunc(para) {
    this.para = para;
}
const obj = new ConstructorFunc(arg);

ConstructorFunc() 函数充当对象模板。它使用 'this' 关键字访问函数上下文并定义函数上下文中的键。同时,键被初始化为 'para' 值。

接下来,你可以使用带有 'new' 关键字的函数作为构造函数定义对象,并向构造函数传递所需的参数。

示例

这个示例演示了如何使用用户定义的构造函数创建一个对象。这里 this 关键字用于引用传递给函数的对象。

<body>   
   <div id="output"> </div>
   <script>
      function Book(title, author) {
         this.title = title; 
         this.author  = author;
      }
      const myBook = new Book("Perl", "Mohtashim");
      document.getElementById("output").innerHTML = 
      "书名是 : " + myBook.title + "<br>" +
      "作者是 : " + myBook.author + "<br>";
   
</script>      
</body>

输出:

书名是 : Perl
作者是 : Mohtashim

JavaScript Object.create() 方法

Object.create() 方法从已经定义的对象创建一个新对象。此外,你还可以在使用 Object.create() 方法从一个对象克隆另一个对象时向对象原型添加一些新的属性。

下面的语法用于使用 Object.create() 方法定义一个新对象。

const obj = Object.create({}, {
    key: { value: val },
})
  • {} — 这是一个空对象。Object.create() 方法会创建它的副本。
  • { key: { value: val }, } — 这是一个包含要添加到克隆对象原型的属性的对象。

示例

在下面的示例中,我们向空对象的原型添加了多个属性。但是,如果你打印对象,你将无法看到任何属性,因为它们是添加到原型中的。

你可以使用点记法访问对象属性。

<body>
   <p id="output"> </p>
   <script>
      const myBook = Object.create({}, {
         title: { value: "Perl" },
         author: { value: "Mohtashim" },
      })
        
      document.getElementById("output").innerHTML = 
      "书名是 : " + myBook.title + "<br>" + 
      "作者是 : " + myBook.author + "<br>";

   
</script>
</body>

输出:

书名是 : Perl
作者是 : Mohtashim

JavaScript ES6 类

ES6 中引入了 JavaScript 类。JavaScript 类是创建对象的模板。类使用 "class" 关键字定义。定义类时,它类似于函数。类关键字后面跟着类名,然后是类体。

class MyClass{
  //类体
} 

你可以使用 new 操作符使用类创建一个对象 —

const myObj = new MyClass();

在这里,ClassName 是类的名字,而 myObject 是使用这个类创建的对象的名字。

我们将在下一章详细介绍 JavaScript 类。

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

关注阅读号

联系二维码

联系我们

© 2024 Yoagoa. All rights reserved.

粤ICP备18007391号

站点地图