뭐야, 믹신스?

소개

내 블로그의 모든 블로그 게시물을 통해 우리는 프로토타입 상속이 JavaScript에서 합리적으로 잘 작동한다는 것을 깨달았습니다. 우리는 알고 있습니다. 그러나 각 개체에는 [[프로토타입]]이 하나만 있습니다. 이는 개체가 다른 하나의 개체에서만 상속할 수 있음을 의미합니다. 하나의 다른 클래스에서만 확장할 수 있으므로 클래스도 마찬가지입니다. JavaScript는 다중 상속을 지원하지 않습니다.

mixin can은 mixin 클래스에서 상속하지 않고 클래스에서 사용할 수 있는 메서드가 있는 클래스입니다. 상속을 사용하지 않고 객체에 속성을 추가하는 방법입니다.

이론상으로는 다음과 같이 보일 것입니다.

클래스의 상속

class B extends A {}

상속이지만 Mixin(M1)이 있는 경우

class B extends A with M1 {}

여러 Mixin을 사용한 상속(M1, ​​M2, M3)

class B extends A with M1, M2, M3 {}

믹스인의 완벽한 비법 소스는 Object.assign 에 있습니다!

구현

개체의 경우

cconst employee = {
    name: "John Smith",
    age: 30,
    gender: "male"
}

const payroll = {
    duration: "monthly",
    amount: 7000,
    currency: "dollars"
}

const benefits = {
    retirement: true,
    savings: true,
    health: true,
    dental: false
}

const employeeProfile = Object.assign({}, employee, payroll, benefits);

console.log(employeeProfile);

콘솔의 출력은 다음과 같습니다.

{ name: 'John Smith',
  age: 30,
  gender: 'male',
  duration: 'monthly',
  amount: 7000,
  currency: 'dollars',
  retirement: true,
  savings: true,
  health: true,
  dental: false }

예, 이것이 믹스인이 하는 일입니다. 이를 통해 서로 다른 객체의 속성을 단일 객체로 결합할 수 있습니다(가장 간단한 용어로). Object.assign는 하나 이상의 소스 개체에서 대상 개체로 모든 열거 가능한 속성을 복사합니다. 첫 번째 인수는 대상 개체이고 그 뒤에 모든 소스 개체가 있습니다.

수업용

let employeeDetails = {
    returnName() {
        console.log(`The employee is ${this.name}`);
    },
    subscribesToDental () {
        console.log(`Employee ${this.name} does ${(this.dental) ? "" : "not "}subscribe to dental benefits`);
    }
};

class Employee {
    name;
    dental;
    constructor(name, dental) {
        this.name = name;
        this.dental = dental;
    }
}

Object.assign(Employee.prototype, employeeDetails);

new Employee("Parwinder", false).returnName();
// The employee is Parwinder
new Employee("Parwinder", false).subscribesToDental();
// Employee Parwinder does not subscribe to dental benefits
new Employee("Robert", true).subscribesToDental();
// Employee Robert does subscribe to dental benefits

🚨 자바스크립트는 이제 super 키워드 사용을 지원합니다. 믹신은 어휘적으로 바인딩되어 있으므로 super를 지원할 수 없습니다!