728x90
반응형
super()
(심층)자바스크립트2024. 9. 4. 05:03super()

- Constructor constructor(생성자)를 사용하면 인스턴스화된 객체에서 다른 메소드를 호출하기 전에수행해야 하는 사용자 지정 초기화를 제공할 수 있다. Class를 new를 붙여서 (new User("John")) 인스턴스 객체로 생성하면넘겨받은 인수와 함께 constructor가 먼저 실행된다.이때 넘겨받은 인수인 John이 this.name에 할당된다.class User { constructor(name) { // 인스턴스 객체를 생성하면 constructor이 먼저 호출된다. this.name = name; } sayHi() { alert(this.name); }}let user = new User("John");user.sayHi();  - 자바스크립트에서 ..

Sub Class(Inheritance)
(심층)자바스크립트2024. 9. 4. 04:40Sub Class(Inheritance)

- Sub Class(Inheritance) 부모 Class를 자식 Class에 확장할 수 있다.부모 Class에 있던 기능을 토대로 자식 Class를 만들 수 있는 것이다.=> 확장하기 위하여 extends 키워드를 사용하면 된다.

ES6 Classes
(심층)자바스크립트2024. 9. 4. 04:21ES6 Classes

ES6에 나온 Class를 사용하여 더 쉽게 OOP를 구현할 수 있다.이것은 문법을 OOP 방식을 사용하지만 내부에서 prototype을 사용하여 작동한다.  생성자 함수로 객체를 만들었을 때는생성자 함수에 넣어둔 메소드가 인스턴스 객체 자체에 포함되어 있었지만,Class의 경우 Class 안에 넣어둔 메소드가 바로 프로토타입에 들어가게 된다. class Person { constructor(name, email, birthday) { this.name = name; this.email = email; this.birthday = new Date(birthday); } introduce() { return `Hello my name is ${this.name}`; }}cons..

javascript prototype
(심층)자바스크립트2024. 9. 4. 03:43javascript prototype

let user = { name: "John", age : 45}console.log(user.name);// Johnconsole.log(user.hasOwnProperty("email"));// false - hasOwnProperty는 어디서 왔나요? 현재 user 객체 변수에는 두 개의 속성(name, age)만 있는데hasOwnProperty는 어디서 나온 것일까?(객체 내부에는 메소드가 없다.) user 객체 변수를 콘솔로 찍어보면, [[Prototype]] : Object라는 것을 확인할 수 있다.아래를 내리다보면, hasOwnProperty라는 메소드를 찾을 수 있다.그리고 우리는 이것을 가져다 사용할 수 있다.=> 모든 객체는 global Object prototype을 가지며, 이것..

OOP(Object-oriented-programming)
(심층)자바스크립트2024. 9. 3. 17:42OOP(Object-oriented-programming)

- OOP(Object-oriented-programming)이란? 객체 지향 프로그래밍(OOP)은 Java 및 C++을 비롯한 많은 프로그래밍 언어의 기본이 되는프로그래밍 패러다임이다.객체 지향 프로그래밍은 여러 개의 독립된 단위 "객체"들의 모임으로 컴퓨터 프로그램을 파악한다.=> 객체 지향 프로그래밍은 객체들의 모임이다. 객체 지향 프로그래밍이 나오기 이전에는명령어의 목록을 나열(절차 지향)하는 기능 구현을 목적으로 작성했지만이렇게 코드를 길게 작성하다 보면 매우 알아보기 힘든 복잡한 코드가 만들어진다.그래서 하나의 문제를 해결을 위한 독립된 단위인 객체로 만들었으며,이 객체로 인해 알아보기 쉽고 재사용성이 높아졌다.  내부에 있는 것들을 모두 이해하지 못하여도사용하기를 원하는 이름의 메소드만 알면..

Event 종류
(심층)자바스크립트2024. 9. 3. 15:38Event 종류

- Event 종류    1. Mouse Event  const submitBtn = document.querySelector(".submit-btn");const form = document.querySelector("form");const title = document.querySelector("h2");// EVENTsubmitBtn.addEventListener("click", handleEvent);submitBtn.addEventListener("dblclick", handleEvent);submitBtn.addEventListener("mousedown", handleEvent); // 요소를 클릭했을 때submitBtn.addEventListener("mouseup", handleEvent..

728x90
반응형
image