#14. Class

Seulyi Yoo·2022년 7월 9일
0

javascript grammar

목록 보기
14/20
post-thumbnail
const User = function(name, age) {
  this.name = name;
  this.age = age;
  this.showName = function(){
    console.log(this.name);
  };
};

const mike = new User("Mike", 30);

// ES6
class User2 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  showName(){
    console.log(this.name);
  }
}

const tom = new User2("Tom", 19);

const User = function(name, age) {
  this.name = name;
  this.age = age;
  // this.showName = function(){
  //   console.log(this.name);
  // };
};

User.prototype.showName = function(){
  console.log(this.name);
};

const mike = User("Mike", 30); // undefined

// ES6
class User2 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  showName(){
    console.log(this.name);
  }
}

const tom = User2("Tom", 19); // Error!


상속

// extends

class Car {
  constructor(color){
    this.color = color;
    this.wheels = 4;
  }
  drive(){
    consol.log("drive..");
  }
  stop(){
    console.log("STOP!");
  }
}

class Bmw extends Car {
  park(){
    console.log("PARK");
  }
}

const z4 = new Bmw("blue");


메소드 오버라이딩(method overriding)

// method overriding

class Car {
  constructor(color){
    this.color = color;
    this.wheel = 4;
  }
  drive(){
    console.log("drive..");
  }
  stop(){
    console.log("STOP!");
  }
}

class Bmw extends Car {
  park(){
    console.log("PARK");
  }
  stop(){
    super.stop(); // 부모요소의 메소드 사용!
    console.log("OFF");
  }
}

const z4 = new Bmw("blue");


오버라이딩(overriding)

// overriding

class Car {
  constructor(color){
    // {}
    this.color = color;
    this.wheel = 4;
  }
  drive(){
    console.log("drive..");
  }
  stop(){
    console.log("STOP!");
  }
}

class Bmw extends Car {
  // constructor(...args) {
  //  super(...args);
  // }
  constructor(color){
    super(color);
    this.navagation = 1;
  }
  park(){
    console.log("PARK");
  }
}

const z4 = new Bmw("blue");

profile
성장하는 개발자 유슬이 입니다!

0개의 댓글