[Javascript] Prototype

eunbi·2020년 3월 28일
0

javascript

목록 보기
1/8
post-custom-banner

Prototype

  • 객체를 생성 할 때마다 생성, 실행되지 않기 때문에 성능을 절약할수 있고 각 객체마다 같은 메모리주소를 바라보고 있기 때문에 메모리 효율성을 높일 수 있다. 또한 재정의가 가능하기 때문에 커스터마이징도 가능하다.

상속 

  • 상속을 사용하면 중복된 불필요한 코드를 쓰지 않아도 되고 익스텐즈라는 상속을 쓰면서 필요한 함수만 추가하면 되기 때문에 간결하며 유용하게 된다
  • 부모클래스가 일을 하고 부모클래스가 하지 못하는 일은 나만한다 => super()
  • super() => 부모클래스의 생성자
  • super => 부모클래스 자체를 의미

객체의 상속

  • 다른 언어는 class에서만 상속이 가능하지만 js는 객체(인스턴스)가 직접 다른 객체 상속이 가능하다. 또한 얼마든지 상속관계를 바꿀 수 있다
    -> prototype link를 바꿔주면 가능하다 (proto)
    -> prototype link가 가르키는 객체를 prototype object라고 한다
   	const superObj = { superVal: "super" }; 
    	const subObj = { subVal: "sub" };
   		subObj.__proto__ = superObj;
   		//subObj가 superObj를 상속받는다
   		subObj.superVal;
   		// => super
   		subObj.superVal = "sub";
  • superObj.superVal의 값을 바꾸지 않고 subObj의 superVal를 새로 만드는 것이다.
  • 즉 proto가 가르키는 superObj를 바꾼 것이 아니라 subObj내에서 superVal라는 값을 추가한 것이다

    위와 같은 코드
 	const subObj = Object.create(superObj);
 	subObj.superVal = "sub";

class가 아닌 객체의 상속

 prototype

1. class Person
- prototype => Person`s prototype을 가르킴

2. Person`s prototype
- constructor => Person 이다
- sum 메소드 보유

3. 인스턴스 kim
proto => Person`s prototype을 가르킴
=>kim.age를 호출할때 kim에 age 메서드가 없으면 proto으로 연결된 prototype으로 가서 메서드가 존재하는지 확인

class의 상속
super() => 상속 받은 뒤 부모 보다 더 많은 기능을 갖고 싶을 때 super로 부모의 기능을 상속받고 추가할 기능만 따로 써주면 됨

   	class PersonPlus(자식) extends Person(부모) {
   	    constructor (name, first, second){
   	        super(name, first) // 부모에게서 상속받을 속성
   	        this.second = second //자식의 추가 속성
   	    }
   	
   	    sum(){
   	        return super.sum() this.second 
   	//부모의 sum을 써쓰고 자식기능 second추가됨
   	    }
   	}
   	
   	function PersonPlus(자식) (name, first, second){
   	    Person.call(this, name,first);
   	    this.third = third;
   	}
   	//PersonPlus.prototype.__proto__ = Person.prototype은 아래와 같다 
   	이것은 proto가 부모의 프로토타입을 가르키는것
   	
   	PersonPlus.prototype = Object.creat(Person.prototype); 
   	//하지만 이렇게 하면 proto와 다른점은 부모의 프로토타입을 가르키는 새로운 객체가 생성되는 것이다.
 	
 	PersonPlus.prototype.constructor = PersonPlus; 
	// 그럼 자식프로토타입의 constructor가 부모가 되기 때문에 constructor를 자식으로 바꿔주는 작업이 필요하다

원시적인 상속 방법

    	function PersonPlus(자식) (name, first, second){
    	    Person.call(this, name,first);
    	    this.third = third;
    	}

1. call의 첫번째 인자로 this를 줘서 this가 가르키는 것이 PersonPlus가 되도록함
2. 나머지 인자로 상속받을 속성값을 넣어줌
=> 하지만 이것은 자식안에서 부모를 호출해 준 것이지 아직 상속을 받은 것은 아님

proto 와 Object.create

  • 상속은 아래와 같이 한다
    	//PersonPlus.prototype.__proto__ = Person.prototype은 아래와 같다 
    	
    	//이것은 proto가 부모의 프로토타입을 가르키는것
	PersonPlus.prototype = Object.creat(Person.prototype); 
	
	//하지만 이렇게 하면 proto와 다른점은 부모의 프로토타입을 가르키는 새로운 객체가 생성되는 것이다.
	
	PersonPlus.prototype.constructor = PersonPlus; 
	
	// 그럼 자식프로토타입의 constructor가 부모가 되기 때문에 constructor를 자식으로 바꿔주는 작업이 필요하다
  •  proto로 prototype을 연결하면 constructor가 바뀌며 연결이 되지만 
    Object.creat는 새로운 객체를 반환하며 constructor가 바뀌지 않기때문에 연결 후 다시 constructor을 바꿔줘야 한다

  • 한가지 주의할 점은 이렇게 constructor를 바꿔주는 작업 위쪽에 자식메서드가 위치하면 그 메서드는 없어지게됨 
    때문에 자식 메서드들은 constructor바꿔주는 코드 아래 위치해야함

Constructor

  • 객체의 소속이 누구인지 나타냄
  • new 객체.Constructor()로도 또다른 객체 생성가능

객체의 상속

1. 상속받을 자식 객체.proto = 부모객체
2. 상속받을 자식 객체= object.create (부모객체)

   	var kim = {
   	  name: "kim",
   	  age: 2
   	};
   	
   	var lee = Object.create(kim);
   	console.log(lee.kim);
   	
   	var kim = {name:'kim', first:10}
   	function sum(인자){return 인자 + this.first}
   	sum.call(kim, 매개변수로 넣어줄 값)

call

  • 혼자있는 함수가 필요에 따라 객체에 소속 될수있다
   	var kim = {name:'kim', first:10}
   	function sum(인자){return 인자 + this.first}
   	sum.call(kim, 매개변수로 넣어줄 값)

=> sum의 this를 kim으로 바꿈
sum.call(바꿀 this의 값, 함수의 매개변수로 들어갈 값)

bind

  • call처럼 호출될때마다 this를 바꾸는것이 아니라 아예 함수에 내부적으로 사용할 this를 고정시킴
    var kimSum = sum.bind(kim, "인자");

this가 kim으로 고정된 새로운 함수 생성 (두번째 인자는 역시 매개변수로 들어갈 값)

  • call은 실행할때 context 즉 this값을 바꾸지만 bind는 아예 함수에 내부적으로 사용할 this를 다른것으로 고정 시키는 것
  • call은 주어진 this값 및 각각 전달된 인자와 함께 함수를 호출하지만 bind는 호출되면 새로운 함수를 생성한다. 첫번째 인자는 this keyword를 설정하고 이어지는 인자들은 bind된 함수의 인수에 제공
  • call은 실행되는 함수의 this값을 원하는 객체로 바꿔서 실행될수 있게 해주고 bind는 실행되는 함수의 this값을 원하는 객체로 고정하는 새로운 함수를 반환해준다.

참고 : 생활코딩 강좌

profile
프론트엔드 개발자입니다 :)
post-custom-banner

0개의 댓글