Javascript Function

2020. 06. 13

Jaewoo KIM

💁‍♂️ Function Instance

Function Instance 기준

Function 구분

Built In Function Object
Funtion Object : function 키워드로 생성
Funtion Instance: new 연산자로 생성

function Person(name) {
	this.name = name;
}

Person.prototype.getName = function() {
	return this.name;
}

var person = new Persion('Jaewoo KIM')
person.getName();

Function Instance 생성

1. function Person(name) {...}

2. Person.prototype.getName = function() {}

3. var person = new Person('Jaewoo KIM')

function Person(name) {
	this.name = name;
}

Person.prototype.getName = function() {
	return this.name;
}

var obj = new Person('Jaewoo KIM')

log(obj.name);
log(obj.getName());

💁‍♂️ 생성자 함수

생성자 함수

new 연산자와 함께 인스턴스를 생성하는 함수
- new Person() 에서 Person() 이 생성자 함수
new 연산자
- 인스턴스 생성을 제어
- 생성자 함수 호출
생성자 함수
- 인스턴스 생성, 반환
- 인스턴스에 초깃값 설정

생성자 함수 실행 과정

엔진이 new 연산자를 만나면
function의 [[Construct]]를 호출
fuction 오브젝트를 생성할 때
Person() 함수 전체를 [[Constuct]]에 설정
[[Construct]]에서 인스턴스를 생성하여 반환
반환된 인스턴스를 new 연산자가 받아
new 연산자를 호출한 곳으로 반환

function Person(name) {
	this.name = name;
}

Person.prototype.getName = function() {
	return this.name;
}

var obj = new Person('Jaewoo KIM')

new 연산자가 인스턴스를 생성하는 것으로 생각할 수 있지만 실제로 function의 [[Construct]]가 인스턴스를 생성

인스턴스 생성 과정

new Person() 실행
- Person 오브젝트의 [[Construct]] 호출
- 파라미터를 [[Construct]]로 전달
빈 Object 생성
- 여기서 오브젝트를 하나씩 채워나감
Object 내부 처리용 프로퍼티를 설정
Object의 [[Class]]에 "Object" 설정
Person.prototype에 연결된 메서드를
생성한 인스턴스의 [[Prototype]]에 설정

function Person(name) {
	this.name = name;
}

Person.prototype.getName = function() {
	return this.name;
}

var obj = new Person('Jaewoo KIM')

Person 인스턴스: {
  name: 'Jaewoo KIM'
  __proto__ = {
    constructor: Person,
    getName: fuction() {},
    __proto__: Object
  }
}

💁‍♂️ constructor 프로퍼티

Constructor 프로퍼티

생성하는 function 오브젝트를 참조
- function 오브젝트를 생성할 때 설정
- prototype에 연결되어 있음
ES5: constructor 변경 불가
- 생성자 활용 불가
ES6: constructor 변경 가능
- 활용성 높음

Person fuction 오브젝트: {
  prototype: {
    constructor: Person
  }
}

Constructor 비교

Person === Person.prototype.constructor
Person === obj.constructor
typeof Person
typeof obj
function 오브젝트를 인스턴스로 생성했더니
타입이 변경되었음
- [[Construct]]가 실행될 때 생성된 오브젝트의 [[Class]]에 'Object'를 설정하기 때문

var Person = function(){};
var result = 
    Person === Person.prototype.constructor;
log(result); // true

var obj = new Person();
log(Person === obj.contructor) // true

log(typeof Person) // function
log(typeof obj) // object

💁‍♂️ prototype, 상속

prototype 오브젝트 목적

prototype 확장
- prototype에 프로퍼티를 연결하여 확장
- Person.prototype.getName = function() {}
프로퍼티 공유
- 생성한 인스턴스에서 원본 prototype의 프로퍼티 공유
인스턴스 상속
- function 인스턴스를 연결하여 상속
- Person.prototype = new Point()

인스턴스 상속

인스턴스 상속 방법
- prototype에 연결된 프로퍼티로 인스턴스 생성하여 상속받을 prototype에 연결

function Person(name) {
	this.name = name;
}
Person.prototype.getName = function() {
	return this.name;
}

function Point(name) {
  Person.call(this, name);
}
Point.prototype =
  Object.create(Person.prototype, {});

var obj = new Point('Jaewoo KIM')
log(obj.getName())

인스턴스 상속

인스턴스 상속 방법
- ES6의 Class 상속

class Person {
    constructor(name) {
      this.name = name;
    }
    getName() {
      return this.name;
    }
}

class Point extends Person {
    constructor(name) {
      super(name)
    }
}

const obj = new Point('Jaewoo KIM')
log(obj.getName())

💁‍♂️ prototype 확장

prototype 확장 방법

prototype에 프로퍼티를 연결하여 작성
- prototype.name = value 형태
일반적으로 function을 사용
prototype에 null을 설정하면 확장 불가

프로퍼티 연결 고려사항

prototype에 연결할 프로퍼티가 많을 때
- Person.prototype.nam1 ... ~ N 형태는
  반복해야 해서 작성해야 되기 때문에 번거로움
- Person.prototype = {name1: value, .... N}
constructor가 지워지는 문제와 대책
- {name1: value, ...} 형태로 설정한 후
  prototype에 constructor를 다시 연결

constructor 연결

오브젝트 리터럴 {} 을 사용하여 프로퍼티를 연결할 때
constructor가 지워지는 것을 고려해야 한다.
constructor가 없어도 인스턴스가 생성되지만
- constructor가 연결된 것이 정상이므로...

function Person() {};
Person.prototype = {
  constructor: Person,
  setName: function() {}
}

var obj = new Person();
log(obj.constructor);
// function Person() {}

prototype 확장과 인스턴스 형태

fuction Person() {};
- Person 오브젝트 생성
Person.prototype.getName
= function(){}
- getName 메서드 연결
var obj = new Person();
- 인스턴스 생성 및 할당

function Person(name) {
	this.name = name;
}

Person.prototype.getName = function() {
	return this.name;
}

var obj = new Person('Jaewoo KIM');
obj.getName();

obj: {
  name: 'Jaewoo KIM'
  __proto__ = {
    constructor: Person,
    getName: fuction() {},
    __proto__: Object
  }
}

💁‍♂️ this와 prototype

this로 인스턴스 참조

this로 메소드를 호출한 인스턴스 참조
- var obj = new Person();
- obj.get() 형태에서 this로 obj 참조
인스턴스에서 메소드 호출 방법
- prototype에 연결된 프로퍼티가 __proto__에 설정되고
  인스턴스 프로퍼티가 된다

this와 prototype

log("1:", this.name);
- 여기서 this는 생성 인스턴스 참조
- name 프로퍼티가 없더라고 에러가
  발생하지 않고 undefined를 반환
obj.getName();
- 여기서 this는 호출한 인스턴스
this.setPoint()
- 여기서 this는 생성 인스턴스 참조

function Person() {
	log("1:". this.name)
};

Person.prototype.getName = function() {
	this.setName();
  	log('2:'. this.name)
}
Person.prototype.setName = function() {
	this.name = "Jaewoo KIM"
}

var obj = new Person('Jaewoo KIM');
obj.getName();

prototype 메서도 직접 호출

Person.prototype.getName();
- 인스턴스를 생성하지 않고 직접 호출
Person.prototype을 this로 참조
obj 인스턴스에는 name이 있지만
Person.prototype에는 없음

function Person(name) {
	this.name = name;
};

Person.prototype.getName = function() {
	return this.name;
}

var obj = new Person('Jaewoo KIM');
log(obj.getName()); // Jaewoo KIM

log(Person.prototype.getName()) // undefined

💁‍♂️ prototype 프로퍼티 공유 시점

프로퍼티 공유 시점

사용하는 시점에 prototype의 프로퍼티 공유
prototype의 프로퍼티로 인스턴스를 생성하지만
- 인스턴스의 프로퍼티는 원본 prototype의 프로퍼티를 참조
- 복사개념이 아님
인스터스의 메소드를 호출하면 원본 prototype의 메소드를 호출
원본 prototype에 메소드를 추가하면 모든 인스턴스에서 사용가능

프로퍼티 공유 시점

function Person() {
	this.name = 'Jaewoo KIM';
};

var obj = new Person();
log(obj.getName); // undefined

Person.prototype.getName = function() {
  return this.name
}

var result = obj.getName()
log(result) // Jaewoo KIM

💁‍♂️ 인스턴스 프로퍼티

인스턴스 프로퍼티

prototype에 연결된 프로퍼티도 인스턴스 프로퍼티
- 직접 인스턴스에 연결된 프로퍼티와 차이 있음
인스턴스의 프로퍼티를 prototype으로 만든
인스턴스 프로퍼티 보다 먼저 사용
인스턴스마다 값을 다르게 가질 수 있음
- 인스턴스를 사용하는 중요한 목적

obj 인스턴스 = {
  name: 'Jaewoo KIM',
  getName: function() {},
  __proto__: {
    getName: fuction() {}
  }
}

인스턴스 프로퍼티 우선 사용

function Person(name) {
	this.name = name;
};

Person.prototype.getName = function() {
  return 'Jaewoo KIM'
}

var obj = new Person('sat10am');
obj.getName = function () {
  return this.name
}

log(obj.getName());

obj 인스턴스 = {
  name: 'sat10am',
  getName: function() {},
  __proto__: {
    getName: fuction() {}
  }
}

끝