몰입! 자바스크립트 - 28장 자바스크립트 객체 지향 프로그래밍

1
2
3
4
5
6
7

function sports() {
  this.value = 123;
  function getValue() {
    return this.value;
  }
  return getValue();
}

1
2
3
4
5
6
7

function sports() {
  this.value = 123;
  getValue: function() {
    return this.value;
  }
  return getValue();
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

var baseball = {
  value: 123,
  getValue: function() {
    return this.value;
  }
}
var sports = {
  value: 456,
  getValue: function() {
    return this.value;
  },
  baseball: baseball
}

js.log(sports.getValue());
// 456
js.log(sports.baseball.getValue());
// 123
debugger;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

function Swim() {
  this.value = 123;
}
Swim.prototype.getValue = function() {
  return this.value;
}

var sports = {
  player: 1,
  swim: new Swim()
}
js.log(sports.swim.getValue());
// 123

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

var baseball = {
  value: 123,
  getValue: function() {
    return this.value;
  }
}
var sports = {
  value: 456,
  setValue: function(param) {
    this.value = param;
  }
}

js.log(sports.value);
for (var name in baseball) {
  sports[name] = baseball[name];
}
js.log(sports.getValue());

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

var baseball = {
  value: 123,
  getValue: function() { return this.value};
  setValue: function(param) { this.value = param}
}

var sports = Object.create(baseball, {
  value: {
    value: 456,
    writable: true
  },
  getValue: {
    value: function() {return this.value}
  }
};
debugger;

js.log(sports.getValue());
// 456
sports.setValue(789);
js.log(sports.getValue());
// 789

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

상속 구현 순서 및 방법
1. 새로운 Object 인스턴스를 생성합니다.
  - {nameL value} 형태의 인스턴스를 생성합니다. __proto__도 같이 생성합니다.
2. 두 번째 파라미터인 프로퍼티를 인스턴스 프로퍼티로 설정합니다.
  - 인스턴스 프로퍼티이므로 구조적으로 __proto__ 위에 설정됩니다.
3. 첫 번째 파라미터인 baseball 오브젝트를 인스턴스로 생성합니다.
  - baseball 오브젝트를 생성할 때 빌트인 Object의 prototype에 연결된 __proto__에 설정됩니다.
4. 생성한 인스턴스를 __proto__에 설정합니다.
  - 3번에서 생성한 인스턴스가 1번에서 생성한 인스턴스의 __proto__를 지울 수 있습니다. 하지만 둘다
    빌트인 Object의 prototype에 연결된 프로퍼티로 생성되므로 문제가 되지 않습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

function Soccer() {
  this.member = 123;
}
Soccer.prototype.getMember = function() {
  return this.member;
}
function Sports() {
  this.member = 456;
}
Sports.prototype = new Soccer();
var sportsObj = new Sports();
js.log(sportsObj.getMember());
debugger

1
2
3
4
5
6
7
8
9

Fcuntion 오브젝트 상속
1. Soccer Function 오브젝트를 생성합니다.
2. Sports Function 오브젝트를 생성합니다.
3. Soccer Function 오브젝트의 prototype에 프로퍼티를 연결합니다.
  - prototype에 할당하는 것은 실행단계에서 수행됩니다. 따라서 이 단계 앞에서 new Soccer()를 실행하여
    인스턴스를 생성하더라도 getMember를 호출할 수 없습니다.
4. Sports 오브젝트의 prototype에 new 연산자로 Soccer 인스터스를 생성하여 설정합니다.
5. Sports 인스턴스를 생성하여 sportsObj에 할당합니다.
  슈퍼 클래스와 서브 클래스는 객체 지향 용어로 서브 클래스에서 슈퍼 클래스를 상속받습니다. Sports 오브젝트에서 Soccer 오브젝트를 상속받으므로 Soccer 오브젝트가 슈퍼 오브젝트(클래스)되고 Sports 오브젝트가 서브 오브젝트(클래스)가 됩니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

function Soccer() {
  this.member = 123;
}
Soccer.prototype.getMember = function() {
  return this.member + ': Soccer';
}
function Sports() {
  this.member = 456;
}
Sports.prototype = new Soccer();
Sports.prototype.getMember = function() {
  return 'sports';
}
var sportsObj = new Sports();
js.log(sportsObj.getMember());
js.log(Soccer.prototype.getMember.call(sportsObj));

// sports
// 456: Soccer

1
2
3
4
5
6
7

실행 순서, 방법
1. Soccer Function 오브젝트를 생성합니다.
2. Sports Function 오브젝트를 생성합니다.
3. Soccer Function 오브젝트의 prototype에 프로퍼티를 연결합니다.
4. Sports 오브젝트의 prototype에 new 연산자로 Soccer 인스턴스를 생성하여 설정합니다.
5. Sports Function 오브젝트의 prototype에 프로퍼티를 연결합니다.
6. Sports 인스턴스를 생성하여 sportsObj에 할당합니다.

1
2
3
4

Soccer.prototype.getMember();
Soccer.prototype.getMember.call();
Soccer.prototype.getMember.call(Soccer);
Soccer.prototype.getMember.call(Sports);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

function Soccer() {
  this.member = 123;
}
Soccer.prototype.getMember = function() {
  return this.member;
}
function Sports() {
  this.member = 456;
}
Sports.prototype = Object.create(Soccer.prototype, {
  setMember: {
    value: function(param) { this.member = param}
  }
});
debugger;

Sports.prototype.constructor = Sports;
var sportsObj = new Sports();
sportsObj.setMember(789);
js.log(sportsObj.getMember());
// 789
// Soccer에 있는 getMember를 호출하더라도 sportsObj에 있는 member를 참조하게 되어 789 출력

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

function Soccer(param) {
  this.member = param;
}
function Sports(superParam) {
  Soccer.call(this, supoerParam);
}
Sports.prototype = Object.create(Soccer.prototye, {});
var sportsObj = new Sports(123);

js.log(sportsObj.member);
// 123