通过babel了解一下es6的class,let,const和箭头函数
class的实现方式:原型链继承的语法糖,但是es6中未提供静态变量
箭头函数如何处理this:在上文生成一个变量,和arguments:使用上文的arguments,当然箭头函数的写法也是其很重要的一部分。
let:
作用域问题:通过创建不同的变量和调用关系/通过作为函数执行时的参数实现
//测试class 和箭头函数 class A { static name = () => "liuqi"; constructor() { this.hello = "coool"; const a = () => { console.log("hello", this, arguments); }; const b = function() { console.log("hello", this, arguments); }; } } class B extends A { a = function() {}; } const b = val => { console.log(val); }; const a = x => { return () => { console.log(x); }; }; // 测试let的上下文 for (let i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, i * 1000); } for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, i * 1000); } for (var i = 0; i < 5; i++) { setTimeout(() => { console.log(i, this); }, i * 1000); } for (let i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, 1000); } if (true) { let a; if (false) { let a; let b; a = 1; } a = 2; } |
"use strict"; "use strict"; // constructor 返回值 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError( "this hasn't been initialised - super() hasn't been called" ); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } // 通过原型链进行继承 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError( "Super expression must either be null or a function, not " + typeof superClass ); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : (subClass.__proto__ = superClass); } // 类型检查 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } // 声明一个class/function var A = function A() { var _this = this, _arguments = arguments; _classCallCheck(this, A); this.hello = "coool"; var a = function a() { console.log("hello", _this, _arguments); }; var b = function b() { console.log("hello", this, arguments); }; }; // 类的静态方法 A.name = function() { return "liuqi"; }; // 类的继承 var B = (function(_A) { _inherits(B, _A); function B() { var _ref; var _temp, _this2, _ret; _classCallCheck(this, B); for ( var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++ ) { args[_key] = arguments[_key]; } return ( (_ret = ((_temp = ((_this2 = _possibleConstructorReturn( this, (_ref = B.__proto__ || Object.getPrototypeOf(B)).call.apply( _ref, [this].concat(args) ) )), _this2)), (_this2.a = function() {}), _temp)), _possibleConstructorReturn(_this2, _ret) ); } return B; })(A); var b = function b(val) { console.log(val); }; var a = function a(x) { return function() { console.log(x); }; }; // let的作用域 var _loop = function _loop(_i) { setTimeout(function() { console.log(_i); }, _i * 1000); }; for (var _i = 0; _i < 5; _i++) { _loop(_i); } for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, i * 1000); } for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i, undefined); }, i * 1000); } var _loop2 = function _loop2(_i2) { setTimeout(function() { console.log(_i2); }, 1000); }; for (var _i2 = 0; _i2 < 5; _i2++) { _loop2(_i2); } // let的作用域 if (true) { var _a = void 0; if (false) { var _a2 = void 0; var _b = void 0; _a2 = 1; } _a = 2; } |
let a = 1; console.log("1:", a); new Promise((resolve, reject) => { console.log("2:", a); resolve(1); console.log("3:", a); reject(2); console.log("4:", a); }) .then(val => { a = 2; console.log("5:", a); }) .catch(val => { a = 3; console.log("6:", a); }); console.log("7:", a); a = 4; console.log("8:", a); |
输出:
1: 1
2: 1
3: 1
4: 1
7: 1
8: 4
5: 2
分析:promise的then是异步的,promise resolve之后的状态就确定了,不能再改变了