객체 지향 JavaScript — 객체 및 생성자

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

JavaScript는 부분적으로 객체 지향 언어입니다.

JavaScript를 배우려면 JavaScript의 객체 지향 부분을 배워야 합니다.

이 기사에서는 객체와 생성자를 살펴보겠습니다.

객체의 속성에 접근하기

대괄호 표기법이나 점 표기법을 사용하여 객체의 속성에 액세스할 수 있습니다.

대괄호 표기법을 사용하려면 다음과 같이 작성할 수 있습니다.

dog['name']

이는 유효한 식별자인지 여부에 관계없이 모든 속성 이름에 적용됩니다.

문자열이나 기호를 사용하여 속성 이름을 동적으로 전달하여 속성에 액세스하는 데 사용할 수도 있습니다.

점 표기법은 다음과 같이 작성할 수 있습니다.

dog.name

이것은 더 짧지만 유효한 식별자에서만 작동합니다.

개체는 다른 개체를 포함할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

const book = {
  name: 'javascript basics',
  published: 2020,
  author: {
    firstName: 'jane',
    lastName: 'smith'
  }
};

author 속성에는 firstName 및 lastName 속성이 있습니다.

다음을 작성하여 중첩 속성을 얻을 수 있습니다.

book['author']['firstName']

또는

book.author.firstName

대괄호와 점 표기법을 혼합할 수 있습니다.

따라서 다음과 같이 작성할 수 있습니다.

book['author'].firstName

객체의 메소드 호출

다른 함수를 호출하는 것과 같은 방식으로 메서드를 호출할 수 있습니다.

예를 들어 다음 객체가 있는 경우:

const dog = {
  name: 'james',
  gender: 'male',
  speak() {
    console.log('woof');
  }
};

그런 다음 다음과 같이 작성하여 speak 메서드를 호출할 수 있습니다.

dog.speak()

속성/메소드 변경

값을 할당하여 속성을 변경할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

dog.name = 'jane';
dog.gender = 'female';
dog.speak = function() {
  console.log('she barked');
}

delete 연산자를 사용하여 객체에서 속성을 삭제할 수 있습니다.

delete dog.name

그런 다음 dog.name 를 얻으려고 하면 undefined 를 얻습니다.

이 값 사용

개체에는 자체this 값이 있습니다.

객체의 메서드에서 사용할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

const dog = {
  name: 'james',
  sayName() {
    return this.name;
  }
};

this.name 를 반환합니다. 이는 'james' 이어야 합니다.
this는 dog 메서드 내의 sayName 개체이기 때문입니다.

생성자 함수

고정 구조를 가진 객체를 생성할 수 있도록 생성자 함수를 생성할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

function Person(name, occupation) {
  this.name = name;
  this.occupation = occupation;
  this.whoAreYou = function() {
    return `${this.name} ${this.occupation}`
  };
}

인스턴스 속성name  , occupation 및 this.whoAreYou 인스턴스 메서드가 있습니다.

생성자로 새 객체를 만들 때 모두 반환됩니다.

그런 다음 new 연산자를 사용하여 새 Person 인스턴스를 만들 수 있습니다.

const jane = new Person('jane', 'writer');

this os의 값은 반환된 Person 인스턴스로 설정됩니다.

다른 함수와 구분할 수 있도록 생성자의 첫 글자를 대문자로 사용해야 합니다.
new 연산자 없이 생성자 함수를 호출하면 안 됩니다.

그래서 우리는 쓰지 않습니다:

const jane = Person('jane', 'writer');

this 값은 이런 식으로 반환된 Person 인스턴스로 설정되지 않습니다.

전역 개체

브라우저의 전역 개체는 window 개체입니다.

최상위 수준에서 var를 사용하여 속성을 추가할 수 있습니다.

var a = 1;

그러면 window.a는 1이 됩니다.
new 없이 생성자를 호출하면 undefined 가 반환됩니다.

따라서 다음이 있는 경우:

const jane = Person('jane', 'writer');

그러면 jane는 undefined  입니다.

내장 전역 함수는 전역 개체의 속성입니다.

따라서 parseInt는 window.parseInt와 같습니다.

결론

두 가지 방법으로 개체 속성에 액세스할 수 있습니다.

또한, 우리는 집합 구조로 객체를 생성하는 생성자 함수를 생성할 수 있습니다.