BabelJS - Transpile ES6 tính năng cho ES5

Trong chương này, chúng ta sẽ thấy các tính năng được thêm vào ES6. Chúng ta cũng sẽ học cách biên dịch các tính năng sang ES5 bằng BabelJS.

Sau đây là các tính năng khác nhau của ES6 mà chúng ta sẽ thảo luận trong chương này -

Let + Const
Hàm mũi tên
Classes
Promises
Generators
Destructuring
Iterators
Template Literalst
Đối tượng nâng cao
Thuộc tính mặc định, Rest & Spread

Let + Const

Hãy khai báo một biến cục bộ phạm vi khối trong JavaScript. Hãy xem xét ví dụ sau để hiểu cách sử dụng let.

Thí dụ

let a = 1;
if (a == 1) {
   let a = 2;
   console.log(a);
}
console.log(a);

Đầu ra

2
1

Lý do bảng điều khiển đầu tiên in 2 là vì a được khai báo lại bằng cách sử dụng let và sẽ chỉ có sẵn trong ifkhối. Bất kỳ biến nào được khai báo bằng let chỉ có sẵn trong khối đã khai báo. Chúng ta đã khai báo biến a hai lần bằng cách sử dụng let, nhưng nó không ghi đè lên giá trị của a.

Đây là sự khác biệt giữa từ khóa var và let. Khi bạn khai báo biến bằng cách sử dụng var, biến sẽ có sẵn trong phạm vi của hàm hoặc nếu được khai báo sẽ hoạt động giống như một biến toàn cục.

Trong trường hợp một biến được khai báo bằng let, thì biến đó sẽ có sẵn trong phạm vi khối. Nếu được khai báo bên trong câu lệnh if, nó sẽ chỉ khả dụng trong khối if. Điều tương tự cũng áp dụng cho switch, for-loop, v.v.

Bây giờ chúng ta sẽ thấy chuyển đổi mã trong ES5 bằng cách sử dụng babeljs.

Hãy để chúng tôi chạy lệnh sau để chuyển đổi mã:

npx babel let.js --out-file let_es5.js

Kết quả đầu ra từ es6 đến es5 cho từ khóa let như sau:

Hãy sử dụng ES6

let a = 1;
if (a == 1) {
   let a = 2;
   console.log(a);
}
console.log(a);

Đã vận chuyển bằng cách sử dụng babel sang ES5

"use strict";

var a = 1;
if (a == 1) {
   var _a = 2;
   console.log(_a);
}
console.log(a);

Nếu bạn thấy mã ES5, từ khóa let được thay thế bằng vartừ khóa. Ngoài ra, biến bên trong khối if được đổi tên thành_a để có tác dụng tương tự như khi được khai báo với let từ khóa.

hăng sô

Trong phần này, chúng ta sẽ tìm hiểu về hoạt động của từ khóa const trong ES6 và ES5. Từ khóa Const cũng có sẵn trong phạm vi; và nếu ở ngoài, nó sẽ báo lỗi. Giá trị của biến khai báo const không thể thay đổi sau khi được gán. Chúng ta hãy xem xét ví dụ sau để hiểu cách sử dụng từ khóa const.

Thí dụ

let a =1;
if (a == 1) {
   const age = 10;
}
console.log(age);

Đầu ra

Uncaught ReferenceError: age is not defined at 
      
       :5:13

Kết quả ở trên ném ra một lỗi vì const age được xác định bên trong khối if và có sẵn trong khối if.

Chúng tôi sẽ hiểu việc chuyển đổi sang ES5 bằng BabelJS.

ES6

let a =1;
if (a == 1) {
   const age = 10;
}
console.log(age);

Chỉ huy

npx babel const.js --out-file const_es5.js

Chuyển sang ES6 bằng BabelJS

"use strict";

var a = 1;
if (a == 1) {
   var _age = 10;
}
console.log(age);

Trong ES5, từ khóa const được thay thế bằng từ khóa var như hình trên.

Hàm mũi tên

Hàm Arrow có cú pháp ngắn hơn so với biểu thức biến. nó còn được gọi là hàm mũi tên béo hoặc hàm lambda. Hàm không có thuộc tính này của riêng nó. Trong chức năng này, chức năng từ khóa bị bỏ qua.

Thí dụ

var add = (x,y) => {
   return x+y;
}

var k = add(3,6);
console.log(k);

Đầu ra

Sử dụng BabelJS, chúng tôi sẽ chuyển đoạn mã trên sang ES5.

ES6 - Hàm mũi tên

var add = (x,y) => {
   return x+y;
}

var k = add(3,6);
console.log(k);

Chỉ huy

npx babel arrowfunction.js --out-file arrowfunction_es5.js

BabelJS - ES5

Sử dụng Babel, hàm mũi tên được chuyển thành hàm biểu thức biến như hình dưới đây.

"use strict";

var add = function add(x, y) {
   return x + y;
};

var k = add(3, 6);
console.log(k);

Các lớp học

ES6 đi kèm với tính năng Classes mới. Các lớp tương tự như kế thừa dựa trên nguyên mẫu có sẵn trong ES5. Từ khóa class được sử dụng để định nghĩa lớp. Các lớp giống như các hàm đặc biệt và có những điểm giống nhau như biểu thức hàm. Nó có một hàm tạo, được gọi bên trong lớp.

Thí dụ

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

Đầu ra

Siya-Kapoor

ES6 - Lớp học

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

Chỉ huy

npx babel class.js --out-file class_es5.js

BabelJS - ES5

Có thêm mã được thêm vào bằng cách sử dụng babeljs để có được chức năng hoạt động cho các lớp giống như trong ES5.BabelJs đảm bảo rằng chức năng hoạt động giống như trong ES6.

"use strict";

var _createClass = function () {
   function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
         var descriptor = props[i];
         descriptor.enumerable = descriptor.enumerable || false;
         descriptor.configurable = true;
         if ("value" in descriptor) descriptor.writable = true;
         Object.defineProperty(target, descriptor.key, descriptor);
      }
   }
   return function (Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
   };
}();

function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
   }
}

var Person = function () {
   function Person(fname, lname, age, address) {
      _classCallCheck(this, Person);

      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   _createClass(Person, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);

   return Person;
}();

var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

Lời hứa

JavaScript hứa hẹn được sử dụng để quản lý các yêu cầu không đồng bộ trong mã của bạn.

Nó làm cho cuộc sống dễ dàng hơn và giữ cho mã sạch khi bạn quản lý nhiều lệnh gọi lại từ các yêu cầu không đồng bộ, có sự phụ thuộc. Hứa hẹn cung cấp một cách tốt hơn để làm việc với các hàm gọi lại. Hứa hẹn là một phần của ES6. Theo mặc định, khi bạn tạo một lời hứa, trạng thái của lời hứa đang chờ xử lý.

Lời hứa xuất hiện ở ba trạng thái -

đang chờ xử lý (trạng thái ban đầu)
đã giải quyết (hoàn thành thành công)
rejected(failed)

new Promise()được sử dụng để xây dựng một lời hứa. Hàm tạo Promise có một đối số, là một hàm gọi lại. Hàm gọi lại có hai đối số - giải quyết và từ chối;

cả hai đều là các chức năng bên trong. Mã không đồng bộ mà bạn viết, tức là các hàm gọi Ajax, tải ảnh, định thời sẽ đi trong hàm gọi lại.

Nếu tác vụ được thực hiện trong hàm gọi lại thành công, thì hàm giải quyết được gọi; nếu không, hàm từ chối được gọi với chi tiết lỗi.

Dòng mã sau đây cho thấy một lệnh gọi cấu trúc lời hứa:

var _promise = new Promise (function(resolve, reject) {
   var success = true;
   if (success) {
      resolve("success");
   } else {
      reject("failure");
   }
});
_promise.then(function(value) {
   //once function resolve gets called it comes over here with the value passed in resolve
   console.log(value); //success
}).catch(function(value) {
   //once function reject gets called it comes over here with the value passed in reject
   console.log(value); // failure.
});

Ví dụ về lời hứa của ES6

let timingpromise = new Promise((resolve, reject) => {
   setTimeout(function() {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then((msg) => {
   console.log(msg);
});

Đầu ra

Promise is resolved!

ES6 - Lời hứa

let timingpromise = new Promise((resolve, reject) => {
   setTimeout(function() {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then((msg) => {
   console.log(msg);
});

Chỉ huy

npx babel promise.js --out-file promise_es5.js

BabelJS - ES5

"use strict";

var timingpromise = new Promise(function (resolve, reject) {
   setTimeout(function () {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then(function (msg) {
   console.log(msg);
});

Đối với các lời hứa, mã không thay đổi khi được chuyển. Chúng ta cần sử dụng babel-polyfill để nó hoạt động trên các trình duyệt cũ. Chi tiết về babel-polyfills được giải thích trong chương babel - poyfill.

Máy phát điện

Chức năng máy phát điện giống như bình thường function. Hàm có cú pháp đặc biệt hàm * với * đối với hàm và từ khóa lợi nhuận sẽ được sử dụng bên trong hàm. Điều này có nghĩa là để tạm dừng hoặc bắt đầu chức năng khi được yêu cầu. Các chức năng bình thường không thể bị dừng lại sau khi bắt đầu thực thi. Nó sẽ thực thi toàn bộ chức năng hoặc tạm dừng khi gặp câu lệnh return. Trình tạo hoạt động khác ở đây, bạn có thể tạm dừng chức năng với từ khóa năng suất và khởi động nó bằng cách gọi lại trình tạo bất cứ khi nào được yêu cầu.

Thí dụ

function* generatorfunction(a) {
   yield a;
   yield a +1 ;
}

let g = generatorfunction(8);
console.log(g.next());
console.log(g.next());

Đầu ra

{value: 8, done: false}
{value: 9, done: false}

ES6 - Máy phát điện

function* generatorfunction(a) {
   yield a;
   yield a +1 ;
}

let g = generatorfunction(8);
console.log(g.next());
console.log(g.next());

Chỉ huy

npx babel generator.js --out-file generator_es5.js

BabelJS - ES5

"use strict";

var _marked = /*#__PURE__*/regeneratorRuntime.mark(generatorfunction);

function generatorfunction(a) {
   return regeneratorRuntime.wrap(function generatorfunction$(_context) {
      while (1) {
         switch (_context.prev = _context.next) {
            case 0:
               _context.next = 2;
               return a;

            case 2:
               _context.next = 4;
               return a + 1;
               
            case 4:
            case "end":
               return _context.stop();
         }
      }
   }, _marked, this);
}

var g = generatorfunction(8);
console.log(g.next());
console.log(g.next());

Trình lặp lại

Lặp lại trong JavaScript trả về một đối tượng JavaScript có giá trị. Đối tượng cũng có một cờ được gọi là done, có giá trị true / false. Nó cho sai nếu nó không phải là phần cuối của trình lặp. Chúng ta hãy xem xét một ví dụ và xem hoạt động của trình lặp trên một mảng.

Thí dụ

let numbers = [4, 7, 3, 10];
let a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

Trong ví dụ trên, chúng ta đã sử dụng một mảng số và gọi một hàm trên mảng bằng cách sử dụng Symbol.iterator làm chỉ mục.

Kết quả mà chúng ta nhận được bằng cách sử dụng next () trên mảng như sau:

{value: 4, done: false}
{value: 7, done: false}
{value: 3, done: false}
{value: 10, done: false}
{value: undefined, done: true}

Đầu ra cho một đối tượng có giá trị và được thực hiện dưới dạng các thuộc tính. Mỗinext()lệnh gọi phương thức cung cấp giá trị tiếp theo từ mảng và được thực hiện là sai. Giá trị của done sẽ chỉ đúng khi các phần tử từ mảng được thực hiện xong. Chúng ta có thể sử dụng điều này để lặp qua các mảng. Có nhiều tùy chọn hơn có sẵn nhưfor-of vòng lặp được sử dụng như sau:

Thí dụ

let numbers = [4, 7, 3, 10];
for (let n of numbers) {
   console.log(n);
}

Đầu ra

Khi mà for-of loopsử dụng khóa, nó cung cấp thông tin chi tiết của các giá trị mảng như hình trên. Chúng tôi sẽ kiểm tra cả hai cách kết hợp và xem cách babeljs chuyển chúng thành es5.

Thí dụ

let numbers = [4, 7, 3, 10];
let a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

let _array = [4, 7, 3, 10];
for (let n of _array) {
   console.log(n);
}

chỉ huy

npx babel iterator.js --out-file iterator_es5.js

Đầu ra

"use strict";

var numbers = [4, 7, 3, 10];
var a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

var _array = [4, 7, 3, 10];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
   for (var _iterator = _array[Symbol.iterator](),
      _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
      _iteratorNormalCompletion = true) {
      var n = _step.value;

      console.log(n);
   }
} catch (err) {
   _didIteratorError = true;
   _iteratorError = err;
} finally {
   try {
      if (!_iteratorNormalCompletion && _iterator.return) {
         _iterator.return();
      }
   } finally {
      if (_didIteratorError) {
         throw _iteratorError;
      }
   }
}

Có những thay đổi được thêm vào for-ofvòng lặp trong es5. Nhưng iterator.next vẫn được giữ nguyên. Chúng ta cần sử dụngbabel-polyfillđể làm cho nó hoạt động trong các trình duyệt cũ. Babel-polyfill được cài đặt cùng với babel và điều tương tự có thể được sử dụng từ node_modules như hình dưới đây -

Thí dụ

<html>
   <head>
      <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
      <script type="text/javascript" src="iterator_es5.js"></script>
   </head>
   <body>
      <h1>Iterators</h1>
   </body>
</html>

Đầu ra

Phá hủy

Thuộc tính hủy cấu trúc hoạt động giống như một biểu thức JavaScript giải nén các giá trị từ mảng, đối tượng.

Ví dụ sau sẽ giải thích hoạt động của cú pháp hủy cấu trúc.

Thí dụ

let x, y, rem;
[x, y] = [10, 20];

console.log(x);
console.log(y);
[x, y, ...rem] = [10, 20, 30, 40, 50];
console.log(rem);

let z = 0;
({ x, y } = (z) ? { x: 10, y: 20 } : { x: 1, y: 2 });
console.log(x);
console.log(y);

Đầu ra

10
20
[30, 40, 50]
1
2

Dòng mã trên cho thấy cách các giá trị được gán từ phía bên phải của mảng cho các biến ở phía bên trái. Biến với...rem nhận tất cả các giá trị còn lại từ mảng.

Chúng ta cũng có thể gán các giá trị từ đối tượng ở phía bên trái bằng cách sử dụng toán tử điều kiện như hình dưới đây:

({ x, y } = (z) ? { x: 10, y: 20 } : { x: 1, y: 2 });
console.log(x); // 1
console.log(y); // 2

Hãy để chúng tôi chuyển đổi tương tự sang ES5 bằng cách sử dụng babeljs -

chỉ huy

npx babel destructm.js --out-file destruct_es5.js

destruct_es5.js

"use strict";

var x = void 0,
   y = void 0,
   rem = void 0;
x = 10;
y = 20;

console.log(x);
console.log(y);
x = 10;
y = 20;
rem = [30, 40, 50];

console.log(rem);

var z = 0;

var _ref = z ? { x: 10, y: 20 } : { x: 1, y: 2 };

x = _ref.x;
y = _ref.y;

console.log(x);
console.log(y);

Chữ mẫu

Chữ mẫu là một chữ chuỗi cho phép các biểu thức bên trong nó. Nó sử dụng dấu ngoặc kép (``) thay vì dấu nháy đơn hoặc dấu ngoặc kép. Khi chúng ta nói biểu thức bên trong một chuỗi, có nghĩa là chúng ta có thể sử dụng các biến, gọi một hàm, v.v. bên trong chuỗi.

Thí dụ

let a = 5;
let b = 10;
console.log(`Using Template literal : Value is ${a + b}.`);
console.log("Using normal way : Value is " + (a + b));

Đầu ra

Using Template literal : Value is 15.
Using normal way : Value is 15

ES6 - Template Literal

let a = 5;
let b = 10;
console.log(`Using Template literal : Value is ${a + b}.`);
console.log("Using normal way : Value is " + (a + b));

chỉ huy

npx babel templateliteral.js --out-file templateliteral_es5.js

BabelJS - ES5

"use strict";

var a = 5;
var b = 10;
console.log("Using Template literal : Value is " + (a + b) + ".");

console.log("Using normal way : Value is " + (a + b));

Chữ viết đối tượng nâng cao

Trong es6, các tính năng mới được thêm vào các ký tự đối tượng là rất tốt và hữu ích. Chúng ta sẽ xem qua một số ví dụ về object đen trong ES5 và ES6 -

Thí dụ

ES5
var red = 1, green = 2, blue = 3;
var rgbes5 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes5); // {red: 1, green: 2, blue: 3}

ES6
let rgbes6 = {
   red,
   green,
   blue
};
console.log(rgbes6); // {red: 1, green: 2, blue: 3}

Nếu bạn thấy đoạn mã trên, đối tượng trong ES5 và ES6 khác nhau. Trong ES6, chúng ta không phải chỉ định giá trị khóa nếu các tên biến giống với khóa.

Hãy để chúng tôi xem quá trình biên dịch sang ES5 bằng cách sử dụng babel.

Chữ đối tượng nâng cao ES6

const red = 1, green = 2, blue = 3;
let rgbes5 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes5);

let rgbes6 = {
   red,
   green,
   blue
};
console.log(rgbes6);

let brand = "carbrand";
const cars = {
   [brand]: "BMW"
}
console.log(cars.carbrand);  //"BMW"

chỉ huy

npx babel enhancedobjliteral.js --out-file enhancedobjliteral_es5.js

BabelJS - ES5

"use strict";

function _defineProperty(obj, key, value) {
   if (key in obj) {
      Object.defineProperty(obj, key, {
         value: value, enumerable: true, configurable: true, writable: true
      });
   } else { obj[key] = value; } return obj;
}

var red = 1,
   green = 2,
   blue = 3;
var rgbes5 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes5);

var rgbes6 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes6);

var brand = "carbrand";
var cars = _defineProperty({}, brand, "BMW");

console.log(cars.carbrand); //"BMW"

Thuộc tính mặc định, Rest & Spread

Trong phần này, chúng ta sẽ thảo luận về các thuộc tính default, rest và spread.

Mặc định

Với ES6, chúng ta có thể sử dụng các tham số mặc định cho các tham số hàm như sau:

Thí dụ

let add = (a, b = 3) => {
   return a + b;
}

console.log(add(10, 20));  // 30
console.log(add(10));      // 13

Hãy để chúng tôi chuyển mã trên sang ES5 bằng cách sử dụng babel.

chỉ huy

npx babel default.js --out-file default_es5.js

BabelJS - ES5

"use strict";

var add = function add(a) {
   var b = arguments.length > 1 >> arguments[1] !== undefined ? arguments[1] : 3;
   return a + b;
};

console.log(add(10, 20));
console.log(add(10));

Nghỉ ngơi

Tham số Rest bắt đầu bằng ba dấu chấm (...) như trong ví dụ dưới đây -

Thí dụ

let add = (...args) => {
   let sum = 0;
   args.forEach(function (n) {
      sum += n;
   });
   return sum;
};

console.log(add(1, 2));    // 3
console.log(add(1, 2, 5, 6, 6, 7));   //27

Trong hàm trên, chúng ta đang chuyển n số tham số cho hàm add. Để thêm tất cả các tham số đó nếu có trong ES5, chúng ta phải dựa vào đối tượng đối số để có được chi tiết của các đối số. Với ES6,rest it giúp xác định các đối số có ba dấu chấm như được hiển thị ở trên và chúng ta có thể lặp qua nó và lấy tổng các số.

Note - Chúng ta không thể sử dụng các đối số bổ sung khi sử dụng dấu ba chấm, tức là phần còn lại.

Thí dụ

let add = (...args, value) => {    //syntax error
   let sum = 0;
   args.forEach(function (n) {
      sum += n;
   });
   return sum;
};

Đoạn mã trên sẽ báo lỗi cú pháp.

Việc biên dịch sang es5 trông như sau:

chỉ huy

npx babel rest.js --out-file rest_es5.js

Babel -ES5

"use strict";

var add = function add() {
   for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
   }

   var sum = 0;
   args.forEach(function (n) {
      sum += n;
   });
   return sum;
};

console.log(add(1, 2));
console.log(add(1, 2, 5, 6, 6, 7));

Lây lan

Thuộc tính Spread cũng có ba dấu chấm như phần còn lại. Sau đây là một ví dụ hoạt động, cho thấy cách sử dụng thuộc tính spread.

Thí dụ

let add = (a, b, c) => {
   return a + b + c;
}
let arr = [11, 23, 3];
console.log(add(...arr));   //37

Bây giờ chúng ta hãy xem cách mã trên được chuyển đổi bằng cách sử dụng babel -

chỉ huy

npx babel spread.js --out-file spread_es5.js

Babel-ES5

"use strict";

var add = function add(a, b, c) {
   return a + b + c;
};
var arr = [11, 23, 3];
console.log(add.apply(undefined, arr));

Proxy

Proxy là một đối tượng mà bạn có thể xác định hành vi tùy chỉnh cho các hoạt động như tra cứu thuộc tính, gán, liệt kê, hàm, lệnh gọi, v.v.

Cú pháp

var a = new Proxy(target, handler);

Cả target và handler đều là các đối tượng.

target là một đối tượng hoặc có thể là một phần tử proxy khác.
xử lý sẽ là một đối tượng với các thuộc tính của nó là các hàm sẽ cung cấp hành vi khi được gọi.

Hãy để chúng tôi cố gắng hiểu các tính năng này với sự trợ giúp của một ví dụ -

Thí dụ

let handler = {
   get: function (target, name) {
      return name in target ? target[name] : "invalid key";
   }
};

let o = {
   name: 'Siya Kapoor',
   addr: 'Mumbai'
}

let a = new Proxy(o, handler);
console.log(a.name);
console.log(a.addr);
console.log(a.age);

Chúng tôi đã xác định mục tiêu và trình xử lý trong ví dụ trên và sử dụng nó với proxy. Proxy trả về đối tượng có khóa-giá trị.

Đầu ra

Siya Kapoor
Mumbai
invalid key

Bây giờ chúng ta hãy xem cách chuyển mã trên sang ES5 bằng cách sử dụng babel -

chỉ huy

npx babel proxy.js --out-file proxy_es5.js

Babel-ES5

'use strict';

var handler = {
   get: function get(target, name) {
      return name in target ? target[name] : "invalid key";
   }
};

var o = {
   name: 'Siya Kapoor',
   addr: 'Mumbai'
};

var a = new Proxy(o, handler);
console.log(a.name);
console.log(a.addr);
console.log(a.age);