공부하는 비오

prototype과 __proto__ 이런게 있구나 하고 알아두면 좋을 이론. 우선 javascript에서 함수는 사실 객체라고 할 수있다. function Object(매개변수1, 매개변수2, 매개변수3){ this.매개변수1 = 매개변수1; this.매개변수2 = 매개변수2; this.매개변수3 = 매개변수3; } >> 객체이기 때문에 속성값(매개변수)를 가질 수 있음. 예제를 통해 prototype과 __proto__가 어떻게 다른지, 또 이 둘이 어떻게 작동하는지를 알아보자. name, first, second 속성을 가진 'Person' 객체를 생성한다. 여기서 { } 안에 내용은 prototype으로, 이 프로토타입을 가지는 다른 객체를 생성 할 수 있다. Person객체를 생성할 때, 사실 ..

JavaScript 2020. 8. 5. 02:02

이번 포스트 코딩은 위에서부터 쭈욱이어짐 call 객체와 함수를 따로 생성했을 때, call이라는 메서드를 사용하여, 함수를 객체의 메서드로 사용할 수 있다. (call이랑 유사한 메서드로 apply도 있음) var Object = { } function Fn(){} Fn.call(Object) ex. 함수에 매개변수도 사용할 수 있음. function Fn(parameter){ 코드 } Fn.call(Objet, parameter) 첫번째 인자는 this가 어떤 객체인지, 두번째 인자는 매개변수. ex. bind bind 메서드를 사용하면, 함수의 this값을 고정하는 새로운 함수를 만들 수 있다. var Object = { } function Fn(){} var Fn2 = Fn.bind(Object)..

JavaScript 2020. 8. 5. 01:39

객체 간의 상속 class를 이용한 방법이 아니어도, 객체 간에 상속을 받도록 부모객체를 설정할 수 있음. 방법 1. 부모객체.__proto__ = 자식객체; __proto__를 사용하는 방법은 자바스크립트표준은 아니지만 웬만한 브라우저에서 작동가능하다. superObj를 subObj의 부모객체로 지정(상속) 후, 부모객체인 superObj의 인자인 superVal을 subObj.superVal로 불러올 수 있음. ** subObj.superVal = 'sub'로 바꾸어도, superObj.superVal은 바뀌지 않음. subObj.superVal만 바뀜. 방법 2. __proto__를 대신하여 만들어진 방법. var 자식객체 = Object.creat(부모객체); __proto__ 메서드를 사용하는 ..

JavaScript 2020. 8. 1. 10:37

super 부모요소에서 상속받으면서, 부모요소에서는 가지고 있지 않는 기능은 자식요소에서만 실행. super를 사용하지않으면 상속받는 대신 모든 코드를 새로 사용해야하지만, super를 사용한다면, 부모요소를 그대로 가져오므로 중복을 피할 수 있으면서, 자식요소에만 사용할 인자(value)들이나 메서드를 추가 할 수 있음. class Obj_par{ constructor(val1, val2){ this.val1 = val1; this.val2 = val2; } method1( ){메서드 코드;} } class Obj extends Obj_par{ constructor(val1, val2, val3){ super(val1, val2); this.val3 = val3; } method1( ){super.me..

JavaScript 2020. 8. 1. 00:04

클래스(Class) 클래스를 사용해 객체를 생성할 수 있다. class Object{ constructor( key1, key2){ this.key1 = key1; this.key2 = key2; } method( ){ 메서드 코드 } } new Object( ); 클래스를 사용해 객체를 생성하고자 할 때는, function대신 constructor을 사용하여 객체를 만든다. 메서드를 만들 때도 prototype이나 function이라는 단어를 사용하지않고, method의 이름으로 생성한다. new Object를 적어줘야 객체가 생성되는건 동일. ex. 이전 글(https://biio-studying.tistory.com/69)에서와 유사한 객체 생성, 그 결과가 동일함을 확인 할 수 있다. Person..

JavaScript 2020. 7. 30. 22:46

객체생성자(constructor) 함수를 이용해 객체 생성. function Object (key1, key2){ this.key1 = key1, this.key2 = key2, this.method = function( ){ 메서드코드 } } new Object( ) ; ex. 내장객체를 통해 객체생성자의 개념을 살펴보자. console.log(Date)를 통해, Date()는 함수(function( ){ })임을 알 수 있음. 즉 d1.getFullYear()은 Date(객체)의 key(속성)이나 method(메서드)를 불러오는 것. ex. 함수 Person을 만든 후, 그냥 Person( )을 호출하면 아직 생성되지 않은 것을 확인 할 수 있음. new Person( ); 을 사용해야 객체생성. 프..

JavaScript 2020. 7. 29. 23:47

this? this가 속해있는 method를 가리킴. this를 사용하면 객체의 이름이 바뀔 경우에도 메서드의 내용 변경없이 사용 가능.

JavaScript 2020. 7. 29. 21:26

이미 객체를 공부하긴 했지만, React를 공부하기 전 한번더 공부해보자. (feat. 생활코딩) 객체? 서로 연관된 변수의 함수를 그룹핑하고 이름을 붙인 것. 객체 생성 var Object = { key : 'value', method: function( ){ } } key == 객체변수 method == 객체함수 (객체에 속해있는 함수를 메서드라고 함) 객체변수의 속성 변경 가능 Object.key = 'value2' 객체변수 정보 삭제 가능 delete Object.key ex. 객체에서 반복문 사용하기 for(var 변수 in Object){ }; 변수 == key Object[변수] == value ex. **console.log 대신 console.group 을 사용하면 좀더 깔끔하게 확인 할..

JavaScript 2020. 7. 28. 23:55