ES6 #

npm i babel-preset-env --save-dev //（env包括所有规则集）

{
  "presets": ["babel-preset-env"]
}

{
  "build": "babel src/app.js -o dist/bundle.js",
	"dev": "babel-node ./src/app.js"
}
  
// 可以使用babel编译或者运行脚本文件

var map = new Map(); // babel不能转译Map。
// 可以配置babel-polyfill进行转译，可以转译成浏览器可以识别的代码。

var a = 1;
var a = 2;

// 存在变量污染问题，通过立即执行函数来解决一部分问题。

// kiss原则（keep it simple stupid） 保持简单、傻瓜式操作

if (1) {
  // 块级作用域
}

for (var i = 0; i < 10; i++) {
  // 块级作用域
}

for (; 1; ) {
  // 块级作用域
  break;
}

{
  // 块级作用域
}

// 1. 不能在同一作用域下重复声明

// 包括全局作用域、函数作用域等。
// 同一作用域下同时使用let、var，不能重复声明。

function test (a) {
let a = 10;
console.lof(a);
}
test(); // 报错

function test (a) {
{
let a = 10;
}

console.log(a);
}
test(); // undefined

function test (a) {
{
let a = 10;
console.log(a);
}
}
test(); // 10

// 2. let 不会声明提升

// 在声明之前，不能使用该变量，会产生一个暂时性死区。
// 只要在let所对应的作用域范围之内，let都不会提升。

console.log(a); // 报错
let a = 10;

var a = a;
console.log(a); // undefined

let b = b;
console.log(b); // 报错

function test (x = y, y = 2) {
console.log(x, y);
}
test(); // 报错（y is not defined）暂时性死区导致的问题

function test (x = 2, y = x) {
console.log(x, y); // 2 2 
}
test();

typeof(a); // undefined

typeof(a); // 报错 typeof不再安全 暂时性死区
let a;

// 3. let只能在当前的作用域下生效

{
let a = 2;
}
console.log(a); // 报错

for (; 1; ) {
  let a = 1;
}
console.log(a); // 死循环，不会报错

for (; 1; ) {
  let a = 1;
  break;
}
console.log(a); // 报错

for (let i = 0; i < 10; i++) { }
console.log(i); // 报错

var arr = [];
for (var i = 0; i < 10; i++) {
  arr[i] = function () {
    console.log(i);
  }
}
for (var i = 0; i < 10; i++) {
  arr[i](); 
  // 0-9
  // var i 重新赋值 
}

for (var i = 0; i < 10; i++) {
  i = 'a';
  console.log(i); // 1个a
}
for (var i = 0; i < 10; i++) {
  var i = 'a';
  console.log(i); // 1个a
}

for (let i = 0; i < 10; i++) {
  i = 'a';
  console.log(i); // 1个a
}
for (let i = 0; i < 10; i++) {
  var i = 'a';
  console.log(i); // 报错
}
for (let i = 0; i < 10; i++) {
  let i = 'a';
  console.log(i); // 10个a
}

// () 和 {} 不是同一个块级作用域。
// () 是 父级作用域。

// 块级作用域因为有let才有意义，var关键字存在变量的声明提升。
// let本质上就是为了JS增加一个块级作用域。

// ES6在块级作用域中允许声明函数，并不推荐使用函数声明的方式来定义函数。
// 主要使用函数表达式的方式声明函数。

if (i) {
  function test () {}
}
try {
  function test () {}
}

if (i) {
  var test = function () {}
}
try {
  var test2 = function () {}
}

// 块级作用域是没有返回值的

var a = for () { return }; // 错误

{
  return; // 错误
}

// 提案中有一个do的方式，可以实现，但目前仅仅是一个草案。

do {
  return xxx;
}

// 块级作用域 == 函数的立即调用 ? 

// 错误。不等于。

// 本质是完全不同的东西。
// 函数有返回值，块级作用域没有返回值。
// 虽然能够使用函数立即执行的方式模拟块级作用域，但是不是相等。

// let 语法特征总结：

// 1. 不能在同一作用域下重复声明
// 2. let不会声明提升
// 3. let只能在当前的作用域下生效

for (var i = 0; i < 10; i++) {
  i = 'a';
  console.log(i); // a
}
for (var i = 0; i < 10; i++) {
  var i = 'a';
  console.log(i); // a
}
for (let i = 0; i < 10; i++) {
  var i = 'a';
  console.log(i); // a
}
for (let i = 0; i < 10; i++) {
  var i = 'a';
  console.log(i); // 报错
}
for (let i = 0; i < 10; i++) {
  let i = 'a';
  console.log(i); // 10个a
}


// ES5只能在顶层作用域或者在函数作用域中声明函数。
// ES6允许在块级作用域声明函数。

{
  let a = 1;
  function a () { }
  console.log(a); // 报错 重复声明
}

{
  let a = 1;
  {
    function a () { } // 函数存在作用域提升
  }
  console.log(a); // 1
}

// const 定义常量
// 不希望变量被更改 const http = require('http');

// 语法特征：

// 1. 定义常量必须赋值，常量不能更改

const a = 13;

// 2. 产生块级作用域，不能提升，存在暂时性死区

{
  console.log(a); // 报错
  const a = 12;
}

// 3. 与let一致，不能重复声明

const a = 12;
let a = 10; // 报错

// 4. 原始值和引用值都不能更改，但是可以修改或添加引用值的属性

const obj = {};
obj.name = 'yueluo';

// const 只能保证栈内存的引用指针不会被改变。

// 可以使用对象冻结（freeze）解决此类问题。 Object.freeze(obj);
// 对象冻结只能进行一层对象的冻结，可以使用递归对对象内部属性进行再处理。

// 自定义冻结

function freeze (obj) {
  Object.freeze(obj);
  for (const key in obj) {
    if (typeof(obj[key]) === 'object' && obj[key] !== null) {
      Object.freeze(obj[key]);
      freeze(obj[key]);
    }
  }
}                  

// freeze不常用，定义模块时，导出模块一般是实例化对象形式或者函数形式。
// 从根源上解决更改属性值的问题。

var x = 1;
{
  let x = x;
  console.log(x); // 暂时性死区 TDZ（Temporal Dead Zone）
  // let关键字声明 取得是当前作用域下x x并没有赋值 所以报错
}

function foo (x, y) {
  x = x || 1;
  y = y || 2;
  console.log(x + y);
}
foo(); // 3
foo(5, 6); // 11
foo(5); // 7
foo(null, 6); // 7
foo(0, 5); // 6

// falsy（虚值） 通过Boolean转换转化为假的值就是虚值。

// ES5

function foo (x, y) {
  var a = typeof(arguments[0]) !== 'undefined' ? arguments[0] : 1,
      b = typeof(arguments[1]) !== 'undefined' ? arguments[1] : 2;
  console.log(a + b);
}
foo(0, 5); // 5

// ES6

function foo (x = 1, y = 2) {
  console.log(x + y);
}
foo(0, 5); // 5

let x = 1;
function foo (y = x) {
  let x = 2;
  console.log(y);
}
foo(); // 1

let x = 1;
function foo (x = 2) {
  let x = 2;
  console.log(x);
}
foo(); // 报错 x已经被定义

function foo (x = 2) {
  let x = 2;
  console.log(x);
}
foo(1); // 报错 x已经被定义

// 定义的函数默认值会影响内部作用域的值，不能重复声明。

let x = 1;
function foo (x = x) {
  let x = 2;
  console.log(x);
}
foo(10); // 报错 x已经被定义

let x = 1;
function foo (x = x) {
  console.log(x);
}
foo(10); // 报错 暂时性死区 x is defined
// 函数执行时，函数的参数会形成单独的参数作用域，函数执行完成后，参数作用域消失。

let x = 1;
function foo (x = x) {
  let x = 2;
  console.log(x);
}
foo(10); // 报错 x已经被定义
// 参数作用域和函数作用域究竟有什么不同？

let x = 1;
function foo (y = x) {
  let x = 2;
  console.log(y);
}
foo(); // 1

function foo (x = 2) {
  let x = 2;
  console.log(x);
}
foo(); // a被重复声明 
// 手册说参数也存在自己的作用域，独立于函数作用域，但是实际情况存在出入。

let x = 1;
function foo(x = x) {
  console.log(x);
}
foo(); // x is not defined 暂时性死区

var w = 1,
    z = 2;
function foo (x = w + 1, y = x + 1, z = z + 1) {
  console.log(x, y, z);
}
foo(); // 报错 暂时性死区 z is not defined

var w = 1,
    y = 6;
function foo (x = w + 1, y = x + 1) {
  console.log(x, y);
}
foo(); // 2 3  

let a = 99;
function foo (b = a + 1) {
  console.log(b);
}
foo(); // 100
a = 100;
foo(); // 101
// 参数传值每次都是重新计算的，不会保留上次的执行结果。
// 函数的参数为表达式的情况下，加载的方式是惰性求值的方式，每一次都需要计算表达式的值。

// ES6新增的语法特性：解构赋值

let a = 1,
    b = 2,
    c = 3;

let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3

// 解构依然是一种赋值的过程。
// 解构是通过模式匹配（结构化赋值）的方式进行赋值的，需要保证结构一致。

let [d, [e], [f]] = [1, [2]. [3]];
console.log(d, e, f); // 1 2 3

let [a, [b, c], [d, [e, f, [g]]]] = [1, [4, 3], [5, [1, 3, [2]]]];
console.log(a, b, c, d, e, f, g); // 1 4 3 5 1 3 2

// 解构失败，变量多，匹配不到的值是undefined，以undefined作为填充。

// 不完全解构：值多，并没有完全解构。

// 解构的默认值

let [a = 6] = [1];
console.log(a); // 1

let [a = 6] = [];
console.log(a); // 6

let [a, b = 2] = [1];
console.log(a, b); // 1 2

let [a, b = 2] = [1, null];
console.log(a, b); // 1 null

let [a, b = 2] = [1, false];
console.log(a, b); // 1 false

let [a, b = 2] = [1, NaN];
console.log(a, b); // 1 NaN

function test () {
  console.log(10);
}
let [x = test()] = [1];
console.log(x); // 1

// 默认值可以是函数
function test () {
  console.log(10);
}
let [x = test()] = [];
console.log(x); // undefined

// 默认值可以是变量
let [x = 1, y = x] = [];
console.log(x, y); // 1 1

let x = 5;
let [x = 1, y = x] = [];
console.log(x, y); // x 已经被定义

let [x = 1, y = x] = [2];
console.log(x, y); // 2 2

let [x = 1, y = x] = [1, 2];
console.log(x, y); // 1 2

let [x = y, y = 1] = [];
console.log(x, y); // 报错 y is not defined

// 对象解构

// 对象拓展

let obj = {};        
let obj1 = new Object(); // 不常用
let obj2 = Object.create(null); // 可以指定原型 不常用

obj.name
obj.name = 'yueluo'
obj['name'] = 'yueluo'
delete obj.name

var name = 'yueluo',
    age = 14;

var person = {
  name: name,
  age: age,
  sex: 'male',
  eat: function () {
    console.log('eating');
  }
}
console.log(person);

// ES6 变量和属性名一致时可以简写，
// 定义方法的functoin关键字也可以省略。
var name = 'yueluo',
    age = 14;
var person = {
  name,
  age,
  sex: 'male',
  eat () {
    console.log('eating');
  }
}
console.log(person);
console.log(person.eat());

// ES6支持属性拼接

let firstName = 'ai',
    secondName = 'xiaoye',
    name = 'ai xiaoye';
let person = {
  [firstName + secondName]: name
}

// 解构需要结构完全一致，通过属性名称获取对应的名称的值。
let { a: a, b: b, c: c } = { a: 1, b: 2, c: 3 };
console.log(a, b, c); // 1 2 3

// 变量和属性名一致时，可以简写。
let { a, b, c } = { a: 1, b: 2, c: 3 };
console.log(a, b, c); // 1 2 3

// 解构都存在不完全解构和解构失败的情况。

// 不完全解构
let { a = 2, b } = { a: 1, b: 2, c: 3 };
console.log(a, b); // 1 2 

// 解构失败
let { a = 2, b, c, d, e, f } = { b: 2, c: 3 };
console.log(a, b, c, d, e, f); // 2 2 3 undefined undefined undefined
// 解构失败默认为undefined。

let [d, [e], [f]] = [2, [1], [3]];
console.log(d, e, f); // 2 1 3
// 数组解构存在顺序问题。

let { a, b, c } = { b: 2, a: 1, c: 3 }; 
console.log(a, b, c); // 1 2 3
// 对象结构不存在顺序问题。

var person = {
  name: 'zhangsan',
  son: {
    name: 'lisi',
    age: 30,
    son: {
      name: 'wangwu',
      age: 12
    }
  }
}
let { son: { son: { name } } } = person;
console.log(name); // wangwu

let { a } = { a: 1 };
console.log(a); // 1

let a;
{ a } = { a: 1 };
console.log(a); // 报错 语法错误 认为{a}作用域，需要转为表达式

let a;
({ a } = { a: 1 });
console.log(a); // 1
// 通过括号的方式转为表达式。

// 模式匹配本质是声明一个变量，通过模式匹配的方式进行变量的赋值。

let  a = [1, 2, 3],
    obj = {};
[obj.a, obj.b, obj.c] = a;
console.log(obj); // { a: 1, b: 2, c: 3 }

let [a] = [1];
console.log(a); // 1

let { a: b } = {};
console.log(b); // undefined

let [(a)] = [1]; // 语法错误
let { a: (b) } = {}; // 语法错误
let { (a): b } = {}; // 语法错误
let ({a: b}) = {}; // let is not defined
// 当用let或者var声明时，只要使用（）就报错。

function ((z)) {} // 语法错误

function foo ([z]) {
  return z;
}
console.log(foo([2])); // 2
// 函数传参也相对于变量的声明。
// 通过函数定义参数时，不能使用（），报错。

let arr = [1, 2, 3];
let { 0: first, [arr.length - 1]: last } = arr;
console.log(first, last); // 1 3
// 数组本身也是一种对象，可以使用对象进行解构，只要规则属性相同，就可以获取对应的值。

[(b)] = [3];
console.log(b); // 3

([b]) = [3];
console.log(b); // 报错

({a: (b) = {}});
console.log(b); // {} 作为默认值处理，本身并没有进行匹配

var a = {};
[(a.b)] = [3];
console.log(a); // {b: 3}

let a = 'x',
    b = 'y',
    obj = {};
({ a: obj[a + b] } = { a: 2 });
console.log(obj); // { xy: 2 }

let obj = { a: 1, b: 2, c: 3 },
    obj2 = {};
({ a: obj2.x, b: obj2.y, c: obj2.z } = obj)
console.log(obj2); // {x: 1, y: 2, z: 3}

// 数值交换
let a = 10,
    b = 20;
[a, b] = [b, a];
console.log(a, b); // 20 10

// 解构赋值是指变量的解构，变量的解构。
// 变量的解构本质就是变量的赋值。
// 解构使用模式匹配的方式。

let { a: x, a: y } = { a: 1 };
console.log(x, y); // 1 1
// 模式匹配允许匹配同源属性（同一个源属性）。 

let person = {
  name: 'zhangsan',
  age: 50,
  son: {
    name: 'lisi',
    ageLi: 30,
    son: {
      name: 'wangwu',
      ageWang: 18,
      son: {
        name: 'zhaoliu',
        ageZhao: 3
      }
    }
  }
}
let { son: { son: { son } } } = person;
console.log(son); // {name: "zhaoliu", ageZhao: 3}
let { son: { son: { son: { ageZhao }, ageWang }, ageLi } } = person;
console.log(ageLi, ageWang, ageZhao); // 30 18 3
let { 
  son: {
    son: {
      son: { 
        ageZhao
      }, 
      ageWang 
    }, 
    ageLi 
  } 
} = person;
console.log(ageLi, ageWang, ageZhao); // 30 18 3
// 主张通过合理的缩进来规范解构赋值。为了增加可读性可以使用缩进。

var x = 200,
    y = 300,
    z = 100;
var obj = { x:  { y: 42 }, z: { y: z } };
({ y: x = { y: y } } = obj); // undefined -> x = { y: 300 }
({ z: y = { y: z } } = obj); // y = { y: z } -> y = { y: 100 }
({ x: z = { y: x } } = obj); // z = { y: 42 } 
console.log(x.y, y.y, z.y); // 300 100 42
// 使用对象或数组解构赋默认值的这种方式，慎用（可读性较差）。

// 以数组解构的方式传递参数。
function test ([x, y]) {
  console.log(x, y); 
} 
test([1, 2]); // 1 2
test([1]); // 1 undefined
test([]); // undefined undefined
test(); // 报错

function foo ({ x, y }) {
  console.log(x, y);
}
foo({ y: 2, x: 1 }); // 1 2
foo({ x: 1, y: 2 }); // 1 2
foo({ x: 1 }); // 1 undefined
foo({ }); // undefined
foo(); // 报错

function foo ({ x = 10 } = {}, { y } = { y: 10 }) {
  console.log(x, y);
}
foo(); // 10 10
foo({}, {}); // 10 undefined
foo({ x: 2 }, { y: 3 }); // 2 3

({ x = 10 } = {}); 
console.log(x); // 10 
({ y } = { y = 10 });
console.log(y); // 10

const [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e); // h e l l o
// 字符串隐式转换为类数组，从而可以打印出对应值。

let { length: len } = 'hello';
console.log(len); // 5            

let { toString: toStr } = 123;
console.log(toStr); // function toString () { }
console.log(toStr === Number.prototype.toString); // true

let { toString: toStr } = false;
console.log(toStr === Boolean.prototype.toString); // true

// boolean、number、string 都能进行隐式转换。

let { prop  } = undefined;
console.log(prop); // 报错

let { prop  } = null;
console.log(prop); // 报错

// undefined、null 没有包装类，不能进行隐式转换。

function test (a, b) { }
test(1);
console.log(test.length); // 2

function test (a, b, c = 1) { }
test(1);
console.log(test.length); // 2

function test (c = 1, a, b) { }
test(1);
console.log(test.length); // 0

function test (a, b, c = 1, d, e) { }
test(1);
console.log(test.length); // 2

// 根据当前给的默认值，实际打印的形参长度会发生变化。
// 依据当前赋默认值的位置，向前计数。

function test (a, b, c, d) {
  arguments[1] = 7;
  console.log(b); // 7
}
test(1, 2, 3, 4, 5);

function test (a, b, c = 1, d) {
  arguments[1] = 7;
  console.log(b); // 2
}
test(1, 2, 3, 4, 5);

function test (a, b, c, d = 1) {
  arguments[1] = 7;
  console.log(b); // 2
}
test(1, 2, 3, 4, 5);

// 当一旦给默认值时，arguments的映射关系就不存在。

function foo ({ x, y = 5  }) {
  console.log(x, y);
}
foo({}); // undefined 5 
foo({ x: 1 }); // 1 5
foo({ x: 1, y: 2 }); // 1 2
foo(); // 报错  undefine和null不能经过包装

function foo ({ x, y = 5 } = {}) {
  console.log(x, y);
}
foo(); // undefined 5 不会报错，达到兼容性的处理

function fetch (url, { body = "", method = "GET", header = {} } = { }) { } 
// fetch的兼容性处理

var x = 1;
function foo (x = x) {}
// 报错 x is not defined  TDZ 暂时性死区

// undefined 和 is not defined

// undefined 没有值
// is not defined 变量没有声明

var x = 1;
function foo (x, y = function() { x = 2; console.log(x) }) {
  var x = 3;
  y();
  console.log(x);
}
foo(); // 2 3
console.log(x); // 1

var x = 1;
function foo (x, y = function() { var x = 2; console.log(x) }) {
  var x = 3;
  y();
  console.log(x);
}
foo(); // 2 3
console.log(x); // 1
// 参数存在参数作用域（块级作用域）。

var x = 1;
function foo (x, y = function() { x = 2; console.log(x) }) {
  x = 3;
  y();
  console.log(x);
}
foo(); // 2 2
console.log(x); // 1

// 1. 默认绑定
// 函数内部默认this指向window，严格模式下指向undefined

// 2. 隐式绑定
// 谁调用this就指向谁

// 3. 显示绑定
// call/apply/bind 改变this指向，如果不是对象，会转为对应的包装类

call(obj, a, b, c);
apply(obj, [a, b, c]);
bind(obj, a, b, c);

// 4. new 

// 构造函数实例化的时候，将this指向转变为实例化对象。
// new的优先级最高，显示绑定大于隐式绑定，隐式绑定大于默认绑定。
// new > 显示绑定 > 隐式绑定 > 默认绑定

// 只有一个参数

var f = ( a ) => a;
var f = function (a) {
  return a;
}

// 无参数

var f = () => 5;
var f = function () {
  return 5;
}

// 多个参数

var f = (a, b) => a + b;
var f = function (a, b) {
  return a + b;
}

// 不定长参数

var f = (..args) = 5;

let f = (a, b) => {
  var a = 3;
  var a = 4;
  console.log(a + b);
}
f(); // 7

// 箭头函数和解构赋值同时使用
const full = ({ first, last } = {}) => first + '' + last;
console.log(full({ first: 'yue', last: 'luo' }));

var arr = [1233, 2323, 2, 435, 121, 686, 3];
var arr2 = arr.sort((a, b) => a - b);
console.log(arr2); // [2, 3, 121, 435, 686, 1233, 2323]

var sum = (a, b) => {
  console.log(arguments);
  return a + b;
}
sum(1, 2); // arguments is not defined
// 箭头函数中不存在arguments。
// 箭头函数并不是使用function关键字来定义的，本质是两个东西。

// rest运算符，也叫spread运算符。用来展开或收集。

var sum = (...args) => { // 收集原则
  console.log(args); // [1, 2, 3] 数组，不是类数组
}
sum(1, 2, 3); 

function foo (x, y, z) {
  console.log(x, y, z);
}
foo(...[1, 2, 3]); // 1 2 3 展开原则
foo.apply(null, [1, 2, 3]);      
foo.apply(undefined, [1, 2, 3]);
// 使用apply时，传入null或undefined，指向失败，调用方还是原来的this指向。

let a = [2, 3, 4],
    b = [1, ...a, 5];
console.log(b); // [1, 2, 3, 4, 5]
console.log([1].concat(a, [5])); // [1, 2, 3, 4, 5]     

let fn = (a, b, ...c) => {
  console.log(a, b, c);
}
fn(1, 2, 3, 4, 5, 6, 7); // 1 2 [3, 4, 5, 6, 7]
// 收集剩余参数的所有部分，拓展运算符必须是最后一个参数。

//数组排序：

function sortNum () {
  return Array.prototype.slice.call(arguments).sort(function (a, b) {
    return a - b;
  });
}
console.log(sortNum(12, 2313, 12, 2, 2124, 3434124, 1, 123)); //  [1, 2, 12, 12, 123, 2124, 2313, 3434124]

const sortNum = (...args) => args.sort((a, b) => a - b);
console.log(sortNum(12, 2313, 12, 2, 2124, 3434124, 1, 123)); //  [1, 2, 12, 12, 123, 2124, 2313, 3434124]

console.log((function (a) {}).length); // 1
console.log((function (...a) {}).length); // 0
console.log((function (b, ...a) {}).length); // 1
console.log((function (b, c, ...a) {}).length); // 2
console.log((function (b, c, d = 0, ...a) {}).length); // 2
// 默认值和rest操作符都不能通过length属性访问到长度，会访问之前参数的长度。length不再准确。

(a, b) => ({ a: 1, b: 4 })
// 返回一个对象的基本形式

// 不定长参数：rest运算符 - 拓展运算符 - 展开运算符 
function fn (first, last, ...args) { }
fn(1, 2, 3, 5, 4, 5);

// 箭头函数本身并不是由function关键字定义的，是由胖箭头（=>）的操作符来定义的。
// 本质上不是一个东西。

// 箭头函数this指向是由外层的函数作用域来决定的，和function不同。
// 箭头函数不能作为构造函数来使用。
// 箭头函数没有arguments对象，使用rest（拓展运算符）替代。
// 箭头函数使用generator，yield命令不能生效。

function foo () {
  return (a) => {
    console.log(this.a);
  }
}
var obj1 = { a: 2 },
    obj2 = { a: 3 };
var bar = foo.call(obj1);
bar.call(obj2); // 2
// 箭头函数的作用域是由外层函数决定的，执行时foo的this指向obj1。

const person = {
  eat () {
    console.log(this);
  },
  drink: () => {
    console.log(this);
  }
}
person.eat(); // person
person.drink(); // window

(function () {
  function Button () {
    this.button = document.getElementById('button');
  }

  Button.prototype = {
    init () {
      this.bindEvent();
    },

    bindEvent () {
      // this.button.addEventListener('click', this.btnClick.bind(this), false);
      this.button.addEventListener('click', () => this.btnClick(), false);
    },

    btnClick () {
      console.log(this);
    }
  }

  new Button().init();
})();

function foo () {
  return () => {
    return () => {
      return () => {
        console.log('id', this.id);
      }
    }
  }
}
var f = foo.call({ id: 1 }),
    f1 = f.call({ id: 2 })()(),
    f2 = f().call({ id: 3 })(),
    f3 = f()().call({ id: 4 });
// 1 1 1 

//箭头函数内部没有this的机制，this指向是固化的，访问的都是最外层的this。
// 箭头函数this指向固化 -> 内部没有this机制 -> 只能通过父级作用域来获取this，闭包的this
//    -> 不能作为构造函数来使用 -> 使用call/apply/bind无效

var test = () => {
  console.log(arguments); // arguments is not defined
}
test();

function foo () {
  setTimeout(() => {
    console.log(arguments); // Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
  }, 200);
}
foo(1, 2, 3, 4, 5); 
// 箭头函数的确不存在arguments对象，但是可以获取外层作用域的arguments对象。

// 一个函数执行导致另一个函数的定义，就会形成闭包。

function insert (value) {
  return {
    into: function (array) {
      return {
        after: function (afterValue) {
          array.splice(array.indexOf(afterValue) + 1, 0, value)
          return array;
        }
      }
    }
  }
}
console.log(insert(5).into([1, 2, 3, 4, 6, 7, 8]).after(4));

const insert = (value) => ({
  into: (array) => ({
    after: (afterValue) => {
      array.splice(array.indexOf(afterValue) + 1, 0, value)
      return array;
    }
  })
})
console.log(insert(5).into([1, 2, 3, 4, 6, 7, 8]).after(4));