본문 바로가기

JavaScript136

Javascript) 상속, Pseudoclassical 상속 선언(자식 생성자 함수 & 프로토타입 처리), this binding 관련 함수(call, apply, bind), Object.create 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 상속 HTML 코드 상속 Javascript 코드 getSalePrice()와 toString()은 Book의 prototype에 선언하여 부모인 Book.prototype에서 꺼내와 사용하도록 하였습니다. 만일 더 구체화된 Novel 객체를 생성하고자 할 때는 어떻게 할까요? (Book의 기능을 모두 가지고 있으면서, Novel만의 기능을 추가하고 싶을 때) 위와 같은 프로토체인 구조를 만들어보도록 하겠습니다. Pseudoclassical 상속 선언 자식 생성자 함수 & 프로토타입 처리 ① 자식 생성자 함수 안에서 부모 생성자 함수 호출 ② 자식 생성자 함수의 프로토타입 객체를 부모 프로.. 2022. 5. 27.
Javascript) 생성자함수 - prototype, __proto__, 속성비교 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 생성자함수 - prototype - javascript는 prototype 기반의 상속 모델을 가진 객체 지향 언어 - 생성자 함수 호출로 생성된 객체는 prototype과 연결된 prototype 체인을 가짐 (prototype 객체를 부모로 삼음) - prototype체인의 최상위에는 Object.prototype이 존재 HTML 코드 생성자함수 - prototype Javascript 코드 const test3 = () => { console.log(Duck); // 생성자함수 console.log(Duck.prototype) // prototype }; function Duck(fi.. 2022. 5. 26.
Javascript) 객체 배열-생성자 함수 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 객체 배열 - 생성자 함수 - 관례상 대문자로 시작하는 이름을 가짐 - new 연산자를 통해 호출되고, 객체를 생성 - this 용법 5) 생성자 함수 안의 this는 현재 객체를 가리킴 - 화살표 함수는 생성자 함수로 사용 불가 HTML 코드 객체배열 - 생성자 함수 Javascript 코드 const test2 = () => { const pets = []; pets.push(new Pet('뚱이', '시추', 8, 15, 'brown')); pets.push(new Pet('둘리', '말티즈', 6, 5, 'white')); pets.push(new Pet('사랑이', '코카스파니엘'.. 2022. 5. 26.
Javascript) 객체 배열-리터럴(call()) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 객체 배열 - 리터럴 HTML 코드 객체배열 - 리터럴 Javascript 코드 const test1 = () => { const pets = []; pets.push({ name : '뚱이', breed : '시추', weight : 8, age : 15, color : ['brown'], bark() { return this.weight > 10 ? '왈왈' : '멍멍' } }); pets.push({ name : '둘리', breed : '말티푸', weight : 3, age : 4, color : ['brown'], bark() { return this.weight > 10 ? '.. 2022. 5. 25.
Javascript) 구조분해할당 -객체 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 구조분해할당 (Destructuring Assignment) - 비구조할당 - 배열/객체 요소를 손쉽게 변수에 옮겨담는 문법 객체 구조분해할당 - 기본 - 객체의 요소 (속성값)를 변수에 쉽게 옮겨담는 문법 HTML 코드 기본 Javascript 코드 구조분해할당을 사용하지 않을 때 const test5 = () => { const obj = { a : 1, b : '안녕', c : true }; const a = obj.a; const b = obj.b; const c = obj.c; console.log(a, b, c); }; 구조분해할당을 사용하지 않으면, 속성명으로 값을 가져와 변수.. 2022. 5. 25.
Javascript) 구조분해할당-배열 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 구조분해할당 (Destructuring Assignment) - 비구조할당 - 배열/객체 요소를 손쉽게 변수에 옮겨담는 문법 배열 구조분해할당 - 기본 HTML 코드 기본 Javascript 코드 구조분해할당을 사용하지 않을 때 const test1 = () => { const arr = [1, 2, 3]; const a = arr[0]; const b = arr[1]; const c = arr[2]; console.log(a, b, c); } 구조분해할당을 사용하지 않고 배열의 요소를 변수에 담을 때는 위처럼 각각 인덱스를 참조하여 값을 가져와 대입하였습니다. 구조분해할당 사용 시 con.. 2022. 5. 25.

티스토리툴바