> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 개체를 사용자 정의하는 방법

JavaScript에서 개체를 사용자 정의하는 방법

青灯夜游
풀어 주다: 2023-01-07 11:41:26
원래의
5051명이 탐색했습니다.

사용자 지정 방법: 1. "속성 이름/값" 구문을 통해 직접 생성, "var 개체 이름 = {속성 이름: 속성 값};" 2. "var 개체 이름 = 새 생성자 이름(args) 문" 사용 ; 3. "Object.create(프로토타입 개체, 설명자)" 문을 사용합니다.

JavaScript에서 개체를 사용자 정의하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

Js에서는 Array, Date, Number 등과 같은 내장 객체 외에도 개발자가 Js 코드를 통해 자신만의 객체를 만들 수 있습니다.

객체 특성

① 구조는 '사전'과 유사합니다. 객체의 속성은 키/값 쌍과 유사합니다. 속성의 이름은 문자열이고 속성의 값은 다음과 같습니다. 모든 유형.

② 프로토타입 상속: Js 객체는 프로토타입의 속성을 상속받을 수 있습니다.

3 동적 구조: 개체의 속성을 동적으로 추가하고 삭제할 수 있습니다.

4 참조 유형: js의 개체는 참조 유형입니다. a는 객체이고 b=a이며 b를 수정하면 a도 수정됩니다.

객체 생성 방법

Js에서 사용자 정의 객체를 생성하는 세 가지 주요 방법은 객체 리터럴, 새 생성자 및 Object.create() 메서드입니다. 각 생성 방법에 따라 상속되는 프로토타입 객체가 다릅니다:

① 객체 직접 수량: 프로토타입은 Object.prototype입니다.

② 새 생성자: 프로토타입은 생성자의 프로토타입 속성입니다.

3 Object.create(): 프로토타입은 전달된 첫 번째 매개변수입니다. 첫 번째 매개변수가 null인 경우 Object.prototype이 프로토타입으로 사용됩니다.

1. 개체 직접 수량

설명: 속성 이름/값을 통해 직접 생성됩니다.

구문: ​​var o = { name:'tom', age:22 };

프로토타입: Object.prototype

적용 가능한 시나리오: 특정 범위에 적용합니다.

예:

var o = {
    name: 'tom'
}
console.log(o.constructor.prototype); // => Object() :对象直接量的原型为Object
console.log(o.constructor.prototype === Object.prototype); // true
로그인 후 복사

2.new constructor

설명: 생성자도 일종의 함수이지만 흔히 사용하는 함수를 구별하기 위해 생성자의 함수명을 씁니다. 낙타 케이스(첫 번째 대문자).

구문: ​​var o = new ClassName();

Prototype: 생성자의 Prototype 특성.

예:

// 1.创建构造函数
function People(name) {
    this.name;
}

var p = new People('Tom');
console.log(p.constructor.prototype); // => People{} :原型为构造函数的prototype
console.log(p.constructor.prototype === People.prototype); // => true

// 2.自定义对象的多层继承 :constructor返回最先调用的构造函数 
function Student(age) {
    this.age = age;
}
Student.prototype = new People(); // 设置Student的原型为People对象

var s = new Student(22); // 对象初始化时,先调用People(),再调用Student()
console.log(s.constructor); // => function People :对象s返回的构造函数为People
console.log(s.constructor.prototype); // => People{} :原型对象为People
console.log(s.constructor.prototype === People.prototype); // => true
로그인 후 복사

3, Object.create(prototype, propertyDescriptor): ECMAScript 5 사양

설명: 지정된 프로토타입과 지정된 속성을 사용하여 객체를 생성하고 반환합니다.

구문: ​​Object.create(prototype, propertyDescriptor)

매개변수:

①prototype {prototype}: null일 수 있는 개체의 프로토타입을 만듭니다. null인 경우 객체의 프로토타입이 정의되지 않습니다.

②propertyDescriptor {propertyDescriptor} 선택 사항: 속성 설명자.

프로토타입: 자동 프로토타입은 매개변수 ①입니다. 매개변수 ①이 null이면 개체의 프로토타입이 정의되지 않습니다.

예:

// 1.建立一个原型为null的对象
var o = Object.create(null, {
    name: {
        value: 'tom'
    }
});
console.log(o.constructor); // => undefined 

// 2.创建一个原型为Array的对象
var array = Object.create(Array.prototype, {});
console.log(array.constructor); // => function Array 构造函数 
console.log(array.constructor.prototype); // => [] :原型对象为数组

// 3.创建一个原型为自定义类的对象
function People() { }
var p = Object.create(People.prototype, {});
console.log(p.constructor); // => function People 构造函数 
console.log(p.constructor.prototype); // => People{} :原型对象People
로그인 후 복사

[관련 권장 사항: javascript 학습 튜토리얼]

위 내용은 JavaScript에서 개체를 사용자 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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