화살표함수, 클래스, 객체확장표현식

//클래스

// ES5 문법
function Shape(x, y) {
  this.name = "Shape";
  this.move(x, y);
}
// static 타입 선언 예제
Shape.create = function (x, y) {
  return new Shape(x, y);
};
//인스턴스 함수를 선언하는 예제
Shape.prototype.move = function (x, y) {
  this.x = x;
  this.y = y;
};
Shape.prototype.area = function () {
  return 0;
};

// 혹은
Shape.prototype = {
  move: function (x, y) {
    this.x = x;
    this.y = y;
  },
  area: function () {
    return 0;
  },
};

var s = new Shape(0, 0);
var s2 = Shape.create(0, 0);
s.area(); // 0

function Circle(x, y, radius) {
  Shape.call(this, x, y);
  this.name = "Circle";
  this.radius = radius;
}
Object.assign(Circle.prototype, Shape.prototype, {
  area: function () {
    return this.radius * this.radius;
  },
});

var c = new Circle(0, 0, 10);
c.area(); // 100

// ES6 예제
class Shape {
  static create(x, y) {
    return new Shape(x, y);
  }
  name = "Shape";
  //ES7에 포함된 클래스 확장표현으로 constructor() 함수 안에
  //this.name = 'Shape'로 클래스 변수를 선언하는 것과 동일한 작업을 수행한다.

  constructor(x, y) {
    this.move(x, y);
  }
  move(x, y) {
    this.x = x;
    this.y = y;
  }
  area() {
    return 0;
  }
}

var s = new Shape(0, 0);
var s1 = Shape.create(0, 0);
s.area(); // 0

//ES6는 다중상속이나 인터페이스는 지원x
class Circle extends Shape {
  constructor(x, y, radius) {
    super(x, y);
    this.radius = radius;
  }
  area() {
    if (this.radius === 0) return super.area();
    return this.radius * this.radius;
  }
}

var c = new Circle(0, 0, 10);
c.area(); // 100​

//객체 확장 표현식과 구조 분해 할당

// ES5의 예
var x = 0;
var y = 0;

var obj = { x: x, y: y }; //대입한 객체를 보면 키 이름이 키값과 동일하다.(각각 x,y)

var randomKeyString = "other";
var combined = {};
combined["one" + randomKeyString] = "some value"; //연산 결과로 키값을 대입할 때는 키값을 지정할 코드를 추가로 작성해야한다.

var obj2 = {
  //객체에 함수를 추가할 때는 변수에 함수를 할당해야 한다.
  methodA: function () {
    console.log("A");
  },
  methodB: function () {
    return 0;
  },
};

// ES6의 예
var x = 0;
var y = 0;
var obj = { x, y }; //객체의 변수를 선언할 때 키값을 생략하면 자동으로 키의 이름으로 키값을 지정한다.

var randomKeyString = "other";
var combined = {
  ["one" + randomKeyString]: "some value", //객체 생성 블록 안에 대괄호([])를 사용하여 표현식을 작성하면 추가하여 계산된 키값을 생성할 수 있다.
};

var obj2 = {
  x,
  methodA() {
    console.log("A");
  }, //function 키워드를 생략하여 함수를 선언할 수 있다.
  methodB() {
    return 0;
  },
};

//화살표 함수 (arrow function)
//=> 기호로 함수를 선언한다.

function add(first, second) {
  return first + second;
}

var add = function (first, second) {
  return first + second;
};

var add = function add(first, second) {
  return first + second;
};

//ES6 화살표 함수
var add = (first, second) => {
  return first + second;
};
// this scope를 전달한 예
var self = this;
var addThis = function (first, second) {
  return self.value + first + second;
};

var addThis = (first, second) => first + second;

function addNumber(num) {
  return function (value) {
    return num + value;
  };
}
// 화살표 함수로 변환한 예
var addNumber = (num) => (value) => num + value;

var addTwo = addNumber(2);
var result = addTwo(4); // 6

// bind함수를 통해 this scope를 전달한 예
//화살표 함수는 콜백 함수의 this범위로 생기는 오류를 피하기 위해 bind()함수를 사용하여
//this객체를 전달하는 과정을 포함하고 있다.
class MyClass {
  value = 10;
  constructor() {
    var addThis2 = function (first, second) {
      return this.value + first + second;
    }.bind(this);
    var addThis3 = (first, second) => this.value + first + second;
  }
}