JavaScript 연구 노트: 객체 만들기_javascript 기술

JavaScript에는 강력하고 사용하기 쉬운 Date, Array, String 등과 같은 객체가 내장되어 있어 누구나 좋아합니다. 그러나 일부 복잡한 로직을 처리할 때 내장 객체는 매우 무력합니다. , 개발자는 종종 개체를 사용자 정의해야 합니다.

JavaScript의 정의에 따르면 객체는 순서가 지정되지 않은 속성의 모음이며 해당 속성에는 기본 값, 객체 또는 함수가 포함될 수 있습니다. 즉, 객체는 특정 순서가 없는 속성 집합입니다. 각 속성은 키-값 쌍 집합인 값에 매핑됩니다. 값은 데이터일 수도 있고 객체일 수도 있습니다.

객체는 자바스크립트의 기본 데이터 유형입니다. JavaScript에서는 문자열, 숫자, true, false, null, undefine 이외의 값이 객체입니다. 따라서 객체를 이해하지 못한 채 JavaScript를 계속해서 학습한다는 것은 매우 어렵습니다. 오늘부터 사물에 대해 배우기 시작하세요.

개요

객체는 JavaScript의 기본 데이터 유형으로, 정렬되지 않은 속성의 집합으로 간주할 수 있는 해시 테이블입니다. 이러한 값은 속성 이름을 통해 액세스되며 null 문자를 포함한 모든 문자열이 될 수 있습니다. 간단히 말하면, 객체는 속성의 모음입니다. 속성에는 이름(키)과 값(값)이 포함됩니다.

JavaScript 객체가 무엇인지 이해하려면 이렇게 생각하면 됩니다. JavaScript에서 객체는 속성을 가진 특정 몸체입니다. 당신이 보는 소녀를 생각해 보세요. 이 소녀는 자신만의 특성을 가지고 있습니다. 예를 들어 여자의 키, 나이, 이름 등이 있습니다. 마찬가지로 JavaScript에서는 속성을 사용하여 개체의 특성을 정의할 수도 있습니다.

객체 생성

객체를 배우고 싶으면 먼저 객체가 있어야 합니다. 그렇다면 JavaScript에서 객체를 어떻게 생성하는지에 대한 질문이 생깁니다. 다음으로 JavaScript에서 객체를 생성하는 방법을 살펴보겠습니다.

JavaScript에 관한 많은 책에서는 주로 다음을 포함하여 객체 생성 방법을 소개합니다.

객체 리터럴을 사용하여 객체 생성(키-값)

새 항목을 사용하여 개체 만들기

Object.create()를 사용하여 객체 생성

함수를 사용하여 개체 만들기

프로토타입을 사용하여 개체 만들기

객체 리터럴을 사용하여 객체 생성

객체 리터럴은 객체를 생성하는 가장 간단한 형태입니다. 이는 많은 속성을 포함하는 객체를 생성하는 과정을 단순화하는 것을 목표로 합니다. 객체 리터럴은 속성 이름(key)과 속성 값(values)의 쌍으로 구성된 매핑 테이블입니다. 키와 값은 콜론(:)으로 구분되며, 각 키/값 쌍은 쉼표( ,) 전체 매핑 테이블은 중괄호({})로 묶입니다.

객체 리터럴을 통해 객체를 생성하는 구문은 다음과 같습니다.

var obj = {
property_1: value_1, // property_# 可能是一个标识符...
2: value_2, // 或者是一个数字
// ...,
"property n": value_n // 或是一个字符串
};

여기서 obj는 생성된 객체의 이름이고, 각 property_i는 식별자(이름, 숫자 또는 문자열 리터럴일 수 있음)이며, 각 value_i는 해당 값이며, 이 값은 property_i에 할당됩니다. 구체적인 예를 살펴보겠습니다.

var girl = {
'name': '欣欣',
'age' : 18,
'height': 175,
'weight': 45
}

이 예에서는 girl이라는 개체를 만듭니다. 이 개체에는 이름, 나이, 키, 몸무게라는 네 가지 속성이 있습니다. 이 네 가지 속성은 속성 값에 해당합니다.

객체 리터럴을 사용하여 객체를 생성할 때 중괄호({})를 비워 두면 기본 속성과 메서드만 포함하는 객체를 정의할 수 있습니다. 예:

var obj = {}

이렇게 생성된 객체를 사용할 때에는 점(.)을 통해 객체 obj에 대한 객체 속성, 즉 obj.key를 생성하고 해당 객체의 속성값을 할당할 수 있습니다. 또한 대괄호([])를 통해 객체 obj에 대한 객체 속성, 즉 obj['key']를 생성하고 객체의 속성 값을 할당할 수도 있습니다. 아래 예는 다음과 같습니다.

var girl = {};
girl.name = '欣欣';
girl.age = 18;
girl['height'] = 175;
girl['weight'] = 45;

Chrome에서 소녀 개체를 인쇄하면 출력 결과는 다음과 같습니다.

console.log(girl);
//Object {name: "欣欣", age: 18, height: 175, weight: 45}

new를 사용하여 객체 만들기

new 연산자와 Object 생성자를 사용하여 객체를 생성할 수도 있습니다(생성자에 대해서는 나중에 자세히 설명).

var obj = new Object(); // obj와 동일 = {}

obj는 초기 상태에서는 빈 객체이지만 JavaScript에서는 멤버를 쉽게 추가하고 동적으로 사용할 수 있으므로 계속해서 멤버 변수와 메서드를 추가할 수 있습니다. 예:

var girl = new Object();
girl['name'] = '欣欣';
girl['age'] = 18;
girl['height'] = 175;
girl['weight'] = 45;

Object.create()를 사용하여 객체 생성

객체는 Object.create() 메서드를 사용하여 생성할 수도 있습니다. 이 방법은 생성자를 정의하지 않고도 생성된 객체에 대한 프로토타입 객체를 선택할 수 있다는 점에서 유용합니다.

Object.create() 메서드는 지정된 프로토타입과 여러 가지 지정된 속성을 사용하여 객체를 생성합니다.

Object.create(proto, [ PropertiesObject ])

Object.create() 메서드는 객체를 생성하고 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 이 객체의 프로토타입 객체 proto이고, 두 번째 매개변수는 객체의 속성을 추가로 설명하는 선택적 매개변수입니다. 이 방법은 사용이 매우 간단합니다.

var obj1 = Object.create({
x: 1,
y: 2
}); //对象obj1继承了属性x和y
var obj2 = Object.create(null); //对象obj2没有原型

如果 proto 参数不是 null 或一个对象值，则抛出一个 TypeError 异常。
有关于Object.create()方法更多的示例可以点击这里进行了解。

使用函数创建对象

在实际使用当中，字面量创建对象虽然很有用，但是它并不能满足我们的所有需求，我们希望能够和其他后台语言一样创建一个类，然后声明类的实例就能够多次使用，而不用每次使用的时候都要重新创建它。

因为JavaScript没有类，一般都是使用函数来定义一个类似其他语言中的类格式，比如：

function Person() {
this.name = "mary"; // 为这个类添加一个成员变量name，并为这个成员变量赋默认值
this.age = 5;
this.sayHello = function () {
console.log(this.name + " : " + this.age);
};
}

定义好类之后，我们就可以像下面这样创建和使用对象：

var person1 = new Person();
person1.name = 'Tom';
person1.age = 20;
person1.sayHello(); // Tom : 20
var person2 = new Person();
person2.name = 'W3cplus';
person2.age = 5;
person2.sayHello(); // W3cplus : 5

Person()函数不是用来被调用的，它是用来被new用的。

通过原型创建对象

这种方法比较前几种方法来说算是最为复杂，最为高级的方法。这里还涉及到封装的一些知识(有关于这些后续学习到了再记录)。这里简单看看如何通过原型创建对象。

首先像函数方法创建对象一样，先定义一个函数：

function Person() {
this.name = "W3cplus";
this.age = 5;
this.walk = function () {
console.log("一个前端网站...");
};
}

然后在外部可以扩允成员：

//添加成员方法
Person.prototype.sayHello = function () {
console.log("hello");
};
//也可以添加成员属性，
Person.prototype.height = 100;

一方面，原型可以扩充原有类的功能(特别是添加有用方法)，也可以像下面这样写:

function Person() { }
Person.prototype.name = "W3cplus";
Person.prototype.age = 5;
Person.prototype.walk = function () {
console.log("一个前端网站...");
};
Person.prototype.sayHello = function () {
console.log("hello");
};
Person.prototype.height = 100;

属性访问

对象属性访问一般有两种方法，第一种是使用点(.)表示法，这也是最常用的一种方法，也是很多面向对象语言中通用的语法。第二种方法还可以使用中括号([])表示法来访问对象的属性。在使用中括号语法时，应该将要访问的属性以字符串的形式放在中括号中。如下：

person['name'];
person.name;

从功能上来说，上面两种方法访问对象属性没有任何区别。但中括号语法的主要优点有两个：

可能通过变量访问属性，如下：

var propertyName = 'name';
person[propertyName];

另外一个优点是，如果属性名中包含了会导致语法错误的字符或者属性名使用的是关键字或保留字，可以使用中括号访问属性，如下：

person['first name'];

一般情况之下，除非必须使用亦是来访问对象属性，否则建议使用点(.)的方法来访问对象属性。

总结

对象是JavaScript的基本数据类型，如果要更好的往下学习JavaScript相关的知识，很有必要先把对象整明白。这篇主要介绍了几种创建对象的方法。较为简单的是通过字面量({})和new Object()方法创建，但这两种方法创建的对象复用性较差；使用Object.create()创建对象时不需要定义一个构造函数就允许你在对象中选择其原型对象。除了这几种方法还可以使用函数和原型创建对象，而这两种方法相对来说可复用性强，只是使用较为复杂。

有关JavaScript学习笔记之创建对象的知识小编就给大家介绍到这里，希望对大家有所帮助！