반응형 컴퓨터/Front (Html, JS)47 [JavaScript] Prototype이 뭘까용(2) (Prototype 상속기능 직접 만들어보기) Prototype 은 부모의 정보 Prototype 은 생성자로 만들어야 나옵니다. 당연하죠 왜냐면 Prototype 은 부모의 정보니까요! array 로 prototype 알아보기 - 부모 정보 찍어보기 Array.prototype Array() 의 prototype 을 찍어보겠습니다. 잘은 모르겠지만 constructor 인 것만은 확실해졌네요! 심지어 더 밑으로 내려가보니 Object… Array() 의 부모의 부모는 Object 였어요 array 로 prototype 알아보기 - __proto__ 와 prototype let arr = new Array() arr = [1,2,3] arr.__proto__ Array.prototype 이렇게 한번 찍어봅시당 자식.__proto__ 랑 부모.prot.. 2023. 7. 9. [JavaScript] Prototype이 뭘까용(1) (난 length 를 만든적이없는데 배열에 써지네?...) 시작하기 전….. 참조형 데이터 타입을 찍어볼께요 여기 안에 prototype 이라는 애가 있네용 잘 살펴보면 객체 안에는 Object, 배열 안에는 Array(0) 이 라고 적혀있습니댜 object 의 prototype을 펼쳐보면 뭔가 많이 나옵니다. toString, valueOf 같은 익숙한 함수도 보이네요 array 의 prototype를 펼쳐보면 배열에서 사용할 수 있는 함수들이 보이고 맨 마지막에 또 prototype Object 가 보이네요! 그래서 prototoye 이 뭐냐면요!! Prototype 부모의 정보 Protoype 특징 1. 자식이 부모의 데이터를 사용 할 수 있습니다. 2. 자식이 부모의 부모의 데이터를 사용할 수 있습니다. 3. 자식이 부모의 부모의 부모의….. 부모의 데.. 2023. 6. 25. [JavaScript] 생성자(2) Constructor 이렇게 사용합니다. https://gallery-k.tistory.com/430 [JavaScript] 생성자 (1) Constructor, 생성자를 사용하는 이유 생성자 object 를 여러개 만들 때 사용 생성자를 사용하는 이유 참조형 데이터 타입인 object 를 복사해서 쓰려고 (+ 객체지향적인 코딩을 위해서 라고 말하면 간지남) 데이터 타입 종류? 기본형 참 gallery-k.tistory.com 생성자 사용1_ 객체 복사하기 // Constructor function 생성자(){ this.data1 = 'data1'; // instance this.data2 = 'data2'; // instance } let 객체1 = new 생성자() let 객체2 = new 생성자() 이제 객체1 과 객체 2 를 사용할 수 .. 2023. 6. 25. [JavaScript] 생성자 (1) Constructor, 생성자를 사용하는 이유 생성자 object 를 여러개 만들 때 사용 생성자를 사용하는 이유 참조형 데이터 타입인 object 를 복사해서 쓰려고 (+ 객체지향적인 코딩을 위해서 라고 말하면 간지남) 데이터 타입 종류? 기본형 참조형 데이터 타입이 있습니다. 기본형 데이터 타입 : string number let 문자열 = '앙녕'; let 숫자 = 1; 참조형 데이터 타입 : array object let 배열 = [1,2,3] let 객체 = { a: '1', b: '2' } 기본형과 참조형의 차이 (복사) 둘의 제일 큰 차이점은 기본형 데이터 타입을 복사하면 값이 복사되고, 참조형 데이터 타입을 복사하면 주소값이 복사된다는 점이죠 그래서 참조형 데이터를 let 객체1 = {data:'data', data1:'data1'} .. 2023. 6. 25. [html] sass,css 텍스트(p, h123 태그)에 그라데이션 색 넣기 대여/반납 현황 결과물 2023. 6. 20. [JavaScript] Promise 사용해서 원하는 순서대로 코드 실행하기 Promise 원하는 코드 작동 후에, 결과에 따라서 원하는 순서대로 다음 코드를 실행하게 해주는 디자인 패턴 생긴거 /* eslint-disable */ export default () => { // promise 함수 선언 const 더하기함수 = new Promise( (성공,실패) => { // 원하는 코드 작성 if (1+1 === 2){ 성공(); }else{ 실패(); } }); // promise 함수 실행 더하기함수.then(() => { // 성공 시 실행 console.log('성공'); }).catch(() => { // 실패 시 실행 console.log('실패'); }); return( PromiseCode ) } 이렇게 생겼습니다. Promise 함수 선언 Promise 함수 .. 2023. 6. 13. [JavaScript] 비동기 코드를 동기처럼 사용하기_콜백함수 용어정리 콜백 함수안의 함수 비동기 코드와 동기 코드가 섞여있을 경우, 동기적으로 실행시키고 싶을 때 사용 동기 위에서부터 아래로, 차례대로 실행되는 코드 비동기 비동기 코드가 있을 때 동기 -> 비동기 순으로 실행 콜백함수 근데 비동기 먼저 실행시키고 그 다음에 동기 코드를 실행시키고 싶을 때가 있는데 이때 콜백 함수를 써줍니다. 콜백함수는 함수안에 함수 라는 뜻이고 이 함수에 있는 거 실행시킨다음에 그 다음 함수 실행시켜주세요 라는 의미입니다. 콜백함수와 비동기 코드 대표적인 비동기 코드들을 살펴보면 // setTimeout setTimeout( () =>{},1000) 1초 지난 다음에 안에 코드를 실행해주세요 파라미터로 arrow function 이 들어있습니다. // 이벤트리스너 document.. 2023. 6. 13. [JavaScript] 동기 비동기 특징 ( + Web Api) 동기 - synchronous - 위에서부터 아래로 차례대로 실행되는 코드 - 한번에 코드 한줄씩 차례차례 실행 - stack 에서 코드를 한줄씩 실행시킴 비동기 - asynchronous - 비동기적 코드 (fetch, 이벤트리스너, setTimeout, setState 함수...) 사용 시 빨리 처리되는 순서대로 실행되는 코드 - 실행이 오래걸리는 비동기적 코드들을 Web Api -> 큐에 넣어서 나중에 실행시키고, 실행이 바로 가능한 동기적 코드부터 stack 에서 꺼내서 실행시킴 - 자바스크립트 언어의 기능이 아니라 웹 브라우저의 기능 동기 비동기 실행 함수 /* eslint-disable */ export default () => { const sync = () =>{ console.log('동.. 2023. 6. 13. 이전 1 2 3 4 ··· 6 다음 반응형
