> 웹 프론트엔드 > JS 튜토리얼 > 객체지향 자바스크립트란 무엇인가요? js의 객체 이해

객체지향 자바스크립트란 무엇인가요? js의 객체 이해

不言
풀어 주다: 2020-09-04 15:01:41
원래의
18437명이 탐색했습니다.

이 글의 내용은 자바스크립트 객체지향이란 무엇일까요? js의 객체에 대한 이해는 일정한 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

객체지향 자바스크립트란 무엇인가요? js의 객체 이해

1. 객체 지향

객체 지향 언어의 가장 기본적인 기호는 Class#🎜입니다. 🎜# 컨셉. 수업이란 무엇입니까? 클래스는 여러 속성과 메서드를 포함하는 컬렉션입니다. 클래스의 인스턴스는 객체 입니다. 역사적인 이유로 ECMAScript(이하 JS)의 객체 개념은 클래스 기반 언어의 객체 개념과 다릅니다. ECMA-262는 객체를 "속성이 기본 값, 객체 또는 기능을 포함할 수 있는 정렬되지 않은 속성 모음"으로 정의합니다.
각 객체는 참조 유형을 기반으로 생성됩니다.

2. 객체 이해

2.1 JS에서 객체를 생성하는 방법에는 두 가지가 있습니다.

// 第一种:创建Object实例
var person = new Object();
person.name = 'tom';
person.age = 20;
person.sayIt = function(){console.log(this.name, this.age)}

// 第二种:对象字面量值
var person = {
   name: 'tom',
   age: 20,
   sayIt: function(){console.log(this.name, this.age)}
}
로그인 후 복사

위의 두 가지 예에서 생성된 객체는 다음과 같습니다. 동일하며 모두 동일한 속성과 메서드를 갖습니다.

2.2. 데이터 속성과 접근자 속성

JS 객체의

키(예: name, sayIt 등의 속성 및 메서드)는 다음과 같이 나뉩니다. 두 가지 유형의 속성: 데이터 속성과 접근자 속성. 2.2.1. 데이터 속성

데이터 속성에는 값을 읽고 쓸 수 있는 데이터 값의 위치가 포함됩니다. 다음 4가지 특성을 포함합니다.

Configurable

: 삭제가 속성을 삭제할 수 있는지 여부와 속성 설명자의 유형을 변경할 수 있는지 여부를 나타냅니다. 기본값은 false입니다. 이 값을 지정하지 않고 인스턴스를 생성하면 기본값은 true입니다. Enumerable
: 속성이 열거 가능한지(for-in) 여부를 나타냅니다. 기본값은 false입니다. 이 값을 지정하지 않고 인스턴스를 생성하면 기본값은 true입니다. Writable
: 속성 값을 수정할 수 있는지 여부를 나타냅니다. 기본값은 false입니다. 이 값을 지정하지 않고 인스턴스를 생성하면 기본값은 true입니다. Value
: 속성의 값을 나타냅니다. 기본값은 정의되지 않습니다. 이 값을 지정하지 않고 인스턴스를 생성하면 기본값은 정의되지 않습니다. 인스턴스를 생성하는 경우:

var person = {
    name: 'tom'
}
로그인 후 복사

person 개체의 이름 속성 중 Configurable, Enumerable 및 Writable 데이터 속성이 모두 true, 즉 name 속성입니다. 값을 삭제하고, 열거하고, 다시 쓸 수 있으며, 이름 속성의 현재 값은 'tom'입니다.

속성의 데이터 속성을 수정하려면 ES5에서 제공하는

Object.defineProperty()
메서드를 사용할 수 있습니다. 이 메서드는 개체에 새 속성을 추가할 수도 있습니다. 이 메소드에는 세 가지 매개변수가 있습니다: 대상 객체, 정의하거나 수정할 속성의 이름, 정의하거나 수정해야 하는 데이터 속성 아래 개인 인스턴스의 이름 속성을 수정하세요:

var person = {
    name: 'tom'
}
Object.defineProperty(person, 'name', {
    configurable: false,
    enumerable: false,
    writable: false,
    value: 1
})
console.log(person.name); // 1,name属性的值已修改为1

delete person.name; 
console.log(person.name); // 1, name属性依然存在

for(var i in person){
    console.log(i); // undefined,name属性不可枚举
}

person.name = 2; 
console.log(person.name); // 1,name的值依然为1,不可修改
로그인 후 복사
# 🎜🎜#
참고: Object .defineProperty() 메서드는 configurable을 false로 설정한 후에는 쓰기 가능 이외의 속성을 수정할 수 없습니다.

2.2.2.접속자 속성

접속자 속성에는 데이터 값이 없으며 두 가지 기능만 있습니다:

유효한 값을 얻는 getter 함수 #🎜 🎜#setter 함수, 유효한 값 설정 ​​

접속자 속성을 사용하는 일반적인 방법은 하나의 속성 값을 설정하여 다른 속성을 변경하는 것입니다.

# 🎜🎜#
Configurable

: 삭제가 속성을 삭제할 수 있는지 여부와 속성 설명자의 유형을 변경할 수 있는지 여부를 나타냅니다. 기본값은 false입니다. 이 값을 지정하지 않고 인스턴스를 생성하면 기본값은 true입니다.

Enumerable

: 속성이 열거 가능한지(for-in) 여부를 나타냅니다. 기본값은 false입니다. 이 값을 지정하지 않고 인스턴스를 생성하면 기본값은 true입니다. Get
: 속성을 읽을 때 호출되는 함수, 기본값은 정의되지 않음입니다. Set
: 속성을 쓸 때 호출되는 함수, 기본값은 정의되지 않음입니다.

var book = {
    _year: 2004,
     edition: 1
};
Object.defineProperty(book, "year", {
     get: function(){
         return this._year;
     },
     set: function(newValue){
         if (newValue > 2004) {
             this._year = newValue;
             this.edition += newValue - 2004;
         }
     }
});
book.year = 2005;
console.log(book.edition); //2
로그인 후 복사
여기서 year는 접속자 속성이고 _year는 데이터 속성입니다.
접속자 속성 year의 구성 가능 및 열거 가능이 설정되지 않았으므로 false입니다. 즉, 접속자 속성 year

를 삭제하거나 열거할 수 없습니다.

Object.getOwnPropertyDescriptor() 메서드를 통해 속성의 특성을 읽을 수 있습니다.

var descriptor = Object.getOwnPropertyDescriptor(book, '_year'); 
console.log(descriptor.writable); // true
console.log(descriptor.configurable); // true
로그인 후 복사
Summary:

#🎜 🎜#javasc 객체는 여러 속성과 메서드 모음의 인스턴스입니다. 해당 속성은 데이터 속성과 접근자 속성의 두 가지 유형으로 구분됩니다. 객체의 속성은 Object에서 제공하는 다양한 메서드를 통해 읽고 수정할 수 있습니다.

관련 권장사항:

JavaScript_js의 객체지향 소개

# 🎜🎜#Javascript 객체 지향overloading_js 객체 지향

위 내용은 객체지향 자바스크립트란 무엇인가요? js의 객체 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿