JavaScript_기본 지식을 시작하기 위한 객체 및 JSON에 대한 자세한 설명-JS 튜토리얼-php.cn

JavaScript 객체는 전통적인 객체 지향 언어의 객체와 거의 유사하지 않습니다. 전통적인 객체 지향 언어에서 객체를 생성하려면 먼저 객체에 대한 템플릿, 즉 객체의 속성과 메소드를 정의하는 클래스가 있어야 합니다. 이러한 속성을 운영합니다. 인스턴스화를 통해 객체를 구성한 후 객체 간의 협업을 통해 기능을 완성하고, 기능 모음을 통해 전체 프로젝트를 완성합니다. JavaScript에는 클래스 개념이 없습니다. JavaScript의 동적 특성으로 인해 클래스 대신 빈 개체를 만들고 개체에 속성을 동적으로 추가하여 개체의 기능을 향상시킬 수 있습니다.

JSON은 JavaScript에서 객체의 리터럴 값이자 객체의 표현 방법입니다. JSON을 사용하면 중간 변수를 줄이고 코드 구조를 더 명확하고 직관적으로 만들 수 있습니다. JSON을 사용하면 클래스를 통해 인스턴스화할 필요 없이 객체를 동적으로 생성할 수 있으므로 코딩 효율성이 크게 향상됩니다.
일반적으로 객체를 선언하면 객체는 빈 컬렉션일 뿐이고 속성이 포함되지 않는 경우가 많습니다. 속성을 계속 추가하면 객체는 A 클래스를 만들지 않고도 완전한 기능을 갖춘 객체가 됩니다. 그런 다음 이 모드에서 클래스를 인스턴스화하여 코드의 유연성을 높이고 객체의 속성을 임의로 추가하거나 삭제할 수 있습니다.
독자가 Python 또는 기타 유사한 동적 언어에 대한 경험이 있다면 JavaScript 객체 자체가 사전이거나 Java 언어의 Map이거나 연관 배열이 객체를 연결하는 것처럼 더 잘 이해할 수 있습니다. 키이며 객체 자체가 객체가 될 수 있습니다. 이 정의에 따르면 JavaScript 객체는 복잡한 데이터 구조를 나타낼 수 있음을 알 수 있습니다.

객체 속성

속성은 키-값 쌍, 즉 속성 이름과 속성 값으로 구성됩니다. 속성의 이름은 문자열이고 값은 JavaScript 개체일 수 있습니다(JavaScript의 모든 것은 함수를 포함한 개체입니다). 예를 들어, 객체를 선언합니다.

코드 복사

코드는 다음과 같습니다. // 객체 선언var jack = new Object(); jack.name = "jack"; jack.age = 26>jack.birthday = new Date(1984, 4, 5) ;

//다른 객체 선언 
var address = new Object(); 
address.street = "Huang Quan Road"; 
address.xno = "135"; 
 //객체 주소에 addr 속성을 할당합니다. 
jack.addr = address; 

이러한 객체 선언 방식은 기존 OO 언어와 완전히 다릅니다. 개체의 동작을 사용자 정의할 수 있는 유연성. 

객체 속성은 도트 연산자(.)를 통해 읽어옵니다. 예를 들어 위 예제에서 jack 객체의 addr 속성은 다음과 같은 방법으로 얻을 수 있습니다.

코드 복사

코드는 다음과 같습니다.

var ja = jack.addr; ja = jack[addr]; 나중에 이런 상황을 피하기 위해 객체 자체에 점(.)이 포함된 속성이 있다고 가정해 보세요. 예를 들어 jack.foo.bar를 사용하는 경우 이름은 다음과 같습니다. 인터프리터가 실수로 foo 속성 아래에 bar 필드가 있어서 jack[foo.bar]를 사용하여 접근할 수 있다고 생각합니다. 일반적으로 일반 툴킷을 개발할 때 가능한 사용자 입력에 대해 어떠한 가정도 해서는 안 됩니다. [속성 이름] 형식을 통해 정확성이 항상 보장될 수 있습니다. 속성과 변수

2장에서 변수의 개념을 설명했습니다. 이 장에서 독자들은 둘의 동작이 매우 유사하다는 것을 알아차렸을 것입니다. , 사실 앞서 언급한 객체의 속성과 변수는 실제로 동일한 것입니다. 

JavaScript 엔진이 초기화되면 전역 객체가 생성됩니다. 클라이언트 환경에서는 이 전역 객체가 window입니다. 다른 JavaScript 환경에서 이 전역 개체를 참조해야 하는 경우 최상위 범위(즉, 모든 함수 선언 외부의 범위)에서만 선언하면 됩니다.

코드 복사

코드는 다음과 같습니다.

var global = this;
최상위 범위에서 선언한 변수는 전역 개체의 속성으로 저장됩니다. 이러한 관점에서 보면 변수는 실제로 속성입니다. 예를 들어 클라이언트 측에서는 다음과 같은 코드가 자주 등장합니다.

코드 복사 코드는 다음과 같습니다. 🎜>

var v = "global";

var array = ["hello", "world"] 
function func(id){ 
var element = document.getElementById(id); 
/ /요소에 대해 일부 작업 수행
}
 

은 실제로

코드 복사 코드는 다음과 같습니다.

window.v = "global";

window.array = ["hello", "world"] 
window.func = function (id){ 
var element = document.getElementById(id); 
//요소에 대해 일부 작업 수행
} 

프로토타입 객체
Prototype(프로토타입), 즉 JavaScript 독특한 개념으로, JavaScript는 프로토타입을 사용하여 전통적인 OO 언어에서 상속을 확립함으로써 개체의 계층적 관계를 반영할 수 있습니다. JavaScript 자체는 프로토타입을 기반으로 하며 각 객체에는 프로토타입 속성이 있습니다. 프로토타입 자체도 객체이므로 자체 프로토타입을 가질 수 있으므로 체인 구조를 형성합니다.
속성에 접근할 때 파서는 속성을 만날 때까지 체인 구조를 아래에서 위로 순회한 다음 속성에 해당하는 값을 반환하거나 null 프로토타입(JavaScript 기본 개체의 프로토타입)이 있는 개체를 만나야 합니다. 개체 속성이 null임), 이 개체에 여전히 이 속성이 없으면 정의되지 않음이 반환됩니다. 아래의 구체적인 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

//객체 베이스 선언

function Base(name){ 
this.name = name 
this; .getName = function( ){ 
return this.name; 
} 
} 
//객체 자식 선언 
function Child(id){ 
this.id = id; 
this.getId = function(){ 
return this.id; 
} 
} 
//자식의 프로토타입을 새 기본 객체로 지정
Child.prototype = new Base ("base" ); 
//하위 개체 인스턴스화
var c1 = new Child("child") 
//c1 자체에 getId 메서드가 있습니다
print(c1.getId() ); 
//c1이 프로토타입 체인에서 getName 메소드를 "상속"했으므로 
print(c1.getName()) 

 
에 액세스하여 결과를 얻을 수 있습니다. 🎜>child 

base
프로토타입 체인은 아래에서 위로 순회하므로 먼저 만난 속성 값이 먼저 반환되므로 이 메커니즘을 통해 오버로딩 메커니즘이 완성될 수 있습니다.
이 포인터
JavaScript에서 가장 혼란스러운 것은 아마도 this 포인터일 것입니다. 전통적인 OO 언어에서 이 포인터는 클래스에서 선언되고 JavaScript에서 객체 자체를 나타냅니다. 발신자. 여기에서 일반적인 예를 볼 수 있습니다.

코드 복사 코드는 다음과 같습니다. // jack이라는 이름의 사람 정의

var jack = {

name : "jack", 
age : 26 
} 
//abruzzi라는 이름의 다른 사람 정의 
 var abruzzi = { 
name : "abruzzi", 
age : 26 
} 
//전역 함수 객체 정의 
function printName(){ 
return this.name; 🎜>} 
//printName의 컨텍스트를 jack으로 설정하고, 이때는 jack 
print(printName.call(jack)) 
//printName의 컨텍스트를 abruzzi로 설정합니다. 이번에는 abruzzi 
print(printName.call(abruzzi)); 

 
 실행 결과: 
jack 
Abruzzi 

이 값에 유의해야 합니다. 함수가 어떻게 호출되는가가 아니라 선언에 따라 결정되는 것이지 함수가 어떻게 호출되는지에 따라 결정되는 것입니다. 이는 전통적인 객체지향 언어와는 완전히 다릅니다.
객체 사용
객체는 JavaScript를 사용하여 객체를 사용하여 프로그래밍 작업을 완료합니다. 이 섹션에서는 JavaScript 객체 사용 방법을 알아보기 위해 몇 가지 예를 사용합니다.
객체 선언에는 세 가지 유형이 있습니다. :
◆ 새로운 연산자 범위 Object 객체를 통해 새 객체를 생성한 다음 동적으로 속성을 추가하여 처음부터 객체를 생성합니다.
◆ 객체의 "클래스"(프로토타입)를 정의한 다음 new 연산자를 사용하여 일괄적으로 새 객체를 만듭니다.
◆ JSON을 사용합니다. 자세한 내용은 다음 섹션에서 설명합니다
이 섹션에서는 두 번째 방법을 자세히 설명합니다.

코드 복사

코드는 다음과 같습니다.

 
//"클래스" 정의, 주소 
함수 주소(street, xno){ 
this.street = street || 'Huang Quan Road' 
this.xno = xno || 135; 
this.toString = function(){ 
return "street: " this.street ", No: " this.xno; 
} 
//다른 항목 정의 "클래스", 사람 
함수 사람(이름, 나이, 주소) { 
this.name = 이름 || '알 수 없음' 
this.age = 
this.addr; || 새 주소(null, null); 
this.getName = function () {return this.name;} 
this.getAge = function(){return this.age;} 
this.getAddr = function(){return this.addr.toString();} 
} 
//new 연산자를 통해 두 객체를 생성합니다. 이 두 객체는 ​​독립적인 개체입니다. 
var jack = new Person(' jack', 26, new Address('Qing Hai Road', 123)); 
var abruzzi = new Person('abruzzi', 26) 
//결과 보기
print (jack.getName( )); 
print(jack.getAge()); 
print(abruzzi.getName()); ; 
print(abruzzi.getAddr()); 

 
실행 결과는 다음과 같습니다. 
jack 

26
street : Qing Hai Road, No : 123
abruzzi
26
street : Huang Quan Road, No : 135

JSON 및 그 사용

JSON은 JavaScript Object Notation(JavaScript Object Notation)을 나타냅니다. 표기법), 리터럴을 통해 객체를 표현하는 방법입니다. 이 방법은 단순한 것부터 복잡한 것까지 사용할 수 있습니다. 예:

코드 복사 코드는 다음과 같습니다. var obj = {

name : " abruzzi",

나이 : 26, 
생일 : new Date(1984, 4, 5), 
addr : { 
street : "Huang Quan Road", 
xno : "135" 
} 
} 

 
이 방법은 분명히 위의 예보다 훨씬 간단하며 중복되는 중간 변수가 없으며 obj와 같은 객체의 구조를 명확하게 표현합니다. 실제로 대부분의 숙련된 JavaScript 프로그래머는 JSON을 광범위하게 사용하는 jQuery, ExtJS 등과 같은 많은 JavaScript 툴킷을 포함하여 이 표현을 사용하는 것을 선호합니다. JSON은 실제로 프론트엔드와 서버사이드 사이의 데이터 교환 형식으로 사용되었습니다. 프론트엔드 프로그램은 Ajax를 통해 JSON 객체를 백엔드로 보냅니다. 서버측 개체를 처리한 후 프런트엔드에 다시 피드백합니다. 이는 동일한 데이터 형식을 사용하는 JSON 개체이므로 오류 가능성을 줄일 수 있습니다. 

게다가 JSON 형식의 데이터 자체는 재귀적이므로 어떤 복잡한 데이터 형식이라도 표현할 수 있습니다. JSON의 작성 방법은 매우 간단합니다. 즉, 키-값 쌍은 중괄호로 묶입니다. 키-값 쌍은 콜론으로 구분되며 값은 간단한 개체인 String, Boolean, Number, Null 또는 Date, Object, 기타 사용자 정의된 개체 등과 같은 복잡한 개체입니다.

JSON의 또 다른 적용 시나리오는 다음과 같습니다. 함수에 여러 반환 값이 있는 경우 기존 객체 지향 언어에서는 객체를 구성한 다음 반환해야 하지만 JavaScript는 전혀 번거로울 필요가 없습니다. . 예:

코드 복사 코드는 다음과 같습니다.함수 지점(왼쪽, top){ this.left = left;

this.top = top;

//왼쪽 및 위쪽 처리 
return {x: this.left, y:this.top}; 🎜>}
 
새로운 익명 개체를 동적으로 구성하고 반환합니다. 

코드 복사

코드는 다음과 같습니다.var pos = point(3, 4) //pos.x = 3 //pos.y = 4;

 JSON을 사용하여 객체를 반환합니다. 이 객체는 함수 객체를 포함하여 임의로 복잡한 구조가 있을 수 있습니다. 

실제 프로그래밍에서는 일반적으로 JavaScript 개체를 탐색해야 하며 개체의 내용에 대해 미리 아는 것이 없습니다. 어떻게 해야 하나요? JavaScript는 for..in 형식으로 구문 설탕을 제공합니다. 

코드 복사

코드는 다음과 같습니다. 다음과 같습니다:for(var item in json){ //item이 키입니다//json[item]이 값입니다

}

 
이 모드 예를 들어 실제 WEB 애플리케이션에서는 페이지 요소에 대해 일부 속성을 설정해야 합니다. 이러한 속성은 

과 같이 미리 알 수 없습니다.
코드 복사

코드는 다음과 같습니다.var style = { border:"1px solid #ccc", color:"blue"

};

그런 다음 DOM 요소에 이러한 속성을 동적으로 추가합니다.

코드 복사 코드는 다음과 같습니다.

for(var item in style){ 
//jQuery 선택기 사용
$("div#element").css(item, style[item]) 
}

물론 jQuery에는 이러한 작업을 수행하는 더 좋은 방법이 있습니다. 다음은 단지 예일 뿐입니다. $("div#element")에 속성을 추가하면 스타일 구조가 변경되지 않습니다. 분명한.

또한 예를 들어 일부 사용자 정의 설정을 수집해야 하는 경우 JSON 개체를 노출할 수도 있으며, 사용자는 설정해야 하는 콘텐츠로 JSON을 채운 다음 우리 프로그램이 그것을 처리할 것입니다.

코드 복사 코드는 다음과 같습니다.

기능 사용자 정의(옵션){ 
 this.settings = $.extend(기본값, 옵션) 
}