JavaScript 기본 교재

JavaScript 객체

JavaScript 함수

JS HTML DOM

JS 브라우저 BOM

AJAX 기본 교재

JavaScript 참조 매뉴얼

JavaScript 객체 생성자 JavaScript 객체 속성

JavaScript 객체 메서드

메서드객체와 관련된,或者说 연관된 함수, 메서드는 함수의 하나의 속성입니다.

메서드 정의 방식은 일반 함수 정의 방식과 동일하지만, 그들을 객체 속성으로 할당해야 합니다.

JavaScript 메서드에 접근

객체 메서드를 검색하려면, 일반 함수 호출과 동일한 방식으로 호출하면 됩니다. 단, 그것을 객체 변수에 추가하는 것만 다릅니다.

예제

//　객체 생성
var user = {
　　firstName: "Seagull",
　　lastName  :  "an",
　　age :　22,
　　location: "New Delhi",
　　getName  :  function() {
　return this.firstName　+　"　"　+　this.lastName;
　　}
};
//getName() 메서드에 접근
user.getName();

테스트를 보세요‹/›

() 를 사용하지 않는 메서드에 접근할 때, 그것은 함수 정의를 반환합니다:

예제

user.getName;

테스트를 보세요‹/›

사용하여this객체 참조로 사용

JavaScript는 특별한 키워드 this가 있으며, 메서드에서 현재 객체를 참조할 수 있습니다.

우리의 메서드가 조금 이상한 것을 주목했을 수 있습니다. 이 예를 들어:

　　getName: function() {
　　　return this.firstName　+　"　"　+　this.lastName;
　　}

this 키워드는 코드가 현재 내부 객체에 작성된다는 것을 의미합니다.-따라서 이 경우, this는 다음과 같습니다:user.

다시 말해, this.firstName는 다음과 같은 의미를 가집니다:이 객체firstName 속성.

다음과 같은 곳에서 사용할 수 있습니다:JS 키워드교재JS에서this 키워드에 대한更多信息를 알아보세요.

새 메서드 추가

객체에 새 메서드를 추가하려면, 새 함수를 속성에 할당하는 데 사용할 수 있는 대입 연산자 (=)를 사용할 수 있습니다.

이 예제에서는 사용자 객체에 "greet" 메서드를 추가합니다:

예제

user.greet = function() {
　　　　return \
};

테스트를 보세요‹/›

Getters와 Setters

ECMAScript 5(2009) Getters와 Setters를 도입했습니다.

getter는 특정 속성 값을 얻는 방법입니다.

setter는 특정 속성 값을 설정하는 방법입니다.

신규 속성을 추가할 수 있는 모든 предопределенные ядренные объекты или пользовательские объекты에서 getter와 setter를 정의할 수 있습니다.

JavaScript Getter（get 키워드）

이 예제에서는 get을 사용했습니다 loc속성으로location속성 값:

예제

//객체 생성
var user = {
　　firstName: "Seagull",
　　lastName: "Anna",
　　age :　22,
　　location: "New Delhi",
　　get loc() {
　　　　　return this.location;
　　}
};
//객체에서 데이터를 표시합니다
document.getElementById("para").innerHTML = user.loc;

테스트를 보세요‹/›

JavaScript Setter（set 키워드）

이 예제에서는 set을 사용했습니다 loc속성으로location속성 값:

예제

//　객체 생성
var user = {
　　firstName: "Seagull",
　　lastName: "Anna",
　　age :　22,
　　location: "New Delhi",
　　set loc(x) {
　　　　　this.location = x;
　　}
};
//　setter를 사용하여 객체 속성 설정
user.loc = "Goa";
//　객체에서 데이터를 표시합니다
document.getElementById("para").innerHTML = user.location;

테스트를 보세요‹/›

Function 함수와 Getter 간의 차이?

다음 두 예제는 function과 getter 간의 차이를 보여줍니다:

예제1（함수 사용）：

예제

//객체 생성
var user = {
　　firstName: "Seagull",
　　lastName: "Anna",
　　age :　22,
　　location: "New Delhi",
　　fullName: function() {
　　　　　　return this.firstName　+　"　"　+　this.lastName;
　　}
};
//　객체에서 데이터를 표시합니다
document.getElementById("para").innerHTML = user.fullName();

테스트를 보세요‹/›

예제2（Getter 사용）：

예제

//　객체 생성
var user = {
　　firstName: "Seagull",
　　lastName: "Anna",
　　age :　22,
　　location: "New Delhi",
　　get fullName() {
　　　　　return this.firstName　+　"　"　+　this.lastName;
　　}
};
//객체에서 데이터를 표시합니다
document.getElementById("para").innerHTML = user.fullName;

테스트를 보세요‹/›

예제1 fullName를함수접근: user.fullName()。

예제2 fullName를속성접근: user.fullName。

Getters와 Setters 사용법:

더 간단한 문법을 제공합니다
속성과 메서드의 문법이 동일하게 허용됩니다
데이터 품질을 더 좋게 보장할 수 있습니다
백엔드 처리에 매우 유용합니다

Object.defineProperty()

Object.defineProperty() 메서드는 Getter와 Setter를 추가하는 데도 사용될 수 있습니다.

문법:}}

Object.defineProperty(object,　property,　{value　:　value})

"카운터" 객체를 예로 들어보겠습니다:

예제

var　counter　=　{i　:　0};
Object.defineProperty(counter,　"increment",　{　
　　　get:　function()　{this.i++;}
});
Object.defineProperty(counter,　"decrement",　{　
　　　get:　function()　{this.i--;}
});
Object.defineProperty(counter,　"reset",　{　
　　　get:　function()　{this.i　=　0;},
});
Object.defineProperty(counter,　"add",　{
　　　set:　function　(value)　{this.i　+=　value;}
});
Object.defineProperty(counter,　"subtract",　{
　　　set:　function　(value)　{this.i　-=　value;}
});
counter.reset;
counter.add　=　25;
counter.increment;

테스트를 보세요‹/›

JavaScript 객체 생성자 JavaScript 객체 속성