자바스크립트 객체 사용법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

자바스크립트 객체 사용법

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 10, 2023 pm 12:00 PM

JavaScript는 역동적이고 유연한 프로그래밍 언어로 널리 사용됩니다. JavaScript에서 객체는 가장 강력하고 일반적으로 사용되는 언어 구성 요소 중 하나입니다. 이 기사에서는 JavaScript 개체의 사용법, 특성 및 일반적인 응용 프로그램을 소개합니다.

1. JavaScript 개체 소개

JavaScript 개체는 여러 속성을 캡슐화하고 데이터 집합을 구성하는 데 사용되는 데이터 유형입니다. 해당 구문은 객체 리터럴, 생성자 또는 Object.create() 메서드를 사용하여 생성할 수 있습니다.

객체 리터럴 메서드

객체 리터럴 메서드는 JavaScript에서 개체를 생성하는 데 가장 간단하고 일반적으로 사용되는 방법입니다. 구문은 다음과 같습니다.

var obj = {
  propertyName1: value1,
  propertyName2: value2,
  ...
  propertyNameN: valueN
};

로그인 후 복사

그 중 propertyName은 속성 이름이고, value는 속성 값입니다. 객체 리터럴은 JSON과 유사한 객체 생성 방법으로 생각할 수 있습니다. propertyName 为属性名，value 为属性值。可以认为对象字面量法是一种类似于 JSON 的创建对象方式。

构造函数法

构造函数法是通过定义一个构造函数来创建对象的方法。其语法如下：

function Object(propertyName1, propertyName2, ..., propertyNameN) {
  this.propertyName1 = propertyName1;
  this.propertyName2 = propertyName2;
  ...
  this.propertyNameN = propertyNameN;
}
var obj = new Object(value1, value2, ..., valueN);

로그인 후 복사

其中，this 关键字表示当前对象，并通过参数传入属性值。

Object.create() 法

Object.create() 是一种创建对象的方法，它可以用来创建新对象并指定该对象的原型对象。其语法如下：

1	`var` `obj = Object.create(proto, [propertiesObject])`

로그인 후 복사

其中，proto 表示原型对象，propertiesObject 表示要添加到对象的属性及其属性值。

二、JavaScript 对象特性

JavaScript 对象有以下几个特性：

对象属性

JavaScript 对象由一组属性组成。属性名称可以是字符串或符号，属性值可以是任意类型的数据，包括简单类型和对象类型。使用属性名称来访问属性值，例如：

1 2	`var` `obj = {name:` `"Tom", age: 20};` `console.log(obj.name);` `// 输出："Tom"`

로그인 후 복사

属性描述符

每个对象属性都有一些描述符，包括可枚举、可写、可配置和值等。可以使用 Object.getOwnPropertyDescriptor() 方法来获取这些属性描述符。

对象方法

JavaScript 对象还可以包含方法，方法是对象属性的一种特殊类型，其值为函数。方法可以用来操作对象及其属性。例如：

var obj = {
  name: "Tom",
  age: 20,
  sayHello: function() {
    console.log("Hello, my name is " + this.name + ", I am " + this.age + " years old.");
  }
};
obj.sayHello(); // 输出："Hello, my name is Tom, I am 20 years old."

로그인 후 복사

对象原型

JavaScript 中的对象可以通过原型来继承属性和方法。每个对象都有一个原型对象，可以使用 Object.getPrototypeOf() 方法来获取该对象的原型。

var parent = {x: 1};
var child = Object.create(parent);
console.log(child.x); // 输出：1

로그인 후 복사

三、JavaScript 对象常见应用

批量创建对象

使用对象字面量法可以批量创建对象。

var arrOfObj = [
   {name: "Tom", age: 20},
   {name: "Jerry", age: 21},
   {name: "Mickey", age: 22}
];

로그인 후 복사

访问和修改对象属性

使用 . 和 []

var obj = {name: "Tom", age: 20};
console.log(obj.name); // 输出："Tom"
obj.age = 21;
console.log(obj["age"]); // 输出：21

로그인 후 복사

그 중 this 키워드는 현재 객체를 나타내며, 속성값은 매개변수를 통해 전달됩니다.

Object.create() 메소드

Object.create()는 객체를 생성하는 메소드이며, 객체의 프로토타입 객체를 지정하는 데 사용할 수 있습니다. 구문은 다음과 같습니다.

function printObjInfo(obj) {
  console.log("Object name is " + obj.name + ", and age is " + obj.age);
}
var obj = {name: "Tom", age: 20};
printObjInfo(obj);
// 输出："Object name is Tom, and age is 20"

로그인 후 복사

그 중 proto는 프로토타입 객체를 나타내고, propertiesObject는 객체에 추가할 속성과 해당 속성값을 나타냅니다.

2. JavaScript 개체 특성

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name + ", I am " + this.age + " years old.");
};
function Student(name, age, grade) {
  Person.call(this, name, age);
  this.grade = grade;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.study = function() {
  console.log(this.name + " is studying in grade " + this.grade);
};
 
var stu = new Student("Tom", 20, 3);
stu.sayHello(); // 输出："Hello, my name is Tom, I am 20 years old."
stu.study(); // 输出："Tom is studying in grade 3"