JavaScript对象及对象方法详解

已于 2024-08-24 08:50:32 修改
阅读量441 收藏 6
点赞数 14
分类专栏： JavaScript从入门到精通 文章标签： javascript 开发语言 ecmascript
于 2024-08-24 08:37:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanchen4139/article/details/141486429
版权

JavaScript对象及对象方法详解

在这里插入图片描述

引言

简要介绍主题

在前端开发中，JavaScript 对象是不可或缺的一部分。对象是 JavaScript 中的基本数据结构，用于存储和组织数据。对象方法则是对象中的函数，用于操作对象的数据。本文将详细介绍 JavaScript 中的对象及对象方法，帮助前端开发人员更好地理解和掌握这些基本概念。

目标和预期收获

通过本文，读者将学会如何创建和使用 JavaScript 对象，理解对象的属性和方法，并掌握对象方法的定义和使用。读者还将了解这些概念的最佳实践和常见问题的解决方案。

文章目录

主要内容

创建对象

对象字面量

对象字面量是创建对象的最简单方式，使用花括号 {} 定义对象。

const person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log("Hello, " + this.name + "!");
  }
};

console.log(person.name); // 输出: Alice
person.greet(); // 输出: Hello, Alice!
构造函数

构造函数是另一种创建对象的方式，使用 new 关键字调用构造函数。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log("Hello, " + this.name + "!");
  };
}

const person1 = new Person("Bob", 30);
console.log(person1.name); // 输出: Bob
person1.greet(); // 输出: Hello, Bob!
使用 Object.create

Object.create 方法可以创建一个新对象，并将其原型设置为指定的对象。

const personPrototype = {
  greet: function() {
    console.log("Hello, " + this.name + "!");
  }
};

const person2 = Object.create(personPrototype);
person2.name = "Charlie";
person2.age = 35;

console.log(person2.name); // 输出: Charlie
person2.greet(); // 输出: Hello, Charlie!

对象的属性和方法

访问属性

可以使用点号 . 或括号 [] 访问对象的属性。

const person = {
  name: "Alice",
  age: 25
};

console.log(person.name); // 输出: Alice
console.log(person["age"]); // 输出: 25
添加和删除属性

可以动态地添加和删除对象的属性。

const person = {
  name: "Alice",
  age: 25
};

person.gender = "female"; // 添加属性
console.log(person.gender); // 输出: female

delete person.age; // 删除属性
console.log(person.age); // 输出: undefined
定义方法

方法是对象中的函数，用于操作对象的数据。

const person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log("Hello, " + this.name + "!");
  }
};

person.greet(); // 输出: Hello, Alice!

对象的原型和继承

原型链

每个对象都有一个原型对象，通过 __proto__ 属性可以访问原型对象。

const personPrototype = {
  greet: function() {
    console.log("Hello, " + this.name + "!");
  }
};

const person = Object.create(personPrototype);
person.name = "Alice";

console.log(person.__proto__ === personPrototype); // 输出: true
person.greet(); // 输出: Hello, Alice!
继承

通过原型链实现对象的继承。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log("Hello, " + this.name + "!");
};

function Student(name, age, major) {
  Person.call(this, name, age);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

const student = new Student("Alice", 20, "Computer Science");
console.log(student.name); // 输出: Alice
student.greet(); // 输出: Hello, Alice!

对象的遍历

for...in 循环

for...in 循环用于遍历对象的可枚举属性。

const person = {
  name: "Alice",
  age: 25,
  gender: "female"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}
Object.keys 和 Object.values

Object.keys 和 Object.values 方法分别返回对象的所有键和所有值。

const person = {
  name: "Alice",
  age: 25,
  gender: "female"
};

console.log(Object.keys(person)); // 输出: ["name", "age", "gender"]
console.log(Object.values(person)); // 输出: ["Alice", 25, "female"]

深入探讨

技术细节

对象的深拷贝和浅拷贝

浅拷贝只复制对象的引用，而深拷贝则复制对象的所有属性和值。

const person1 = {
  name: "Alice",
  age: 25,
  address: {
    city: "New York",
    zip: "10001"
  }
};

const person2 = Object.assign({}, person1); // 浅拷贝
person2.name = "Bob";
person2.address.city = "Los Angeles";

console.log(person1.name); // 输出: Alice
console.log(person1.address.city); // 输出: Los Angeles

const person3 = JSON.parse(JSON.stringify(person1)); // 深拷贝
person3.name = "Charlie";
person3.address.city = "San Francisco";

console.log(person1.name); // 输出: Alice
console.log(person1.address.city); // 输出: Los Angeles

最佳实践和妙用

  1. 使用对象字面量简化代码：对象字面量是创建对象的最简单方式，适用于大多数场景。

    const person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log("Hello, " + this.name + "!");
  }
};

person.greet(); // 输出: Hello, Alice!

  2. 避免直接修改原型：尽量避免直接修改对象的原型，以防止意外的副作用。

    function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log("Hello, " + this.name + "!");
};

const person = new Person("Alice", 25);
person.greet(); // 输出: Hello, Alice!

  3. 使用 Object.create 实现继承：Object.create 方法可以创建一个新对象，并将其原型设置为指定的对象，适用于实现对象的继承。

    const personPrototype = {
  greet: function() {
    console.log("Hello, " + this.name + "!");
  }
};

const person = Object.create(personPrototype);
person.name = "Alice";
person.greet(); // 输出: Hello, Alice!

实用和精彩的示例

使用对象和方法实现一个简单的计算器
const calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  },
  multiply: function(a, b) {
    return a * b;
  },
  divide: function(a, b) {
    if (b === 0) {
      throw new Error("Division by zero is not allowed.");
    }
    return a / b;
  }
};

console.log(calculator.add(2, 3)); // 输出: 5
console.log(calculator.subtract(5, 3)); // 输出: 2
console.log(calculator.multiply(2, 3)); // 输出: 6
console.log(calculator.divide(6, 3)); // 输出: 2

在这个示例中，我们使用对象和方法实现了一个简单的计算器，计算器的方法用于执行基本的算术运算。

常见问题和解决方案

  1. 对象的深拷贝：浅拷贝只复制对象的引用，而深拷贝则复制对象的所有属性和值。可以使用 JSON.parse(JSON.stringify(obj)) 实现深拷贝。

    const person1 = {
  name: "Alice",
  age: 25,
  address: {
    city: "New York",
    zip: "10001"
  }
};

const person2 = JSON.parse(JSON.stringify(person1)); // 深拷贝
person2.name = "Bob";
person2.address.city = "Los Angeles";

console.log(person1.name); // 输出: Alice
console.log(person1.address.city); // 输出: New York

  2. 避免直接修改原型：尽量避免直接修改对象的原型，以防止意外的副作用。可以使用 Object.create 方法创建一个新对象，并将其原型设置为指定的对象。

    const personPrototype = {
  greet: function() {
    console.log("Hello, " + this.name + "!");
  }
};

const person = Object.create(personPrototype);
person.name = "Alice";
person.greet(); // 输出: Hello, Alice!

实际应用

案例研究

使用对象和方法实现一个简单的计算器
const calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  },
  multiply: function(a, b) {
    return a * b;
  },
  divide: function(a, b) {
    if (b === 0) {
      throw new Error("Division by zero is not allowed.");
    }
    return a / b;
  }
};

console.log(calculator.add(2, 3)); // 输出: 5
console.log(calculator.subtract(5, 3)); // 输出: 2
console.log(calculator.multiply(2, 3)); // 输出: 6
console.log(calculator.divide(6, 3)); // 输出: 2

在这个示例中，我们使用对象和方法实现了一个简单的计算器，计算器的方法用于执行基本的算术运算。

工具和资源

  1. MDN Web Docs：提供详细的JavaScript文档和示例，帮助深入理解对象和对象方法。
  2. JavaScript教程：推荐一些在线教程和视频课程，如FreeCodeCamp和Codecademy。

知识点拓展

关联知识点

  1. 原型链：理解原型链，有助于更好地理解对象的继承和方法的查找机制。
  2. 高阶函数：高阶函数是接受函数作为参数或返回函数的函数，常用于实现函数式编程。

面试八股文

  1. 什么是对象？

    对象是JavaScript中的基本数据结构，用于存储和组织数据。对象是一组键值对的集合，其中键是字符串，值可以是任何数据类型。

  2. 如何创建对象？

    可以使用对象字面量、构造函数或 Object.create 方法创建对象。

    const person = {
  name: "Alice",
  age: 25
};

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person("Bob", 30);

const personPrototype = {
  greet: function() {
    console.log("Hello, " + this.name + "!");
  }
};

const person2 = Object.create(personPrototype);
person2.name = "Charlie";

  3. 如何实现对象的继承？

    可以使用原型链实现对象的继承。通过 Object.create 方法创建一个新对象，并将其原型设置为指定的对象。

    const personPrototype = {
  greet: function() {
    console.log("Hello, " + this.name + "!");
  }
};

const person = Object.create(personPrototype);
person.name = "Alice";
person.greet(); // 输出: Hello, Alice!

  4. 如何实现对象的深拷贝？

    可以使用 JSON.parse(JSON.stringify(obj)) 实现对象的深拷贝。

    const person1 = {
  name: "Alice",
  age: 25,
  address: {
    city: "New York",
    zip: "10001"
  }
};

const person2 = JSON.parse(JSON.stringify(person1)); // 深拷贝
person2.name = "Bob";
person2.address.city = "Los Angeles";

console.log(person1.name); // 输出: Alice
console.log(person1.address.city); // 输出: New York

总结

回顾主要内容

本文详细介绍了JavaScript中的对象及对象方法，包括对象的创建、属性和方法的定义和使用，以及对象的原型和继承。还介绍了对象的遍历方法，如 for...in 循环和 Object.keys 方法。此外，本文深入探讨了对象的深拷贝和浅拷贝，提供了丰富的代码示例和最佳实践。

重申目标

通过本文，读者应该能够熟练使用JavaScript对象和对象方法，理解这些概念的技术细节和常见问题的解决方案。

未来展望

随着JavaScript的不断发展，对象和对象方法的使用也会变得更加灵活和高效。读者可以进一步学习和实践，以提高自己的编程能力。

参考资料

  1. MDN Web Docs：JavaScript对象
  2. MDN Web Docs：JavaScript闭包
  3. FreeCodeCamp：JavaScript教程

看到这里的小伙伴，欢迎 点赞👍评论📝收藏🌟

希望本文对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言或通过联系方式与我交流。感谢阅读

程序员凡尘
关注
  • 14
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
细说JavaScript对象（JavaScript对象详解）
zhishunet
01-15 1025
对象除了是一种数据结构它在js中还有另外一个功能，就是编程设计的一种模式，就是用对象的数据结构实现了js语言设计，例如window是一个对象，alert作为window对象的一个属性存在，其实window对象包含js中的所有方法，因为window对象是浏览器的一个全局对象，js所有开发的编码都是在这个全局对象下完成的，或者说是挂载在这个window对象下的。var Person1 = new Person("知数SEO","女",8);
JavaScript对象方法详解
zzx262625的博客
05-07 390
在JavaScript中，对象是一种复合值，它将多个值（原始值或对象值）聚合在一起，并且可以通过名字来访问这些值。每个名字（即属性名）都关联到一个值，并且这些值可以是数据（属性）或函数（方法）。对象通常通过构造函数、对象字面量或方法创建。在JavaScript中，对象的方法实际上是附加到对象的函数。它们可以通过对象名加上点号（）和函数名来调用。方法的定义可以在对象字面量中直接进行，也可以作为对象的属性在后续添加。JavaScript对象方法是对象的一个重要组成部分，它们允许我们定义与对象相关的操作。通过。
【JavaScript】Math 对象常见方法详解
浅陌繁星的博客
12-28 1317
也就是说，从 0（包括 0）往上，但是不包括 1（排除 1），然后您可以缩放到所需的范围。Math属于一个工具类，它不需要我们创建对象，它里边封装了属性运算相关的常量和方法，我们可以直接使用它来进行数学运算相关的操作。函数返回作为输入参数的数字中最小的一个，如果没有参数，则返回。函数返回作为输入参数的最大数字，如果没有参数，则返回。函数总是返回小于等于一个给定数字的最大整数。：Math.min(数字1，数字2，数字3…：Math.max(数字1，数字2，数字3…：给定数字的值四舍五入到最接近的整数。
JavaScript对象类型的详解
weixin_47556601的博客
02-10 1495
大家好，今天我们分享一下JavaScript的对象类型 JavaScript对象是由很多的键值对组成的 所谓的键值对，就是一个键对应着一个值，是一 一对应的 JavaScript对象的格式： var 对象名 = { 属性: 属性值， 属性: 属性值， 属性: 属性值 } 注意点： 1.逗号以及冒号都是英文状态下的 2. 最后一个属性值的后面不用加分号 举实例： 我们定义了一个person对象，它有4个属性 var person =
JavaScript 面向对象详解
qq_36081714的博客
08-09 4702
JavaScript面向对象
JavaScript数组对象的迭代方法详解
qq_39155611的博客
05-23 2267
JavaScript数组对象的迭代方法详解 上一篇博客讲到了数组的方法，当然里边比较复杂的就是数组的迭代方法，因为涉及到了回调函数，所以这篇博客我们来详细讲解一下js数组迭代方法的使用。 1.forEach(funcrion(value,index,arr){}):对数组的每一项运行给定函数，这个方法不进行返回，所以一般用于让数组循环执行某方法。 var arr=[1,2,3,4,5,6]; arr.forEach(function(val,index,arr){ conso
JavaScript -- Date对象及常用方法介绍
Qlz的博客
12-06 591
文章目录 Date 1 Date介绍 2 常用方法介绍 3 创建指定日期的Date对象 4 日期的格式化 Date Date - JavaScript 1 Date介绍 在JS中所有的和时间相关的数据都由Date对象来表示 创建Date对象 let d = new Date() // 直接通过new Date()创建时间对象时，它创建的是当前的时间的对象 console.log(d) image-20221203140813936 2 常用方法介绍 getFullYear() 获取4位年份 getMo
Javascript location 对象详解
大剑师兰特的GIS世界
05-24 652
`location`对象是JavaScript中与当前页面地址栏信息相关的内置对象，它提供了当前页面URL的各种属性以及用于导航的方法。这对于在网页中实现页面跳转、获取或修改URL参数等操作非常有用。
JavaScript中Array对象方法
weixin_46958879的博客
08-04 739
JavaScript中Array对象方法
JavaScript Array对象的filter方法详解
AngelLover2017的博客
01-06 3356
Filter语法 array.filter(function(currentValue,index,arr), thisValue) 参数 描述 function(currentValue,index,arr) 必选项，每个filter都需要一个回调函数用来写过滤的逻辑 ...
JavaScript String 对象常用方法详解
10-22
JavaScript中的String对象封装了多种用于操作字符串的方法，这些方法让我们可以轻松地进行诸如拼接、搜索、替换和比较等操作。接下来，我们就来详细了解一下JavaScript String对象的常用方法。 首先，要明白一个...
JavaScript Array对象基本方法详解
10-16
JavaScript中的Array对象是编程中非常基础且重要的部分，它提供了丰富的内置方法来处理数组中的数据。下面我们将详细探讨数组对象的一些基本方法。 1. **创建数组** - 使用`new Array()`构造函数创建数组，例如： ...
JavaScript原生对象之Number对象的属性和方法详解
10-24
综上所述，JavaScript Number对象提供了丰富的属性和方法，使得开发者能够方便地处理各种数字相关问题，无论是进行数值转换、判断数值范围，还是处理特殊情况如NaN、无穷大值等。掌握这些Number对象的知识点，对于...
JavaScript面向对象中接口实现方法详解
10-16
在JavaScript面向对象编程中，接口是实现类之间约定的一种抽象概念，它定义了一组方法，但不提供这些方法的具体实现。通过这种方式，接口保证了在不同类之间实现了一定的功能一致性。 首先，接口的定义借鉴了现实...
javascript引用对象的方法代码
10-30
JavaScript 引用对象的方法代码详解 在 JavaScript 中，引用对象的方法代码是指通过不同的方式来获取页面中的元素对象引用。下面将对各种方法进行详细的介绍和说明。 使用 ID 使用 ID 来获取元素对象引用是最常见...
nodejs安装
a1241436267的博客
08-19 406
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 327
npm。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 332
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 994
用于在Vue应用程序或API路由中进行HTTP请求，详见。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值