ES2015 (ES6) `শ্রেণি` সিনট্যাক্স কী সুবিধা দেয়?

Question

ES6 ক্লাস সম্পর্কে আমার অনেক প্রশ্ন আছে।

classসিনট্যাক্স ব্যবহার করে কী লাভ ? আমি পড়েছি যে পাবলিক / প্রাইভেট / স্ট্যাটিক ES7 এর অংশ হবে, এটি কি কারণ?

তদুপরি, classঅন্য ধরণের ওওপি বা এটি এখনও জাভাস্ক্রিপ্টের প্রোটোটাইপিকাল উত্তরাধিকার? আমি কি এটি ব্যবহার করে পরিবর্তন করতে পারি .prototype? অথবা এটি ঠিক একই জিনিস তবে এটির ঘোষণা করার দুটি ভিন্ন উপায়।

গতির সুবিধা কি আছে? আপনার কাছে যদি বড় অ্যাপের মতো একটি বড় অ্যাপ্লিকেশন থাকে তবে এটি বজায় রাখা / বোঝা আরও সহজ?

Comments

কেবল আমার নিজস্ব মতামত: নতুন সিনট্যাক্সটি বোঝা অনেক সহজ এবং এর জন্য পূর্বের অভিজ্ঞতার প্রয়োজন পড়বে না (বিশেষত যেহেতু বেশিরভাগ লোকেরা ওওপি ভাষা থেকে এসেছেন)। তবে প্রোটোটাইপ অবজেক্ট মডেলটি জানার পক্ষে মূল্যবান এবং আপনি কখনই শিখতে পারবেন না যে নতুন সিনট্যাক্সটি ব্যবহার করে, প্রোটোটাইপ কোডটিতে কাজ করা আরও চ্যালেঞ্জ হবে যদি আপনি ইতিমধ্যে এটি না জেনে থাকেন। সুতরাং আমি যখন আমার পছন্দ হয় তখন পুরানো বাক্য

— জাচ স্মিথ

Answer 1

নতুন classসিনট্যাক্স আপাতত বেশিরভাগ সিনট্যাকটিক চিনি। (তবে, আপনি জানেন, ভাল ধরণের চিনি) ES2015-ES2020 তে এমন কিছুই নেই classযা আপনি কনস্ট্রাক্টর ফাংশন এবং Reflect.construct(সাবক্লাসিং Errorএবং including সহ Array) করতে পারবেন না এমন করতে পারে । (এটা হল সম্ভবত সেখানে ES2021 মধ্যে কিছু বিষয় আছে যা আপনি করতে পারেন হতে হবে classযে আপনি অন্যথায় ব্যবহার করতে পারবেন না: ব্যক্তিগত ক্ষেত্র , ব্যক্তিগত পদ্ধতি , এবং স্ট্যাটিক ক্ষেত্র / ব্যক্তিগত স্ট্যাটিক পদ্ধতি ।)

তদুপরি, classঅন্য ধরণের ওওপি বা এটি এখনও জাভাস্ক্রিপ্টের প্রোটোটাইপিকাল উত্তরাধিকার?

এটি যদি আমাদের নির্মাণকারী ফাংশন ( new Fooইত্যাদি) ব্যবহার করতে পছন্দ করে তবে ক্লিনার এবং আরও সুবিধাজনক সিনট্যাক্স সহ আমাদের সর্বদা একই প্রোটোটাইপিকাল উত্তরাধিকার ছিল । (বিশেষতঃ ES5 এবং এর আগে আপনি যেটা করতে পারেননি তা থেকে প্রাপ্ত হওয়ার ক্ষেত্রে Arrayবা Errorআপনি এখন পুরানো ES5- শৈলীর সাথে নয় Reflect.construct[ স্পট , MDN ] দিয়ে পারেন ))

আমি কি এটি ব্যবহার করে পরিবর্তন করতে পারি .prototype?

হ্যাঁ, আপনি prototypeক্লাসটি তৈরি করার পরেও ক্লাসের নির্মাণকারীর উপর অবজেক্টটি সংশোধন করতে পারেন । উদাহরণস্বরূপ, এটি পুরোপুরি আইনী:

class Foo {
    constructor(name) {
        this.name = name;
    }
    
    test1() {
        console.log("test1: name = " + this.name);
    }
}
Foo.prototype.test2 = function() {
    console.log("test2: name = " + this.name);
};

গতির সুবিধা কি আছে?

এটির জন্য একটি নির্দিষ্ট আইডিয়ম সরবরাহ করে, আমি মনে করি এটি সম্ভবত সম্ভব যে ইঞ্জিনটি আরও ভাল কাজটি করতে পারে। তবে তারা ইতিমধ্যে অপ্টিমাইজ করাতে খুব ভাল, আমি উল্লেখযোগ্য পার্থক্য আশা করব না।

ES2015 (ES6) classসিনট্যাক্স কী সুবিধা দেয় ?

সংক্ষেপে: আপনি যদি প্রথমে কনস্ট্রাক্টর ফাংশন ব্যবহার না করেন তবে পছন্দসই Object.createবা অনুরূপ, আপনার classপক্ষে কার্যকর নয়।

আপনি যদি কনস্ট্রাক্টর ফাংশন ব্যবহার করেন তবে এর কিছু সুবিধা রয়েছে class:

• সিনট্যাক্সটি সহজ এবং ত্রুটি-প্রবণ কম।

• এটা অনেক সহজ হয় (এবং আবার, কম ত্রুটি-প্রবণ) পুরানোর সঙ্গে বেশি নতুন সিনট্যাক্স ব্যবহার উত্তরাধিকার শ্রেণীবিন্যাসের সেট আপ করার জন্য।

• classnewকনস্ট্রাক্টর ফাংশনটি ব্যবহার করতে ব্যর্থ হওয়ার সাধারণ ত্রুটি থেকে আপনাকে রক্ষা করে (কনস্ট্রাক্টরের thisপক্ষে বৈধ অবজেক্ট না হলে কনস্ট্রাক্টর একটি ব্যতিক্রম নিক্ষেপ করে )।

• কোনও পদ্ধতির প্যারেন্ট প্রোটোটাইপের সংস্করণটি কল করা পুরানো ( বা super.method()পরিবর্তে ) এর চেয়ে নতুন সিনট্যাক্সের সাথে অনেক সহজ ।ParentConstructor.prototype.method.call(this)Object.getPrototypeOf(Object.getPrototypeOf(this)).method.call(this)

শ্রেণিবিন্যাসের জন্য এখানে একটি বাক্য গঠন তুলনা:

// ***ES2015+**
class Person {
    constructor(first, last) {
        this.first = first;
        this.last = last;
    }

    personMethod() {
        // ...
    }
}

class Employee extends Person {
    constructor(first, last, position) {
        super(first, last);
        this.position = position;
    }

    employeeMethod() {
        // ...
    }
}

class Manager extends Employee {
    constructor(first, last, position, department) {
        super(first, last, position);
        this.department = department;
    }

    personMethod() {
        const result = super.personMethod();
        // ...use `result` for something...
        return result;
    }

    managerMethod() {
        // ...
    }
}

উদাহরণ:

// ***ES2015+**
class Person {
    constructor(first, last) {
        this.first = first;
        this.last = last;
    }

    personMethod() {
        return `Result from personMethod: this.first = ${this.first}, this.last = ${this.last}`;
    }
}

class Employee extends Person {
    constructor(first, last, position) {
        super(first, last);
        this.position = position;
    }

    personMethod() {
        const result = super.personMethod();
        return result + `, this.position = ${this.position}`;
    }

    employeeMethod() {
        // ...
    }
}

class Manager extends Employee {
    constructor(first, last, position, department) {
        super(first, last, position);
        this.department = department;
    }

    personMethod() {
        const result = super.personMethod();
        return result + `, this.department = ${this.department}`;
    }

    managerMethod() {
        // ...
    }
}

const m = new Manager("Joe", "Bloggs", "Special Projects Manager", "Covert Ops");
console.log(m.personMethod());

বনাম

// **ES5**
var Person = function(first, last) {
    if (!(this instanceof Person)) {
        throw new Error("Person is a constructor function, use new with it");
    }
    this.first = first;
    this.last = last;
};

Person.prototype.personMethod = function() {
    // ...
};

var Employee = function(first, last, position) {
    if (!(this instanceof Employee)) {
        throw new Error("Employee is a constructor function, use new with it");
    }
    Person.call(this, first, last);
    this.position = position;
};
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.employeeMethod = function() {
    // ...
};

var Manager = function(first, last, position, department) {
    if (!(this instanceof Manager)) {
        throw new Error("Manager is a constructor function, use new with it");
    }
    Employee.call(this, first, last, position);
    this.department = department;
};
Manager.prototype = Object.create(Employee.prototype);
Manager.prototype.constructor = Manager;
Manager.prototype.personMethod = function() {
    var result = Employee.prototype.personMethod.call(this);
    // ...use `result` for something...
    return result;
};
Manager.prototype.managerMethod = function() {
    // ...
};

সরাসরি উদাহরণ:

// **ES5**
var Person = function(first, last) {
    if (!(this instanceof Person)) {
        throw new Error("Person is a constructor function, use new with it");
    }
    this.first = first;
    this.last = last;
};

Person.prototype.personMethod = function() {
    return "Result from personMethod: this.first = " + this.first + ", this.last = " + this.last;
};

var Employee = function(first, last, position) {
    if (!(this instanceof Employee)) {
        throw new Error("Employee is a constructor function, use new with it");
    }
    Person.call(this, first, last);
    this.position = position;
};
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.personMethod = function() {
    var result = Person.prototype.personMethod.call(this);
    return result + ", this.position = " + this.position;
};
Employee.prototype.employeeMethod = function() {
    // ...
};

var Manager = function(first, last, position, department) {
    if (!(this instanceof Manager)) {
        throw new Error("Manager is a constructor function, use new with it");
    }
    Employee.call(this, first, last, position);
    this.department = department;
};
Manager.prototype = Object.create(Employee.prototype);
Manager.prototype.constructor = Manager;
Manager.prototype.personMethod = function() {
    var result = Employee.prototype.personMethod.call(this);
    return result + ", this.department = " + this.department;
};
Manager.prototype.managerMethod = function() {
    // ...
};        

var m = new Manager("Joe", "Bloggs", "Special Projects Manager", "Covert Ops");
console.log(m.personMethod());

আপনি দেখতে পাচ্ছেন, সেখানে প্রচুর পুনরাবৃত্তি এবং ভার্বোজের জিনিস যা ভুল পাওয়া সহজ এবং পুনরায় টাইপ করার জন্য বিরক্তিকর (যার জন্য আমি এটি করার জন্য একটি স্ক্রিপ্ট লিখেছিলাম , দিনের মধ্যেই)।

---

¹ "ES2015-ES2018 কিছুই যে নেই classযে আপনার কন্সট্রাকটর ফাংশন সঙ্গে ব্যবহার করতে পারবেন না এবং করতে পারেন Reflect.construct(তত্সহ subclassing Errorএবং Array)"

উদাহরণ:

// Creating an Error subclass:
function MyError(...args) {
  return Reflect.construct(Error, args, this.constructor);
}
MyError.prototype = Object.create(Error.prototype);
MyError.prototype.constructor = MyError;
MyError.prototype.myMethod = function() {
  console.log(this.message);
};

// Example use:
function outer() {
  function inner() {
    const e = new MyError("foo");
    console.log("Callng e.myMethod():");
    e.myMethod();
    console.log(`e instanceof MyError? ${e instanceof MyError}`);
    console.log(`e instanceof Error? ${e instanceof Error}`);
    throw e;
  }
  inner();
}
outer();

.as-console-wrapper {
  max-height: 100% !important;
}

Comments

আমি জানি না এটি একটি উপযুক্ত তুলনা কিনা। আপনি ক্রাফট সমস্ত ছাড়াই একটি অনুরূপ অবজেক্ট অর্জন করতে পারেন। এটি ধ্রুপদী উত্তরাধিকার আনুমানিক পরিবর্তে প্রোটোটাইপ চেইনের মাধ্যমে জেএস অবজেক্টের সংযোগ ব্যবহার করে। এটি করার জন্য আমি আপনার উপর ভিত্তি করে একটি সাধারণ উদাহরণ দেখিয়ে একটি টুকরো তৈরি করেছি ।

— জেসন কাস্টম

@ জেসনকাস্ট: হ্যাঁ, এটি একটি ন্যায্য তুলনা, কারণ আমি ES6 যা করে তা করার জন্য ES5 উপায়টি প্রদর্শন করছি class। জাভাস্ক্রিপ্ট নমনীয় যথেষ্ট আপনাকে ব্যবহার কন্সট্রাকটর কার্যাবলী সম্পাদন করেন না যে আপনি যদি না, যা কি করছো তুমি বলতে চাই, কিন্তু যে বিভিন্ন থেকে class- সমগ্র বিন্দু classজাভাস্ক্রিপ্ট মধ্যে প্রক্রিয়া সহজ সিউডো-শাস্ত্রীয় সম্পত্তি।

— টিজে ক্রাউডার

@ জেসনকাস্ট: হ্যাঁ, এটি অন্যরকম উপায়। আমি এটিকে "বেশি দেশীয়" বলব না (আমি জানি কাইল করেন, তবে এটি কাইল)। কন্সট্রাক্টর ফাংশনগুলি জাভাস্ক্রিপ্টের মৌলিক, সমস্ত বিল্ট-ইন প্রকারের দিকে নজর দিন (এন্টি-কনস্ট্রাক্টর গ্রুপটি কোনওভাবে Symbolমেসে উঠতে পরিচালিত হয়েছে )। তবে দুর্দান্ত জিনিসটি আবার হ'ল আপনি যদি সেগুলি ব্যবহার করতে না চান তবে আপনার দরকার নেই। আমি আমার কাজের মধ্যে দেখতে পাই যে কন্সট্রাক্টর ফাংশনগুলি অনেক জায়গায় এবং newস্পষ্টতার উন্নতির শব্দার্থতাত্ত্বিক অর্থগুলি বোঝায় ; এবং Object.createঅন্যান্য অনেক জায়গায় অর্থবোধ করে, esp। মুখোমুখি পরিস্থিতি তারা পরিপূরক :-)

— টিজে ক্রাউডার

মেহ আমি এই জন্য প্রয়োজন কিনতে না। উফ থেকে দূরে যেতে আমি সি # থেকে দূরে সরে এসেছি এবং এখন ওও জাভাস্ক্রিপ্টে ক্রপ হচ্ছে। আমি টাইপ পছন্দ করি না। সমস্ত কিছু একটি var / অবজেক্ট / ফাংশন হওয়া উচিত। এটাই. আর কোনও বহিরাগত কীওয়ার্ড নেই। এবং উত্তরাধিকার একটি কেলেঙ্কারী। আপনি যদি টাইপ এবং নন টাইপগুলির মধ্যে একটি ভাল লড়াই দেখতে চান। রেস্ট সাবান বনাম একবার দেখুন। এবং আমরা সবাই জানি যে কে জিতল।

— শাই UI

@ ফরেয়েজ: classসিনট্যাক্স জাভাস্ক্রিপ্ট আগের চেয়ে বেশি টাইপ করে না। আমি উত্তরে বলেছি, ইতিমধ্যে যা ছিল তার জন্য এটি বেশিরভাগই সহজ (আরও বেশি) সহজ বাক্য গঠন। এর জন্য একেবারেই প্রয়োজন ছিল, লোকেরা নিয়মিত পুরানো বাক্য গঠন ভুল করে চলেছিল। এর অর্থ এই নয় যে আপনি পূর্বের চেয়ে উত্তরাধিকার আর ব্যবহার করতে হবে। (এবং অবশ্যই, আপনি যদি পুরানো বাক্য গঠন দিয়ে কখনই "ক্লাস" স্থাপন না করেন, তবে নতুন সিনট্যাক্সটি ব্যবহার করার দরকার নেই)

— টিজে ক্রাউডার

Answer 2

ES6 শ্রেণি হ'ল আমরা আজ যে প্রোটোটাইপিকাল ক্লাস সিস্টেমটি ব্যবহার করি তার জন্য সিনট্যাকটিক চিনি। তারা আপনার কোডটিকে আরও সংক্ষিপ্ত এবং স্ব-ডকুমেন্টিং করে, এটি তাদের ব্যবহার করার যথেষ্ট কারণ (আমার মতে)।

এই ES6 ক্লাসটি স্থানান্তর করতে বাবেল ব্যবহার:

class Foo {
  constructor(bar) {
    this._bar = bar;
  }

  getBar() {
    return this._bar;
  }
}

আপনাকে এরকম কিছু দেবে:

var Foo = (function () {
  function Foo(bar) {    
    this._bar = bar;
  }

  Foo.prototype.getBar = function () {
    return this._bar;
  }

  return Foo;
})();

দ্বিতীয় সংস্করণটি বেশি জটিল নয়, এটি বজায় রাখা আরও কোড। যখন আপনি উত্তরাধিকার জড়িত হন, তখন সেই ধরণগুলি আরও জটিল হয়ে যায়।

ক্লাসগুলি একই প্রোটোটাইপিকাল নিদর্শনগুলি সংকলন করে যা আমরা ব্যবহার করছি, আপনি সেগুলি একই প্রোটোটাইপ ম্যানিপুলেশন করতে পারেন। এর মধ্যে রয়েছে রানটাইমের সময় যুক্তকরণ পদ্ধতিগুলি Foo.prototype.getBar, পদ্ধতিতে অ্যাক্সেস করা ইত্যাদি includes

আজ ES6 এ গোপনীয়তার জন্য কিছু প্রাথমিক সমর্থন রয়েছে, যদিও এটি অ্যাক্সেস করতে চান না এমন বস্তুগুলি রফতানি না করার উপর ভিত্তি করে। উদাহরণস্বরূপ, আপনি:

const BAR_NAME = 'bar';

export default class Foo {
  static get name() {
    return BAR_NAME;
  }
}

এবং BAR_NAMEঅন্যান্য মডিউলগুলির জন্য সরাসরি উল্লেখের জন্য উপলব্ধ হবে না।

প্রচুর লাইব্রেরি তাদের সহায়তার সাথে ব্যাকবোন যেমন extendsএটির মতো পদ্ধতি-সংক্রান্ত ফাংশন এবং বৈশিষ্ট্যগুলির একটি অবৈধ হ্যাশ গ্রহণ করে , সমর্থন করার বা সমাধান করার চেষ্টা করেছে তবে প্রোটোটাইপিক উত্তরাধিকার প্রকাশের জন্য এমন কোনও সিস্টেম নেই যা প্রোটোটাইপের সাথে চারপাশে শঙ্কা জড়িত না।

জেএস কোডটি আরও জটিল হয়ে উঠার সাথে সাথে কোডবেসগুলি আরও বড় হয়ে যায়, আমরা উত্তরাধিকার এবং মডিউলগুলির মতো জিনিসগুলি হ্যান্ডেল করার জন্য প্রচুর নিদর্শনগুলির বিকাশ শুরু করেছি। মডিউলগুলির জন্য একটি ব্যক্তিগত সুযোগ তৈরি করতে ব্যবহৃত আইআইএফইতে প্রচুর ধনুর্বন্ধনী এবং পেরেন রয়েছে; এর মধ্যে একটি অনুপস্থিত হওয়ার ফলে বৈধ স্ক্রিপ্টের ফলে পুরোপুরি আলাদা কিছু ঘটে (মডিউল পরে সেমিকোলনটি এড়িয়ে যাওয়া পরের মডিউলটিকে প্যারামিটার হিসাবে পাস করতে পারে যা খুব কমই ভাল)।

tl; dr: আমরা ইতিমধ্যে যা করি তার জন্য এটি চিনি এবং আপনার উদ্দেশ্যকে কোডে পরিষ্কার করে দেয়।