通过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;
} |
//测试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;
} |
"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); |
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之后的状态就确定了，不能再改变了