>  기사  >  웹 프론트엔드  >  JavaScript의 개체 이해 권장_javascript 기술

JavaScript의 개체 이해 권장_javascript 기술

WBOY
WBOY원래의
2016-05-16 18:12:23827검색

JavaScript에는 클래스 정의가 없으며 객체를 생성할 때 고정된 템플릿이 없습니다. 새 속성을 동적으로 생성할 때 우리가 할 수 있는 일은 이 속성에 대한 새 값을 생성하는 것뿐입니다. 예는 객체를 생성하고 x와 y라는 두 개의 속성을 추가하는 것입니다.

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

var Programmer = new Object()
Programmer .name = "Young";
Programmer.age = 25;
alert(Programmer.name " : " Programmer.age)

JavaScript 개체는 c# 또는 vb 개체의 경우 JavaScript 개체는 키/값 쌍의 컬렉션으로 볼 수 있으며 개체 속성은 object.property 이름을 사용하여 액세스됩니다. JavaScript 개체를 .NET 프레임워크의 Dictionary 클래스로 생각할 수 있으며 "[]" 연산자를 통해 개체 속성을 만들 수 있습니다.
코드 복사 코드는 다음과 같습니다.

var Programmer = new Object()
프로그래머 ["name"] = "젊은";
프로그래머["age"]= 25;
document.getElementById("message").innerHTML=Programmer["name"] " : " 프로그래머[ "age" ];
alert(Programmer.name " : " Programmer.age); 위의 예를 통해 객체에 액세스하는 두 가지 방법이 동일하다는 것을 알 수 있습니다. 속성이 생성되지 않은 경우 "정의되지 않음"이 반환됩니다.

키/값 쌍 집합의 값으로 함수를 추가하여 객체의 메서드로 구성할 수도 있습니다.
코드 복사 코드는 다음과 같습니다:

var Programmer = new Object()
Programmer["name"] = "Young"; 🎜>Programmer.age= 25 ;
Programmer.speak=function(){
alert(this.name " : " this["age"])
}
Programmer.speak() ;

위 코드에서는 "."과 "[]"를 같은 의미로 사용하여 액세스 가능한 속성과 메서드를 정의합니다. 즉, 두 메서드가 동일한 경우도 있습니다. 기존 속성에 대한 새 값을 설정하는 것은 그리 명확하지 않습니다. 아래에서는 의도를 보다 명확하게 표현하기 위해 세 번째 구문을 소개합니다.

코드 복사 코드는 다음과 같습니다.
var Programmer =
{
name: "어린",
나이: 25,
speak: function(){ Alert(this.name " : " this.age) }
}
Programmer.speak(); 위의 코드는 객체 초기화의 시작과 끝을 더 명확하게 표현합니다. 또한 이 방법을 사용하여 배타적 객체에 객체를 중첩할 수도 있습니다. var Programmer =
{
Figure : {name : "Young" , age : 25 },
회사 : {name : " Arcadia" , address : "ShenZheng"},
speak : function( ){
alert("이름:" this.Figure.name "nage:" this.Figure.age "nCompany:" this.Company.name " of

" this.Company.address);
}
};
Programmer.speak();

이 구문은 명확한 의도와 컴팩트한 코드 레이아웃으로 인해 매우 인기가 높습니다. 현재 인터넷에서 널리 사용되는 JSON(JavaScript Object Notation)을 포함한 JavaScript 프레임워크에서 JSON은 기계 구문 분석 및 생성이 쉬운 경량 데이터 교환 형식이며 구문도 매우 엄격합니다. JSON을 사용하면 JavaScript가 인터넷에서 데이터를 교환할 수 있습니다. eval을 사용하여 JSON 개체를 로컬 JavaScript 개체로 변환할 수 있습니다.

코드 복사 코드는 다음과 같습니다.
var Programmer="({이름: ' Young', age : 25})";
var p = eval(Programmer);
alert(p.name ',' p.age);

우리는 위의 토론 모든 JavaScript 객체는 사전 세트라는 것을 이해하십시오. JavaScript에는 또 다른 중요한 것이 있습니다 - 함수.
1: JavaScript에서 함수는 객체입니다. 이는 C#의 방법과 완전히 다릅니다. 아래 예를 살펴보겠습니다.

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

함수 추가(point1, point2)
{
var result = {
x : point1.x point2.x,
y : point1.y point2.y
}
결과 반환;
}
var p1 = { x: 1, y: 1 }
var p2 = { x: 2, y: 2 }; (p1, p2);
alert(p3.x "," p3.y);2: 함수를 객체의 메서드로 사용합니다. var Boy=
{
name:"Young",
Love:function(Girl){
return this.name "Fell in love with" Girl.name
}
}
var Girl={
name:"Jing"
}
alert(Boy.Love(Girl))

이제 문제는 두 개의 유사한 객체입니다. love 메소드가 있고 하나는 없습니다. C#과 유사한 클래스를 정의하지 않고 단순히 두 개의 객체를 생성했기 때문입니다. 두 객체 모두에 love 메소드가 있을 것으로 예상되면 다음과 같이 정의할 수 있습니다.

코드 복사 코드는 다음과 같습니다.
function LoveRelation(person){
Alert(this .name "사랑에 빠졌습니다" person.name)
}
var person1={
name:"Young",
Love:LoveRelation
}
var person2={
name:"Jing",
Love:LoveRelation
}
person1.Love(person2)

위 코드는 person 클래스를 생성한 다음 person 클래스의 인스턴스가 두 개이므로 두 인스턴스가 동일한 특성을 갖기 때문에 위의 코드만으로는 충분하지 않습니다. 우리는 두 가지 방법으로 이 요구 사항을 충족할 수 있습니다.
경로 1:

코드 복사 코드는 다음과 같습니다.
function Person( n)
{
this.name=n;
this.Love=function(person)
{
alert(this.name "은 " person.name)과 사랑에 빠졌습니다. 🎜>}
}
var person1=new Person("Young");
var person2=new Person("Jing")
person1.Love(person2); >
접근법 2: JavaScript 객체의 프로토타입 속성을 사용합니다.



코드 복사 this.name=n;
}
Person.prototype.Love=function(person)
{
alert(this.name " fall in love with" person.name); 🎜>}
var person1=new Person("Young");
var person2=new Person("Jing")
person1.Love(person2)
person2.Love(person1) ;


위의 예에서 Person 함수를 Person 객체의 생성자로 간주할 수 있으며 이 생성자를 통해 생성된 모든 객체는 프로토타입 속성을 공유합니다.
Douglas Crockford의 Private Members In JavaScript"에서 저자는 방법을 자세히 보여줍니다. 객체의 비공개 멤버 생성에 대한 자세한 설명은 생략하겠습니다.



코드 복사
코드는 다음과 같습니다. 함수 Point(x, y) { this.get_x = function() { return x; }
this.set_x = function(value) { x = value ; }
this.get_y = function() { return y; }
this.set_y = function(value) { y = value; }
}

Point.prototype.print = function()
{
return this.get_x() ',' this.get_y()
}

var p = new Point(2,2)
p .set_x(4);
alert(p.print());


마지막으로 JavaScript 개체의 네임스페이스에 대해 설명합니다. C#을 경험해 본 친구들은 다음 코드를 통해 javascript에서 네임스페이스를 정의할 수 있다는 점을 매우 명확하게 알 수 있습니다. var Arcadia = {}



코드 복사
코드는 다음과 같습니다. Arcadia.Person=function(n) { this.name=n
}
Arcadia.Person . 프로토타입.Love=function(person)
{
alert(this.name "은 " person.name과 사랑에 빠졌습니다.
}
var person1=new Arcadia.Person("Young" );
var person2=new Arcadia.Person("Jing")
person1.Love(person2);
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.