प्रौद्योगिकी साझेदारी

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

ES6 इत्यस्मिन् वर्गः वस्तु-उन्मुख-प्रोग्रामिङ्गस्य कृते वाक्य-शर्करा अस्ति, यत् वस्तुनां संरचनां व्यवहारं च परिभाषितुं संक्षिप्तं मार्गं प्रदाति ।

जावास्क्रिप्ट् भाषायां दृष्टान्तवस्तूनि जनयितुं पारम्परिकः मार्गः कन्स्ट्रक्टर् इत्यस्य माध्यमेन भवति । अधः उदाहरणम् अस्ति ।

function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
1
2
3
4
5
6
7
8

मूलतः ES6 वर्गं केवलं वाक्यविन्यासशर्करारूपेण गणयितुं शक्यते तस्य अधिकांशकार्यं ES5 द्वारा प्राप्तुं शक्यते नूतनवर्गलेखनपद्धतिः केवलं वस्तुप्रोटोटाइपस्य लेखनपद्धतिं स्पष्टतरं करोति तथा च वस्तु-उन्मुखस्य प्रोग्रामिंगस्य वाक्यविन्यासस्य सदृशं भवति उपर्युक्तः कोडः ES6 वर्गानां उपयोगेन पुनर्लिखितः भवति, यथा ।

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
1
2
3
4
5
6
7
8
9

ES6 वर्गाः निर्मातृणां लेखनस्य अन्यः मार्गः इति गणयितुं शक्यते:

class Point {
  // ...
}
typeof Point // "function"
Point === Point.prototype.constructor // true

----------------------------------------------------------------------------
class Point {
  constructor() {
    // ...
  }
  toString() {
    // ...
  }
  toValue() {
    // ...
  }
}
// 等同于
Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

मुख्यविशेषताः : १.

1. घोषणात्मक वाक्यविन्यासः: क्लास् घोषयितुं class कीवर्डस्य उपयोगं कुर्वन्तु ।
2. निर्माता: क्लास् इन्स्टान्स् इत्यस्य आरम्भार्थं constructor मेथड् इत्यस्य उपयोगं कुर्वन्तु ।
3. उदाहरणविधयः: वर्गस्य अन्तः परिभाषितः सामान्यः विधिः, उदाहरणगुणान् अभिगन्तुं एतस्य उपयोगं कुर्वन्तु ।
4. स्थिरविधयः: स्थिरकीवर्डस्य उपयोगेन परिभाषितं भवति तथा च वर्गस्य दृष्टान्तस्य उपरि न निर्भरं भवति ।
5. उदाहरणगुणाः: कन्स्ट्रक्टर् मध्ये आरम्भं कुर्वन्तु, अथवा क्षेत्रघोषणावाक्यविन्यासस्य उपयोगं कुर्वन्तु (वर्तमानं Stage 3 प्रस्तावः) ।
6. उत्तराधिकारः: extends कीवर्डस्य उपयोगेन कार्यान्वितम्।
7. सुपर कीवर्ड: उपवर्गस्य कन्स्ट्रक्टर् मध्ये मातापितृवर्गस्य कन्स्ट्रक्टर् अथवा मेथड् आह्वयन्तु ।
8. गेटरः सेटरः च: गुणानाम् कृते एक्सेसर् परिभाषितुं get तथा ​​set इत्येतयोः उपयोगं कुर्वन्तु ।
9. निजीगुणाः विधयः च: निजीगुणान् पद्धतीश्च परिभाषितुं # इत्यस्य उपयोगं कुर्वन्तु (वर्तमानं Stage 3 प्रस्तावः) ।

1. मूलभूतवर्गपरिभाषा तथा उदाहरणीकरणम्

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return `Point(${this.x}, ${this.y})`;
    }
}

let point = new Point(10, 20);
console.log(point.toString()); // 输出: Point(10, 20)
1
2
3
4
5
6
7
8
9
10
11
12
13

2. स्थिरविधयः गुणाः च

class MathUtils {
	constructor() {
    	console.log(MyClass.myStaticProp); // 42
    }
    static add(a, b) {
        return a + b;
    }
    static myStaticProp = 42;
}

console.log(MathUtils.add(1, 2)); // 输出: 3
1
2
3
4
5
6
7
8
9
10
11

3. उत्तराधिकारः सुपर च

class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    area() {
        return this.width * this.height;
    }
}

class Square extends Rectangle {
    constructor(sideLength) {
        super(sideLength, sideLength);
    }
}

let square = new Square(5);
console.log(square.area()); // 输出: 25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4. गेटरः सेटरः च

class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    get area() {
        return this.width * this.height;
    }

    set width(newWidth) {
        if (newWidth > 0) {
            this.width = newWidth;
        } else {
            console.log("Width must be positive.");
        }
    }
}

let rect = new Rectangle(4, 5);
console.log(rect.area); // 输出: 20
rect.width = -10; // 输出: Width must be positive.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

वर्गेषु टिप्पण्यानि

(1) कठोरविधा

आन्तरिकरूपेण, वर्गाः मॉड्यूल् च पूर्वनिर्धारितरूपेण strict मोड् मध्ये सन्ति, अतः रनिंग् मोड् निर्दिष्टुं use strict इत्यस्य उपयोगस्य आवश्यकता नास्ति । यावत् भवतः कोडः क्लास् अथवा मॉड्यूल् मध्ये लिखितः अस्ति तावत् केवलं strict mode एव उपलभ्यते । भविष्ये सर्वे कोडाः वास्तवतः मॉड्यूल् मध्ये चालिताः भविष्यन्ति इति विचार्य, ES6 वास्तवतः सम्पूर्णां भाषां कठोरमोड् मध्ये उन्नयनं करोति ।

(2) पदोन्नतिः नास्ति

वर्गेषु चर-उत्थापनं (उत्थापनं) नास्ति, यत् ES5 इत्यस्मात् सर्वथा भिन्नम् अस्ति ।

new Foo(); // ReferenceError
class Foo {}

//不会报错
//因为 Bar 继承 Foo 的时候， Foo 已经有定义了。
//但是，如果存在 class 的提升，上面代码就会报错，
//因为 class 会被提升到代码头部，而 let 命令是不提升的，
//所以导致 Bar 继承 Foo 的时候， Foo 还没有定义。
{
  let Foo = class {};
  class Bar extends Foo {
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

(3) नाम विशेषणम्

यतः सारतः ES6 वर्गः ES5 कन्स्ट्रक्टर् कृते केवलं रैपरः एव भवति, अतः फंक्शन् इत्यस्य बहवः विशेषताः Class द्वारा उत्तराधिकाररूपेण भवन्ति, यत्र नाम विशेषता अपि अस्ति ।

class Point {}
Point.name // "Point"
//name 属性总是返回紧跟在 class 关键字后面的类名。
1
2
3

(4)जनरेटर विधि

यदि कस्यचित् विधिस्य पूर्वं ताराचिह्नं (*) भवति तर्हि विधिः Generator function इति अर्थः ।

class Foo {
  constructor(...args) {
    this.args = args;
  }
  * [Symbol.iterator]() {
    for (let arg of this.args) {
      yield arg;
    }
  }
}
for (let x of new Foo('hello', 'world')) {
  console.log(x);
}
// hello
// world

//Foo 类的 Symbol.iterator 方法前有一个星号，表示该方法是一个 Generator 函数。 
//Symbol.iterator 方法返回一个 Foo 类的默认遍历器， for...of 循环会自动调用这个遍历器。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(५) अस्य विषयः

यदि कस्मिन् अपि क्लास् मेथड् इत्यस्मिन् एतत् भवति तर्हि पूर्वनिर्धारितरूपेण क्लास् इत्यस्य इन्स्टन्स् प्रति सूचयति । तथापि भवद्भिः अतीव सावधानता भवितव्या, यतः एषा पद्धतिः केवलं प्रयुक्ते सति दोषान् जनयितुं शक्नोति ।

class Logger {
  printName(name = 'there') {
    this.print(`Hello ${name}`);
  }
  print(text) {
    console.log(text);
  }
}
const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined
1
2
3
4
5
6
7
8
9
10
11

एतस्य उपयोगं परिहरन्तु, कन्स्ट्रक्टर् मध्ये एतत् बन्धयन्तु:

class Logger {
  constructor() {
    this.printName = this.printName.bind(this);
  }
  // ...
}
1
2
3
4
5
6

एतस्य उपयोगं परिहरन्तु, बाणकार्यस्य उपयोगं कुर्वन्तु:

class Obj {
  constructor() {
    this.getThis = () => this;
  }
}
const myObj = new Obj();
myObj.getThis() === myObj // true
1
2
3
4
5
6
7

एतस्य उपयोगं परिहरन्तु, Proxy इत्यस्य उपयोगं कुर्वन्तु

function selfish (target) {
  const cache = new WeakMap();
  const handler = {
    get (target, key) {
      const value = Reflect.get(target, key);
      if (typeof value !== 'function') {
        return value;
      }
      if (!cache.has(value)) {
        cache.set(value, value.bind(target));
      }
      return cache.get(value);
    }
  };
  const proxy = new Proxy(target, handler);
  return proxy;
}
const logger = selfish(new Logger());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18