1. 자바스크립트 객체 : 객체 상수 {} 또는 new Object(); 구문을 통해 자바스크립트 객체를 생성할 수 있다.

  추가적인 속성을 추가하거나 속성에 접근하는 방법은 object.propertyName을 사용하거나 object['propertyName']을 사용하면 된다.

 

1
2
3
4
5
6
7
8
9
var obj = {};
var testArr = [1234];
 
obj.arr = testArr;
console.log(obj); //{arr: [1, 2, 3, 4]}
 
obj["NodeJs"= "Server Side Language";
console.log(obj); // {arr: [1, 2, 3, 4], NodeJS: 'Server Side Language'}
 
cs

 

2. 프로토타입 활용 상속 : 자바와 같은 대부분의 강 자료형 언어에서는 클래스의 메소드가 클래스와 동시에 정의된다.

  하지만 자바스크립트에서는 함수가 클래스의 자바스크립트 Object 속성으로 추가돼야 한다.

  다음 코드는 this.functionName = function() {}을 사용해 함수를 추가하는 예다.

 

1
2
3
4
5
6
7
8
9
10
function ExampleClass() {
  this.name = "javascript";
  this.sayName = function () {
    console.log(this.name);
  };
}
 
var example1 = new ExampleClass();
example1.sayName(); // 'javascript';
 
cs

  위 클래스는 생성자에서 sayName 함수를 동적으로 추가한다. 이러한 패턴을 프로토타입 활용 상속이라고 한다.

  자바스크립트에서 프로토타입 활용 상속은 유일한 상속 방법이다. 클래스의 함수를 추가하기 위해서는 .prototype 속성을

  사용한 다음 함수의 이름을 지정하기만 하면 된다. .prototype 속성을 사용하는 것은 해당 객체의 자바스크립트 Object 속성을

  동적으로 확장하는 것이다. 자바스크립트는 동적이고 클래스는 새로운 함수 멤버를 이후에 필요할 때 추가할 수 있기 때문에

  이러한 방식이 표준이다. 자바와 같은 강 자료형 언어에서는 이러한 방식이 허용되지 않는다!

  다음 코드는 .prototype을 활용한 예이다.

 

1
2
3
4
5
6
7
8
9
10
11
12
function ExampleClass() {
  this.array = [1234]
  this.name = 'js'
}
 
var example1 = new ExampleClass();
ExampleClass.prototype.sayName = function() {
  console.log(this.name)
}
 
example1.sayName() // 'js'
 
cs

 

3. 생성자와 변수 : 자바스크립트에서 클래스의 변수가 해당 클래스 객체의 속성이기 때문에 this.propertyName으로 선언된

  모든 속성을 공개적으로 접근할 수 있다. 이는 해당 객체의 속성들을 다른 범위에서도 직접 접근할 수 있다는 의미이다.

 

1
2
3
4
5
6
7
8
9
10
11
function ExampleClass(name, size) {
  this.name = name;
  this.size = size;
}
 
var example1 = new ExampleClass("public"5);
console.log(example1); // {name: 'public', size: 5}
 
//공개 변수 접근하기
console.log(example1.name// 'public'
console.log(example1.name// 5
cs

 

  비공개 변수를 흉내내기 위해 this.propertyName을 사용하는 대신 지역 변수를 선언한 다음 해당 변수에 대한 접근을 허용하는

  getter와 setter를 만들 수 있다. 이런 식으로 변수는 해당 생성자의 범위 내에서만 사용 가능하다. 동시에 이러한 비공개 변수를

  흉내 낸 지역 변수들에 접근하기 위해서는 인터페이스 함수들을 정의해야 한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ExampleClass(name, size) {
  var privateName = name;
  var privateSize = size;
 
  this.getName = function() {return privateName;}
  this.setName = function(name) {privateName = name;}
  
  this.getSize = function() {return privateSize;}
  this.setSize = function(size) {privateSize = size;}
}
 
var example = new ExampleClass('juyeop'3);
 
//직접 접근 불가능!
console.log(example.privateName) //undefined
console.log(example.getName()) //juyeop
cs

 

4. 요약 : 자바스크립트에서는 프로토타입 활용 상속이 상속에 있어 선호되는 방법이다.

  프로토타입 활용 상속은 .prototype을 통해 신규 함수들을 클래스에 추가함으로써 동작한다.

  자바스크립트는 자바와 달리 비공개 변수를 지원하지 않으므로 생성자 함수의 범위에 한정된

  변수를 생성해야 한다. this키워드를 통해 변수를 선언하면 자동으로 공개 속성이 된다!

 

*출처 : 자바스크립트로 하는 자료 구조와 알고리즘, 지은이 : 배세민 엔지니어

+ Recent posts