JavaScript 객체를 이해하기 위해 객체 생성, 속성 작업 및 객체 방법에서 시작할 수 있습니다. 요약하면 다음 모듈이 포함됩니다.
1. 객체를 만듭니다
1.1 직접 객체 측정
객체의 직접 수량은 객체를 만드는 가장 쉬운 방법이며 여러 이름/값 쌍으로 구성됩니다.
var point = {x : 0, y : 0};속성 이름에는 제한이 없습니다. JS 키워드 또는 문자열 일 수 있습니다. 이 두 상황이라면 속성은 이중 인용문으로 둘러싸여 있어야합니다.
val empty = {}; va point = {x : 0, y : 0}; var book = { "메인 제목": "JavaScript", "Subtitle": "The Definitive Guide", "for": "All Audient", 저자 : {FirstName : "Davide", LastName : "Flanagan"}};객체를 직접 만드는 것은 매우 간단하지만 일반적으로 이러한 방식으로 사용되지 않습니다. 코드는 재사용 가능합니다. 다른 곳에서 객체를 사용하고 속성 값이 다르 든 이렇게하면 이렇게 하시겠습니까? 다른 코드를 재현해야합니까?
1.2 새로운 것을 통해 객체를 만듭니다
새로운 것을 통해 객체를 만들기 전에 먼저 함수를 생성해야하며 새로운 기능을 생성자로 취급해야합니다. 예를 들어, 새로운 객체를 작성하십시오.
기능인 () {// 생성자} var person = new Person ();JavaScript 언어의 핵심의 원시 유형은 모두 내장 생성자를 포함합니다.
var a = new array (); var d = new date (); var r = new regexp ( "js");
1.3 Object.create ()
우리는 객체의 생성 방법을 이해하기 전에 프로토 타입이 무엇인지 알고 싶습니다. 각 JavaScript 객체 (NULL 제외)는 다른 객체와 관련이 있습니다. "또 다른"객체는 우리가 프로토 타입이라고 부르는 것입니다. 각 객체는 프로토 타입에서 속성을 상속합니다.
객체 직접 수량을 통해 생성 된 모든 객체는 동일한 프로토 타입 객체 객체를 가지고 있습니다. 키워드 신규 및 생성자에 의해 생성 된 객체 프로토 타입은 생성자의 프로토 타입 속성의 값입니다. new array ()를 통해 생성 된 객체의 프로토 타입은 array.prototype이며 새 날짜 ()를 통해 생성 된 객체의 프로토 타입은 date.prototype입니다. 프로토 타입이 여기에 소개되었습니다.
객체. 만족 메소드에는 두 개의 매개 변수가 포함되어 있습니다. 첫 번째 매개 변수는 객체의 프로토 타입이고 두 번째 매개 변수는 객체 속성을 설명하는 선택 사항입니다. 사용하기 쉽습니다. 필요한 프로토 타입 객체를 전달하기 만하면됩니다.
var o1 = object.create ({x : 1, y : 2}); // 프로토 타입은 Object.Prototype입니다프로토 타입없이 객체를 만들려면 NULL을 매개 변수로 전달할 수 있습니다. 이러한 방식으로 생성 된 개체는 속성을 상속하지 않으며 Tostring과 같은 방법이 없습니다.
var o2 = object.create (null); // 프로토 타입 없음
일반적인 빈 객체를 만들려면 직접 객체로 전달하십시오. 프로로 타입 :
var o3 = object.create (Object.Prototype);
사용자 정의 객체 인 경우 빈 객체를 만드는 것과 동일합니다. 객체 이름을 직접 전달합니다. 프로로 타입 :
함수 person () {} var o4 = object.create (person.prototype);2. 속성 관리
2.1 속성 쿼리 및 설정
객체의 특성은 점 (.) 또는 사각형 브래킷 ([]) 연산자를 통해 얻을 수 있습니다. 속성을 얻기 위해 도트를 사용하는 경우 속성 이름은 간단한 표시기 여야합니다. O.For 또는 O.Class와 같은 예약 된 단어 일 수는 없습니다.
AR 저자 = BOOK.AUTHOR; // 올바른 var name = author.surname; // var 제목을 올바른 바르기 = 책 [ "메인 제목"]; // 올바른 var className = book.class; //오류
객체 [ "속성"]의 구문은이 배열의 요소가 숫자가 아닌 문자열로 인덱싱된다는 점을 제외하고 배열처럼 보입니다. 이런 종류의 배열은 해시,지도 또는 사전으로도 알려진 연관 배열이라고 부릅니다. JavaScript 객체는 연관 배열입니다.
객체는 연관 배열이므로 JavaScript는 또한/in to traverse 속성을 제공합니다. 다음 예제는 포트폴리오의 총 값을 계산하기 위해/in을 사용합니다.
함수 getValue (포트폴리오) {var total = 0.0; for (portolio의 주식) {var shares = portolio [Stock]; var price = getquote (주식); 총 += 주식 * 가격; } return total;}상속 : JavaScript 객체에는 고유 한 속성이 있으며 일부 속성은 프로토 타입 객체에서 상속됩니다. 상속을 구현하는 기능을 먼저 살펴 보겠습니다.
함수 상속 (p) {if (p == null) Throw TypeError (); // p는 객체이며 (object.create) {return object.create (p); // 개체를 사용합니다. if (t! == "Object"&& t! == "function") Throw TypeError (); 함수 f () {}; f. prototype = p; // 프로토 타입 속성을 P로 설정하여 새 f ();}Object O의 속성 x를 쿼리하려고한다고 가정하십시오. x가 O에 존재하지 않으면 O의 프로토 타입 객체에서 속성 x를 계속 쿼리하게됩니다. 프로토 타입 객체에 x가 없지만 프로토 타입 객체에 프로토 타입이있는 경우 x가 발견되거나 널 객체가 발견 될 때까지 프로토 타입 객체의 프로토 타입에서 쿼리를 계속 실행하십시오.
var o = {}; // Object.Prototype에서 Object Attribute Ox = 1을 Oinherit; // o var p = inherit (o)에 대한 x 속성을 정의합니다. // pinherit o 및 object.protoTypep.y = 2; // pdefine 속성 yvar q = 상속 (p); // qinherit p, o 및 object.prototypeq.z = 3; // 속성 정의 zvar s = q.toString (); // TOSTRING은 Object.PrototypeQ.X + QY // => 3 : X 및 Y 각각 O 및 P에서 상속합니다.2.2 속성 삭제
삭제 연산자는 객체의 속성을 삭제할 수 있습니다.
book.author; 삭제 책 [ "메인 제목"];
삭제는 자체 속성 만 삭제할 수 있으며 상속 된 속성을 삭제할 수 없습니다. 상속 된 속성을 삭제하려면 속성을 정의하는 프로토 타입 객체에서 삭제해야하며 이는 프로토 타입에서 상속 된 모든 객체에 영향을 미칩니다. 삭제는 True를 반환합니다.
ar o = {x : 1}; ox 삭제; // X를 삭제하고 TruedElete Ox를 반환합니다. // X는 더 이상 존재하지 않으며 아무것도 수행되지 않으며 True를 반환합니다. O.TOSTRING 삭제; // 아무것도하지 말고, 사실을 반환하십시오. 삭제는 구성 가능한 유형 false로 속성을 삭제할 수 없습니다. 변수 선언 및 함수 선언을 통해 생성 된 글로벌 객체의 속성과 같이 일부 내장 객체의 속성은 구성 할 수 없습니다. 객체 삭제 // 삭제할 수 없습니다. 속성은 구성 가능한 var x = 1; this.x를 삭제합니다. //이 속성은 함수를 삭제할 수 없습니다. f () {} this.f; // 글로벌 함수를 삭제할 수 없습니다2.3 속성 감지
객체에 속성이 존재하는지 여부를 결정하기 위해 IN 연산자, HasownProperty () 및 PropertyInumerable () 메소드가 감지 할 수 있습니다.
연산자 : 연산자는 왼쪽의 속성 이름이고 오른쪽의 객체입니다. 객체의 자체 속성 또는 상속 속성에 속성이 포함 된 경우 true를 반환합니다.
var o = {x : 1}; "x"o in o; // true : x는 o의 "y"속성입니다. // false : y는 o의 "Tostring"속성이 아닙니다. // true : o Tostring 속성을 상속합니다hasownProperty () 메소드 : 주어진 이름이 개체 자체의 속성인지 여부를 감지합니다. 상속 된 속성의 경우 false를 반환합니다.
var o = {x : 1}; O. HasownProperty ( "x"); // true : o 무료 속성이 있습니다 xo.hasownproperty ( "y"); // false : 속성 없음 yo.hasoenproperty ( "Tostring"); // false : Tostring은 상속 속성입니다PropertyIsEnumerable () 메소드 : HasownProperty의 향상된 버전입니다. 자체 재산이 감지 되고이 속성이 참으로 유지되는 경우에만 참으로 반환됩니다.
var o = 상속 ({y : 2}); ox = 1; o.propertyiseNumerable ( "x"); // true : o 열거 가능한 속성 xo.propertyiseNumerable ( "y")이 있습니다. // false : y는 상속 된 object.prototype.propertyisEnumerable ( "tostring")입니다. // false : 열거 할 수 없습니다2.4 열거 속성
일반적으로/in/in은 객체 속성을 통해 루프에 사용되며, 트래버스 특성에는 자체 특성 및 상속 된 특성이 포함됩니다. 내장 된 객체 상속 방법을 열거 할 수는 없지만 코드의 객체에 추가 된 속성을 열거 할 수 있습니다. 예를 들어:
var o = {x : 1, y : 2, z : 3}; // 3 개의 열거 가능한 속성 O.propertyisEnumable ( "Tostring"); // false, (p in o)에 열거 할 수 없습니다. // 속성 console.log (p); // 출력 x, y 및 z, toString 출력이 없습니다때때로 우리는 단지 우리 자신의 속성을 반복하기를 원하며 속성은 기능이 아닙니다.
for (p in o) {if (! o.hasownproperty (p)) 계속; if (typeof o [p] === "function") 계속;}열거적 트래버스 함수를 통해 열거 가능한 속성을 복사 할 수 있습니다.
/** 열거 가능한 속성을 p로 복사하고 o* O와 P가 같은 이름의 속성을 포함하는 경우 O*의 속성을 포함하면 O*의 속성을 덮어 쓰지 않습니다. // o}에 속성 추가} return o;}
ES5는 속성 이름을 열거하는 두 가지 함수를 정의합니다. 첫 번째는 Object.keys ()이며 객체의 열거 가능한 속성 이름으로 구성된 배열을 반환합니다. 두 번째 열거 함수는 Object.getOrpropertyNames ()이며 Object.keys ()와 유사하며 열거 가능한 속성이 아니라 모든 객체 자신의 속성을 반환합니다.
3. 속성 캡슐화
3.1 속성 Getter 및 Setter
객체 속성은 이름, 값 및 일련의 속성으로 구성됩니다. ES5에서 속성 값은 getters and setters 인 하나 또는 두 개의 메소드로 대체 될 수 있습니다. getters and setters로 정의 된 속성을 "액세서 속성"이라고합니다. "데이터 속성"과 달리 데이터 속성에는 단순한 값이 하나뿐입니다.
데이터 속성과 달리 액세서 속성은 쓰여질 수 없습니다. 속성에 Getter와 Setter 방법이 모두 있으면 읽기/쓰기 속성입니다. Getter 메소드 만있는 경우 읽기 전용 속성이며 세터 메소드 만있는 경우 쓰기 전용 속성입니다. 쓰기 전용 속성을 읽는 것은 항상 정의되지 않은 반환됩니다.
액세서 속성 정의 구문도 비교적 간단합니다. 함수 정의는 기능 키워드를 사용하지 않지만 get 또는 set을 사용합니다.
var O = {// 일반 데이터 속성 Data_Prop : 1, // Accessor 속성은 모두 쌍 정의 된 함수 get accessor_prop () {/* 다음은 기능 본체*/}, set accessor_prop (value) {}};2D 데카르트 포인트의 좌표를 나타내는 다음 객체에 대해 생각해보십시오. 두 개의 일반 특성 x와 y는 각각 x 좌표와 y 좌표를 나타냅니다. 또한 포인트의 극성 좌표를 나타내는 두 가지 동등한 액세서 특성이 있습니다.
var p = {// x와 y는 일반적인 읽기 쓰기 데이터 속성 x : 1.0, y : 1.0, // r은 getter and setter get r (return math.sqrt (this.x * this.x this.y * this.y); }, r (newValue) {var OldValue = math.sqrt (this.x * this.x + this.y * this); var 비율 = NewValue / OldValue; this.x *= 비율; this.y *= 비율; }, // theta는 읽기 전용 액세서 속성이며 getter 메소드 만 get theta () {return math.atan2 (this.y, this.x); }};데이터 속성과 마찬가지로 액세서 속성은 상속 가능하므로 위 코드의 P 객체는 다른 "포인트"의 프로토 타입으로 간주 될 수 있습니다. 성적인 대상에 대한 x 및 y 속성을 정의 할 수 있지만 R 및 Theta 속성은 다음에서 상속됩니다.
var q = 상속 (p); qx = 1, qy = 1; console.log (qr); cosole.log (q.theta);
3.2 속성 기능
액세서 속성의 getter 및 setter 메소드를 속성 특성으로 간주 할 수 있습니다. 이 논리에 따르면, 우리는 속성의 특성의 특성도 볼 수 있습니다. 따라서 속성에는 이름과 4 개의 속성이 포함되어 있다고 생각할 수 있습니다.
숫자 속성의 네 가지 특성은 값, 쓰기 가능, 열거 가능 및 구성 가능입니다.
액세서 속성에는 값 특성과 쓰기 성이 없으므로 읽기 (get), 쓰기 (세트), 열거 및 구성 가능성이 포함됩니다.
ES5는 "속성 디스크립터"라는 객체를 정의하며, 이는 4 가지 속성을 나타냅니다. 데이터 속성의 디스크립터 개체의 속성에는 값, 쓰기 가능, 열거 가능 및 구성 가능이 포함됩니다. 액세서 속성의 설명자 객체는 get 속성 및 세트 속성으로 대체됩니다. 그중에서도 쓰기 가능, 열거 가능 및 구성 가능성은 부울 값이며 Get 속성 및 세트 속성은 함수 값입니다.
Object.getOnPropertyDescriptor ()를 호출하여 객체의 특정 속성에 대한 속성 디스크립터를 얻을 수 있습니다.
// return {value : 1, writable : true, enumerable : true, configurable : true} object.getownproeprtydescriptor ({x : 1}, "x"); // 위에 정의 된 임의의 객체의 옥트 속성을 쿼리하십시오 {get :/ *func */, set : set : sefulable : true, configurable : return {get :/ *func */, set. true} object.getOrpropertyDesciptor (random, "octet"); // 상속 된 속성 및 존재하지 않는 속성의 경우 undefinedObject.getOwnPropertyDesciptor ({}, "x"); object.getownPropertyDesciptor ({}, "toString");함수 이름에서 볼 수 있듯이 Object.GetOwpropertyDesciptor ()는 자체 속성의 설명 자만 얻을 수 있습니다. 상속 된 속성의 특성을 얻으려면 프로토 타입 체인 (Object.getPrototypof ())를 가로 지르야합니다.
속성의 속성을 설정하거나 새로 생성 된 속성에 특정 속성이있는 경우 객체, 속성 이름 및 속성 설명 객체의 세 가지 매개 변수를 포함하는 Object.DefineProperty ()를 호출해야합니다.
// 속성이 존재하지만 황소를 열거 할 수는 없습니다. // => 1object.keys (o) // => [] // 이제 속성 x를 읽으려면 X를 읽습니다. DefineProperty (o, "x", {writable : true}); // view의 값을 변경하십시오. ox = 2; // 작업이 실패하지만 오류는보고되지 않으며 유형 오류 예외는 엄격한 모드로 던져집니다. // 속성은 여전히 구성 가능하므로 다음과 같은 방식으로 수정할 수 있습니다. 객체 .defineProperty (o, "x", {value : 2}); ox // => 2 // 이제 데이터 속성에서 X를 수정합니다. 반환 0;}}); ox // => 0동시에 여러 속성을 수정하거나 생성하려면 Object.DefineProperties ()를 사용해야합니다. 첫 번째 매개 변수는 수정할 객체이고 두 번째 매개 변수는 매핑 테이블입니다. 예를 들어:
var p = object.defineProperties ({}, {x : {value : 1, writable : true, enumerable : true, configable : true}, y : {value : 2, writable : true, enumerable : true}, r : get : get : return matht (this.x this.x this.x this., 열거 가능 : true, configurable : true}});구식 API를위한 구식 API : ES5 이전에 대부분의 JavaScript 구현은 이미 객체 직접 수량 구문에서 Get and Set Writing을 지원할 수 있습니다. 이러한 구현은 쿼리 및 설정 게터 및 세터를 설정하기위한 비표준 구식 API를 제공합니다. 이 API는 4 가지 방법으로 구성되며 모든 객체에는 이러한 방법이 있습니다.
__lookupgetter __ () 및 __lookupsetter __ ()는 이름이 지정된 속성 getter 및 setter 메소드를 반환하는 데 사용됩니다.
__defineGetter __ () 및 __defineStter __ ()는 getters and setter를 정의하는 데 사용됩니다. 첫 번째 매개 변수는 속성 이름이고 두 번째 매개 변수는 getter 및 setter 메소드입니다.
var o = {}; o.4. 객체의 세 가지 속성
각 객체에는 프로토 타입, 클래스 및 확장 가능한 속성이 있습니다. 다음으로 이러한 속성이 무엇을하는지 이야기 해 봅시다.
4.1 프로토 타입 특성
객체의 프로토 타입 속성은 속성을 상속하는 데 사용됩니다. 우리는 종종 "O의 프로토 타입 속성을"직접 "O의 프로토 타입"이라고 부릅니다. 이전에는 "개체 만들기"는 객체를 만드는 세 가지 방법을 도입했습니다. 객체가 생성 한 객체는 Object.Prototype을 사용하여 프로토 타입으로 사용됩니다. 새로 생성 된 개체는 생성자의 프로토 타입 속성을 프로토 타입으로 사용합니다. Object.Create ()로 생성 된 개체는 첫 번째 매개 변수를 프로토 타입으로 사용합니다.
ES5에서 객체 프로토 타입은 Object.getPrototypof ()를 통해 쿼리 될 수 있습니다. ES3에서는 동등한 기능이 없지만 대신 O.constructor.prototype 표현은 물체의 프로토 타입을 확인하는 데 사용됩니다.
객체가 다른 객체의 프로토 타입인지 (또는 프로토 타입 체인에 있는지)를 감지하려면 isprototype () 메소드를 사용하십시오. 예를 들어, p가 p.isprototype (o)에 의한 O의 프로토 타입인지 여부를 감지 할 수 있습니다.
var p = {x : 1}; // 프로토 타입 객체 정의 var o = object.create (p); //이 프로토 타입을 사용하여 객체 P.Isprototype (o)을 만듭니다. // => true, o pobject.prototype.isprototype (o) // => true, p 객체에서 상속 된 pobject.prototype.isprototype.Mozilla가 구현 한 JavaScript는 객체 프로토 타입을 직접 쿼리/설정하기 위해 특별히 __proto__라는 속성을 노출시킵니다. 그러나 IE와 Opera는 __proto__ 속성을 지원하지 않으므로 __proto__ 속성을 직접 사용하는 것이 좋습니다.
4.2 클래스 속성
객체의 클래스 속성은 객체의 유형 정보를 나타내는 문자열입니다. ES3 및 ES5는이 속성을 설정하는 방법을 제공하며이를 쿼리하는 간접적 인 방법은 하나뿐입니다. Default ToString () 메소드는이 형식으로 문자열을 반환합니다 : [Object Class].
ToString () 메소드를 호출 한 다음 반환 된 문자열의 8 번째와 두 번째 위치 사이의 문자를 추출 할 수 있습니다. 그러나 많은 객체가 ToString () 메소드를 다시 작성했다는 문제가 있습니다. 올바른 tostring () 버전을 호출하려면 function.call () 메소드를 간접적으로 호출해야합니다. 다음 예제의 함수 클래스는 모든 객체의 클래스를 반환 할 수 있습니다.
함수 클래스 (o) {if (o === null) "null"리턴; if (o === 정의되지 않은) "정의되지 않은"리턴; return object.prototype.tostring.call (o) .Slice (8, -1);}4.3 확장 성
물체의 확장 성은 새로운 특성을 객체에 추가 할 수 있는지 여부를 나타내는 데 사용됩니다. 모든 내장 및 사용자 정의 객체는 명시 적으로 확장 가능합니다. ES5에서는 객체를 비 규모로 변환 할 수 있습니다.
객체를 확장 불가능하도록 설정하는 것 외에도 Object.Seal 메소드는 모든 객체의 자체 속성을 구성 불가능하게 설정할 수 있습니다. 즉, 새로운 속성을 객체에 추가 할 수 없으며 기존 속성을 삭제하고 구성 할 수 없습니다.
Object.issealed () 메소드는 객체가 동봉되었는지 여부를 감지하는 데 사용됩니다.
object.freeze () 메소드는 객체를보다 엄격하게 잠그게합니다. Object.Seal () 메소드의 기능을 갖는 것 외에도 모든 자체 데이터 속성을 읽기 전용으로 설정할 수도 있습니다 (객체 액세서 속성에 Setter 메소드가있는 경우 액세서 속성에 영향을 미치지 않으며 속성에 값을 할당하여 여전히 호출 할 수 있습니다).
Object.isfrozen ()은 물체가 동결되었는지 여부를 감지하는 데 사용됩니다.
5. 객체 직렬화
객체 직렬화는 객체의 상태를 문자열로 변환하거나 문자열을 객체로 복원 할 수 있습니다. ES5는 내장 함수 json.stringify () 및 json.parse ()를 제공하여 JavaScript 객체를 직렬화하고 복원합니다. 이 방법은 모두 JSON을 데이터 교환 형식으로 사용합니다. 예를 들어:
o = {x : 1, y : {z : [false, null, ""}}; // 테스트 객체 정의 s = json.stringify (o); // { "x": 1, "y": { "z": [false, null, ""]} p = json.parse (s); // p는 o의 딥 카피입니다JSON의 구문은 JavaScript 구문의 하위 집합이며 JavaScript의 모든 값을 나타낼 수는 없습니다. 객체, 어레이, 문자열, 무한 번호, True, False 및 Null이 지원되며 직렬화되어 복원 될 수 있습니다. NAN, Infinity 및 -infinity 직렬화 결과는 모두 무효입니다. 함수, regexp, 오류 객체 및 정의되지 않은 값은 직렬화 및 복원 할 수 없습니다.
여기에 객체의 메소드를 추가하겠습니다.
toString () 메소드 : 이 메소드를 호출하는 객체의 값을 나타내는 문자열을 반환합니다. 많은 객체에서 array.tostring (), date.toString () 및 function.toString ()과 같은 TOSTRING () 메소드를 다시 작성했습니다.
tojson () 메소드 : Object.Prototype는 실제로 Tojson () 메소드를 정의하지 않지만 직렬화를 수행 할 필요가 있으므로 json.stringify () 메소드는 tojson () 메소드를 호출합니다. 이 메소드가 직렬화 된 객체에 존재하면 호출됩니다.
valuef () 메소드 : valueof () 메소드는 toString () 메소드와 매우 유사하지만 javaScript는 종종 문자열이 아닌 특정 원래 값으로 변환 할 때, 특히 숫자로 변환 될 때 종종 호출합니다. 일부 내장 클래스는 date.valueof ()와 같은 valueof () 메소드를 사용자 정의합니다.
위의 기사는 JavaScript 객체의 발전이 내가 공유하는 모든 내용입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.