这篇博客是根据慕课网上的ES6快速入门教程的视频总结的,有兴趣的可以去看下视频(免费)
三种语法实现同一个功能,从而加深对三种语法的运用,最后了解ES6的优势
知识点:常量、作用域、箭头函数、默认代理、对象代理
常量:
// ES5 中常量的写法
Object.defineProperty(window,"PI2", {
value: 3.1415926,
writable: false
})
console.log(window.PI2)
// ES6 的常量写法
const PI = 3.1415926
console.log(PI)
// PI = 4
作用域:
// ES5 中的作用域
var callbacks = [];
for(var i = 0;i <= 2; i++) {
callbacks[i] = function() {
// 因为函数体内是一个表达式,这里就会保留这个情况,这个表达式用到i变量,所有形成了一个闭包
// 当callbacks执行的时候,i已经变成3了,所有执行callbacks返回都是6
return i * 2
}
}
console.table([
callbacks[0](),
callbacks[1](),
callbacks[2]()
])
// ES6 中的作用域
const callbacks2 = []
for (let j = 0; j <= 2; j++) {
// let 定义好就会生成一个块作用域,当前作用域会把当前作用域下的值保存下来给后面的闭包使用,循环的时候,
// 每循环一次就生成新的作用域,闭包就把变量导向闭包作用域的变量,然后输出的就是0,2,4
callbacks2[j] = function() {
return j * 2
}
}
console.table([
callbacks2[0](),
callbacks2[1](),
callbacks2[2]()
]);
// ES5 中的作用域函数
((function () {
const foo = function () {
return 1
}
console.log("foo()===1", foo() === 1);
((function(){
var foo = function () {
return 2
}
console.log('foo() ===2', foo() === 2)
})())
})())
// ES6 中的作用域函数
{
function foo() {
return 1
}
console.log('foo()===1',foo() ===1);
{
function foo() {
return 2
}
console.log('foo()===2',foo() ===2);
}
}
注意:ES3和ES5中需要使用立即执行函数才可以把作用域进行隔离,ES6则是{}就可以实现了
箭头函数:
{
// ES3,ES5
var evens = [1,2,3,4,5];
var odds = evens.map(function(v) {
return v + 1
})
console.log(evens,odds);
}
{
// ES6
let evens = [1,2,3,4,5]
let odds = evens.map(v=> v + 1); // ()在只有一个参数的时候,可以省略(),当箭头函数后面直接是返回值的时候,可以省略{}
console.log(evens,odds);
}
{
// ES3,ES5中的this=> this的指向是该函数被调用的对象
var factory = function () {
this.a = 'a',
this.b = 'b'
this.c = {
a: 'a+',
b: function () {
return this.a
}
}
}
console.log(new factory().c.b());
};
{
// ES6,箭头函数中的this的指向是定义时this的指向(这里b定义的this就是继承父执行上下文里面的this===<注意:简单对象(非函数)是没有执行上下文的!> ))
var factory = function () {
this.a = 'a',
this.b = 'b'
this.c = {
a: 'a+',
b: () => this.a
}
}
console.log(new factory().c.b());
}
注意:简单对象(非函数)是没有执行上下文的!
默认参数:
{
// ES5/ES3 默认参数的写法
function f(x,y,z) {
if(y === undefined) {
y = 7;
}
if(z === undefined) {
z = 42
}
return x + y + z
}
console.log(f(1,3))
}
{
// ES6 默认参数
function f(x,y=7,z =42) {
return x + y + z
}
console.log(f(1,3))
}
{
// 必选参数的验证
function checkParameter () {
throw new Error('can\'t be empty')
}
function f(x = checkParameter(), y =7, z = 42) {
return x + y + z
}
console.log(f(1))
try {
f()
} catch (e) {
console.log(e);
} finally {
}
}
{
// ES3, ES5 可变参数
function f() {
var a = Array.prototype.slice.call(arguments);
var sum = 0;
a.forEach(function(item){
sum+= item*1
})
return sum
}
console.log(f(1,2,3))
}
{
// ES6 可变参数
function f(...a) {
var sum = 0;
a.forEach(item =>{
sum += item*1
});
return sum
}
console.log(f(1,2,3,6))
}
对象代理:
{
// ES3 数据保护(闭包)
var Person = function () {
var data = {
name: 'ES3',
sex: 'male',
age: 15
}
this.get = function (key) {
return data[key]
}
this.set = function (key, value) {
if(key !== 'sex') {
data[key] = value
}
}
}
// 声明一个实例
var person = new Person();
// 读取
console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')});
// 修改
person.set('name','es3-name');
console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')});
try {
person.set('sex','female')
console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')});
} catch(e) {
console.log(e)
}
}
{
// ES5 (vue2的实现数据监听的原理)
var Person = {
name: 'es5',
age: 15
}
Object.defineProperty(Person,'sex',{
writable: false,
value: 'male'
})
console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')});
Person.name = 'es5-cname';
console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')});
try {
Person.sex = 'female';
console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')});
} catch(e) {
console.log(e)
}
}
{
// ES6
let Person = {
name: 'es6',
sex: 'male',
age: 15
}
// person是将来暴露给用户操作的对象,把这个Person保护起来,person通过Proxy和Person的数据挂钩的
let person = new Proxy(Person,{
get(target,key) {
return target[key]
},
set(target,key,value) {
if(key!=='sex') {
target[key] = value
}
}
})
console.table({name: person.name,sex:person.sex,age:person.age});
try {
person.sex = 'female';
} catch (e) {
console.log(e);
} finally {
}
}
通过代理来进行各种逻辑的操作
更多知识点: