본문 바로가기

Frontend136

[Javascript] Class - static(정적 메서드, 정적 프로퍼티) 정적 메서드 ✔️ prototype이 아닌 클래스 함수 자체에 메서드를 설정하는 것. ✔️ static 키워드를 붙여 만들 수 있다. ✔️ 특정한 객체가 아닌 클래스에 속한 함수를 구현하고자 할 때 사용 ❓prototype 안에 설정하는 메서드가 아니라고 했느데... ❓ 타입스크립트에서와의 차이 class User { static staticMethos(){ alert(this === User); } } //class User를 객체로 만들어주지 않아도 호출할 수 있다. User.staticMethod(); // true 정적 프로퍼티 ✔️ 일반 클래스 프로퍼티와 유사하게 생겼지만 static 키워드가 추가된다. ❓ new 로 객체로 만들어주지 않아도... static을 붙이면 이 클래스 함수 자체의 메.. 2022. 1. 3.
[Javascript] 클래스 상속 클래스 상속 왜 필요한건데? ✔️ 기존에 존재하는 클래스를 토대로 새로운 클래스를 만들고 싶을 때 사용함. extends 키워드 ✔️ 다른 클래스로 extends 키워드를 통해 프로토타입을 상속시켜줄 수 있다. class Animal { constructor(name){ this.speed = 0; this.name = name; } run(speed){ this.speed = speed; alert(`${this.name} 은 속도 ${this.speed}로 달립니다.`); } stop(){ this.speed = 0; alert(`${this.name} 이 멈췄습니다.`); } } let animal = new Animal('동물'); //이러한 Animal의 프로퍼티를 상속받는 Rabbit clas.. 2021. 12. 30.
[Javascript] 클래스 클래스는 왜 사용하는걸까? ✔️ 동일한 종류의 객체를 여러 개 생성할 때 생성자 함수를 통해 편리하게 객체를 만들었다. ✔️ class 를 이용하면 객체 지향 프로그래밍에서 사용되는 다양한 기능을 자바스크립트에서 쓸 수 있다. ✔️ 그 기능이 뭔데? 기본문법 ✔️ new에 의해 constructor은 자동으로 실행된다. ✔️ constructor에서 객체를 초기화한다는게 이해가 잘 안됨. class User { constructor(name){ this.name = name; } sayHi(){ alert(this.name); } } let userJohn = new User('John'); 클래스 표현식 ✔️ 정의, 전달, 반환, 할당 //클래스 표현식 let User = class { sayHi(){.. 2021. 12. 30.
[Javascript] 프로토타입 상속 프로토타입이란? ✔️ 다른 객체의 원형이 되는 객체 ? ✔️ 객체들이 기본적으로 가지고 있는 프로퍼티라고 생각하면 쉬운 것 같다. ✔️ 객체에서 프로퍼티를 읽으려고 하는데 없으면 이 프로토타입에서 프로퍼티를 찾게 된다. ✔️ 객체의 프로퍼티가 존재하면 프로토타입까지 탐색하지 않고 멈춘다. hasOwnProperty 는 프로토타입에서 프로토타입의 존재 유무를 알려주는 메소드이지만 개발자가 먼저 선언해버리면 그 코드가 우선적으로 발현된다. const user = { name:'Mike', hasOwnProperty:function(){ console.log('haha'); } }; user.hasOwnProperty(); //haha 프로토타입 상속이란? ✔️ __proto__를 통해 다른 객체의 프로퍼티를.. 2021. 12. 29.
[Javascript] 프로퍼티 getter 와 setter getter와 setter를 왜 쓰는걸까? ✔️ 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 나뉜다. ✔️ 접근자 프로퍼티의 본질은 함수이기 때문에 데이터 프로퍼티와는 조작 방법이 다르다. ✔️ 접근자 프로퍼티는 getter와 setter를 이용해 조작해 접근할 수 있다. ➖ getter : 특정 값을 조회할 때 실행되는 함수 ➖ setter : 특정 값이 변경되어 질 때 실행되는 함수 let user = { name:'John', surname: 'Smith', //기본적으로 값을 조회할 때 사용한다. get fulName(){ return `${this.name} ${this.surname}`; }, //value에 새로운 값이 들어가 변경되면 아래의 함수가 실행된다. set fulName(valu.. 2021. 12. 28.
[Javascript] Object - new 연산자와 생성자 함수 생성자 함수 ✔️ 함수 이름의 첫 글자는 대문자 ✔️ 반드시 'new' 연산자를 붙여 실행 ✔️ 재사용할 수 있는 객체 생성 코드를 구현. ✔️ 객체 리터럴{...} 을 사용하면 쉽게 객체를 얻을 수 있지만 유사한 객체를 여러개 만들어야하는 상황에서 유용. ✔️ function User(name){ this.name = name; this.isAdmin = false; } let user = new User('young'); console.log(user.name); //young console.log(user.isAdmin); //false 생성자와 내 메서드 function User(name){ this.name = name; this.sayHi = function(){ alert(this.name).. 2021. 12. 28.
반응형

티스토리툴바