2022.05.17
생성자 함수 new Function()
생성자 함수를 PascalCase(파스칼케이스)로 써줌
생성자함수임을 쉽게 알아보기 위해 관행적으로 사용되어지고 있음
function User(first, last) {
this.firstName = first
this.lastName = last
// 메서드. 객체 리터럴 안에 함수표현식
// 객체의 프로퍼티(속성)에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해줌
this.getFullName = function () {
return `${this.firstName} ${this.lastName}`
}
// 속성과 메서드를 합해 *맴버*라 부름
}
// 자바스크립트 = 프로토탑입기반의 프로그래밍언어
// firstName, lastName은 user라는 생성자 함수가 만들어질때마다
// 다른 내용이 들어오기때문에 통일해서 메모리를 관리하기 어렵다
// getFullName 로직은 같기 때문에 통일화 해서 메모리는 좀 더 효율적으로 관리해줄 수 있다
// user함수에 숨어져있는 프로토타입속성에 getFullName을 할당해주면
// 몇개의 객체를 만들더라도 getFullName의 함수는 메모리에 딱 한번만 만들어짐
// 그래서 getFullName()메소드는 위에 함수를 참조한다
// 위와같은 기능을 자바스크립트의 클래스라 부른다
// 생성자함수로 인스턴스를 만들어내는 기능을 자바스크립트의 클래스라 부른다
User.prototype.getFullName = function () {
return `${this.firstName} ${this.lastName}`
}
// sunny라는 변수에 인스턴스(instance)로 정보가 들어가지고 그 인스턴스틑 하나의 객체데이터
// 생성자함수로 실행한 결과를 반환해서 할당된 그 변수를 생성자 함수의 인스턴스라 부름
// 생성자 함수. 객체데이터 생성
// sunny, amy, jessi => 인스턴스
const sunny = new User('Sunny', 'Yu');
const amy = new User('Amy', 'Park');
const jessi = new User('Jessi', 'Kim');
// .과 []는 동일하게 동작
// .getFullName() 메소드 실행
console.log(sunny['getFullName']()) //Sunny Yu
console.log(amy.getFullName()) //Amy Park
console.log(jessi.getFullName()) //Jessi Kimthis
일반(Normal)함수는 _호출 위치_에 따라 this정의
화살표(Arrow)함수는 자신이 선언된 _함수 범위_에서 this정의
const sunny = {
name: 'Sunny',
//익명함수 메소드
normal: function () {
console.log(this.name)
},
// 화살표 함수 메소드
// 화살표 함수가 선언된 범위 주변에 함수가 보이지 않아서 undefined가 출력
arrow: () => {
console.log(this.name)
}
}
// sunny객체의 nromal, arrow 메소드 실행
sunny.normal()
sunny.arrow()
const jessi = {
name: 'Jessi',
//normal이라는 함수데이터가 normal에 할당되고 있다.
//뒤에 소괄호()가 없기떄문에 호출이 아니다
normal: sunny.normal,
arrow: sunny.arrow
}
jessi.normal()
jessi.arrow()//파스칼케이스로 작성된 것만 봐도 생성자 함수라는걸 눈치채주기
function User(name) {
this.name = name
}
// User함수에 프로토타입 normal메소드
User.prototype.normal = function () {
console.log(this.name)
}
User.prototype.arrow = () => {
console.log(this.name)
}
//sunny라는 인스턴스 생성. 즉, 변수
const sunny = new User('Sunny')
sunny.normal()
sunny.arrow()
//name과 timeout이라는 속성값, 메소드가 작성되있음
const timer = {
name: 'Coffee',
timeout: function () {
// setTimeout(함수, 시간)
setTimeout(() => {
console.log(this.name)
}, 2000)
}
}
timer.timeout()
const timer = {
name: 'Coffee',
timeout: function () {
// setTimeout(함수, 시간)
setTimeout(function () {
console.log(this.name)
}, 2000)
}
}
timer.timeout() //undefined
// 일반 함수는 호출 위치에 따라서 this 정의되기때문에
// setTimeout로직 어딘가에서 실행이되기때문에ES6 Classes
const sunny = {
name: 'Sunny',
//익명함수 메소드 function키워드로 만들어진 일반함수와 개념이 같다
//소괄호와 함께 중괄호가 있으면
normal() {
console.log(this.name)
},
arrow: () => {
console.log(this.name)
}
}
sunny.normal()
sunny.arrow()
function User(first, last) {
this.firstName = first
this.lastName = last
}
User.prototype.getFullName = function () {
return `${this.firstName} ${this.lastName}`
}
class User {
//내부함수
// constructor: function () {} 와 같음
constructor(first, last) {
this.firstName = first
this.lastName = last
}
getFullName() {
return `${this.firstName} ${this.lastName}`
}
}
const sunny = new User('Sunny', 'Yu');
const amy = new User('Amy', 'Park');
const jessi = new User('Jessi', 'Kim');
console.log(sunny)
console.log(amy.getFullName())
console.log(jessi.getFullName())클래스 확장(상속)
class Vehicle {
//constructor: function () {}
constructor(name, wheel) {
this.name = name
this.wheel = wheel
}
}
const myVehicle = new Vehicle('운송수단', 2)
console.log(myVehicle)
//extends확장(상속)
class Bicycle extends Vehicle {
constructor(name, wheel) {
//super는 확장된 Vehicle을 의미
super(name, wheel)
}
}
const myBicycle = new Bicycle('삼천리', 2)
const daughterBicylce = new Bicycle('세발', 3)
console.log(myBicycle)
console.log(daughterBicylce)
class Car extends Vehicle {
constructor(name, wheel, license) {
super(name, wheel)
this.license = license
}
}
const myCar = new Car('벤츠', 4, true)
const daughtersCar = new Car('포르쉐', 4, false)
console.log(myCar)
console.log(daughtersCar)'프론트엔드 > JavaScript' 카테고리의 다른 글
| 자바스크립트 콜스택(Call Stack) (0) | 2022.05.16 |
|---|---|
| 자바스크립트 for문과 while문 (0) | 2022.05.15 |
| 자바스크립트 구조분해할당과 전개연산자 (0) | 2022.04.28 |
| 자바스크립트 객체(Object)데이터 (0) | 2022.04.28 |
| 자바스크립트 날짜와 시간 (0) | 2022.04.27 |
