JS मिक्सिन्स

एक mixin अतिरिक्त क्षमताओं का एक bundle है जिसे आप किसी class में मिला सकते हैं, जैसे अलग-अलग ice creams में sprinkles डालना। यह objects को बिना किसी सख्त family tree के skills साझा करने देता है।

In this page:

Mixin क्या है?
कई Mixins
this के साथ Mixin Methods
Duplicate Code से बचना
Factory के साथ Mixin

Syntax

javascript

const mixin = {
  methodName() {
    // shared behavior
  }
};
Object.assign(ClassName.prototype, mixin);

Mixin क्या है?

एक mixin किसी object से दूसरे object में reusable methods जोड़ने का एक तरीका है। चूंकि JavaScript prototype chain के ज़रिए सिर्फ single inheritance support करता है, mixins कई independent sources से व्यवहार मिलाने का आम workaround हैं।

उदाहरण: What Is a Mixin?

javascript

// Declare the constant `canFly`, set to `{ fly() { console.log("Flying"); } }`
// Declare the constant `canFly`, set to `{ fly() { console.log("Flying"); } }`
const canFly = { fly() { console.log("Flying"); } };
// Declare the constant `bird`, set to `{}`
// Declare the constant `bird`, set to `{}`
const bird = {};
// Call `Object.assign(bird, canFly)`
// Call `Object.assign(bird, canFly)`
Object.assign(bird, canFly);
// Call `bird.fly()`
// Call `bird.fly()`
bird.fly();

कई Mixins

आप कई mixin objects के methods को एक target object में मिला सकते हैं। Object.assign(target, mixin1, mixin2) एक साथ कई mixins लागू करने का आम तरीका है, जो हर एक की अपनी enumerable properties को target object पर copy करता है।

उदाहरण: Multiple Mixins

javascript

// Declare the constant `canSwim`, set to `{ swim() { console.log("Swimming"); } }`
// Declare the constant `canSwim`, set to `{ swim() { console.log("Swimming"); } }`
const canSwim = { swim() { console.log("Swimming"); } };
// Declare the constant `canFly`, set to `{ fly() { console.log("Flying"); } }`
// Declare the constant `canFly`, set to `{ fly() { console.log("Flying"); } }`
const canFly = { fly() { console.log("Flying"); } };
// Declare the constant `duck`, set to `{}`
// Declare the constant `duck`, set to `{}`
const duck = {};
// Call `Object.assign(duck, canSwim, canFly)`
// Call `Object.assign(duck, canSwim, canFly)`
Object.assign(duck, canSwim, canFly);
// Call `duck.swim()`
// Call `duck.swim()`
duck.swim();
// Call `duck.fly()`
// Call `duck.fly()`
duck.fly();

this के साथ Mixin Methods

Mixin methods methods पाने वाले object की properties access करने के लिए this इस्तेमाल कर सकते हैं।

चूंकि Object.assign properties को सीधे target पर copy करता है, किसी mixin द्वारा जोड़े गए methods बिल्कुल वैसे ही व्यवहार करते हैं जैसे खुद object पर define किए गए methods, उनकी this binding सहित।

उदाहरण: Mixin Methods with this

javascript

// Declare the constant `canGreet`, set to `{ greet() { console.log("Hi, I'm " + this.name); } }`
// Declare the constant `canGreet`, set to `{ greet() { console.log("Hi, I'm " + this.name); } }`
const canGreet = { greet() { console.log("Hi, I'm " + this.name); } };
// Declare the constant `user`, set to `{ name: "Sam" }`
// Declare the constant `user`, set to `{ name: "Sam" }`
const user = { name: "Sam" };
// Call `Object.assign(user, canGreet)`
// Call `Object.assign(user, canGreet)`
Object.assign(user, canGreet);
// Call `user.greet()`
// Call `user.greet()`
user.greet();

Duplicate Code से बचना

Mixins व्यवहार के छोटे टुकड़े साझा करने में मदद करते हैं। ये तब उपयोगी हैं जब कोई class hierarchy समस्या पर फिट नहीं बैठती।

यह कई असंबंधित classes में एक ही method definition को duplicate होने से बचाता है, उस shared व्यवहार के लिए एक single source of truth बनाए रखते हुए।

उदाहरण: Avoiding Duplicate Code

javascript

// Declare the constant `canFly`, set to `{ fly() { console.log(this.name + " flies"); } }`
// Declare the constant `canFly`, set to `{ fly() { console.log(this.name + " flies"); } }`
const canFly = { fly() { console.log(this.name + " flies"); } };
class Bird { constructor(name) { this.name = name; } }
// Call `Object.assign(Bird.prototype, canFly)`
// Call `Object.assign(Bird.prototype, canFly)`
Object.assign(Bird.prototype, canFly);
// Create a new `Bird` instance with `"Tweety").fly(`
// Create a new `Bird` instance with `"Tweety").fly(`
new Bird("Tweety").fly();

Factory के साथ Mixin

एक factory function objects बना सकता है और उन पर उपयोगी mixins लागू कर सकता है। बनते समय mixins लागू करने वाला एक factory function गारंटी देता है कि उस factory से बना हर object लगातार वही combined व्यवहार पाता है।

उदाहरण: Mixin with a Factory

javascript

// Declare the constant `canFly`, set to `{ fly() { console.log("Flying"); } }`
// Declare the constant `canFly`, set to `{ fly() { console.log("Flying"); } }`
const canFly = { fly() { console.log("Flying"); } };
// Define the function `createBird` taking `name`
// Define the function `createBird` taking `name`
function createBird(name) {
  // Declare the constant `bird`, set to `{ name }`
  // Declare the constant `bird`, set to `{ name }`
  const bird = { name };
  // Return `Object.assign(bird, canFly)` from this function
  // Return `Object.assign(bird, canFly)` from this function
  return Object.assign(bird, canFly);
}
// Call `createBird("Robin").fly()`
// Call `createBird("Robin").fly()`
createBird("Robin").fly();

Live Example

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson JS Object.create Next Lesson → JS WeakMap and WeakSet

JS मिक्सिन्स

Mixin क्या है?

कई Mixins

this के साथ Mixin Methods

Duplicate Code से बचना

Factory के साथ Mixin

Chapter Quiz — Complete all 6 topics to unlock

Login to run this code