ecma-262 6.0 class

ecma-262-6.0-class.md

How To Reading ECMA-262

http://www.ecma-international.org/ecma-262/6.0/#sec-class-definitions

14.5 Class Definitions

Syntax

ClassDeclaration[Yield, Default] :
    class BindingIdentifier[?Yield] ClassTail[?Yield]
    [+Default] class ClassTail[?Yield]
    
ClassExpression[Yield] :
    class BindingIdentifier[?Yield]opt ClassTail[?Yield]
    
ClassTail[Yield] :
    ClassHeritage[?Yield]opt { ClassBody[?Yield]opt }
    
ClassHeritage[Yield] :
    extends LeftHandSideExpression[?Yield]
    
ClassBody[Yield] :
    ClassElementList[?Yield]
    
ClassElementList[Yield] :
    ClassElement[?Yield]
    ClassElementList[?Yield] ClassElement[?Yield]
    
ClassElement[Yield] :
    MethodDefinition[?Yield]
    static MethodDefinition[?Yield]
    ;

NOTE A ClassBody is always strict code.

blogs

https://chadaustin.me/2012/12/javascript-new-operator-ecma-262/

https://stackoverflow.com/questions/2738736/confused-with-ecmascript-language-specification-function-calls-section

http://stackoverflow.com/questions/761905/how-will-ecma-262-ecmascript-5-help-you

https://blog.appdynamics.com/engineering/7-ways-es2015-can-improve-your-javascript-programing/

https://leanpub.com/understandinges6/read

https://lightrains.com/blogs/es6#classes

Function 构造函数

创建一个新的Function对象。 在 JavaScript 中, 每个函数实际上都是一个Function对象。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function

// 可以直接运行在 JavaScript 控制的代码例子

// 创建了一个能返回两个参数和的函数
const adder = new Function("a", "b", "return a + b");

// 调用函数
adder(2, 6);
//  8

Functions arguments

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments

arguments 是一个类似数组的对象, 对应于传递给函数的参数。

arguments对象是所有函数中可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。
此对象包含传递给函数的每个参数的条目，第一个条目的索引从0开始。
例如，如果一个函数传递了三个参数，你可以参考它们如下：

arguments[0]
arguments[1]
arguments[2]

参数也可以被设置:

arguments[1] = 'new value';

arguments对象不是一个 Array 。它类似于数组，但除了 长度之外没有任何数组属性。
例如，它没有 pop 方法。但是它可以被转换为一个真正的数组：：

let args = Array.prototype.slice.call(arguments); 

let args = [].slice.call(arguments);

你还可以使用 Array.from()方法或 spread 运算符将 arguments 转换为真正的数组：

let args = Array.from(arguments);
let args = [...arguments];

Array.from()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Array.from() 方法从一个类似数组或可迭代的对象中创建一个新的数组实例。

const bar = ["a", "b", "c"];

Array.from(bar);
// ["a", "b", "c"]

Array.from('foo');
// ["f", "o", "o"]

扩展语句

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator

扩展语法允许一个表达式在期望多个参数（用于函数调用）或多个元素（用于数组文本）或多个变量（用于解构赋值）的位置扩展。

用于函数调用:

myFunction(...iterableObj);

用于数组字面量:

[...iterableObj, 4, 5, 6]

更好的 apply 方法

在需要使用数组作为函数的参数的情况下,通常使用 Function.prototype.apply 方法:

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

如果使用了ES6的展开运算符,你可以这么写:

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

还可以同时展开多个数组:

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

Rest parameters

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters

剩余参数（rest parameter）语法允许我们将一个不定数量的参数表示为一个数组。

function(a, b, ...theArgs) {
  // ...
}

元编程

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Meta_programming

从ECMAScript 2015/ES6 开始，JavaScript获得对Proxy和 Reflect对象的支持，允许你拦截并定义基本语言操作的自定义行为（比如，属性查找，赋值，枚举，函数调用，等）。
借助这两个对象，你可以在JavaScript元级别（meta level）进行编程。

从ES6 开始采用的 Proxy 对象允许拦截某些操作操作和实现自定义行为。例如,获取一个对象上的属性：

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

let p = new Proxy({}, handler);
p.a = 1;

console.log(p.a, p.b); 
// 1, 42

Reflect

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

Reflect 是一个内置的对象，它提供可拦截JavaScript操作的方法。
Reflect方法与代理处理程序的方法相同。Reflect 不是一个函数对象，因此它是不可构造的。

let

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let

let 语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值。

es6-in-depth-let-and-const

http://blog.herobs.cn/es6-in-depth-let-and-const/

let 和 var 究竟有哪些具体的差异？

1. let 变量是块级作用域。其作用域只在块中，而不再是整个函数。

2. for (let x...) 循环将会给每次循环创建一个新的 x 绑定。

3. 任何尝试在 let 变量声明前使用变量将会抛出异常。(no hoisting ?)

4. 使用 let 重复声明变量将会引起 Syntax Error（语法错误）。

5. let 在严格模式是一个保留关键词，在非严格模式中，为了能够后向兼容，你任然可以使用 let 作为变量名、函数名和参数名.
   var let = 'aHa';

Closures

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

闭包是指这样的作用域，它包含有一个函数，这个函数可以调用被这个作用域所封闭的变量、函数或者闭包等内容。
通常我们通过闭包所对应的函数来获得对闭包的访问。

https://www.w3schools.com/js/js_function_closures.asp

let messages = ["Meow!", "I'm a talking cat!", "Callbacks are fun!"];
    for (var i = 0; i < messages.length; i++) {
        console.log(`inner i = ${i}`);
        setTimeout(function () {
            console.log(`messages[i] = ${messages[i]}`);
        }, 0);
    }
    console.log(`outer i = ${i}`);


let messages = ["Meow!", "I'm a talking cat!", "Callbacks are fun!"];
    for (let i = 0; i < messages.length; i++) {
        console.log(`inner i = ${i}`);
        setTimeout(function () {
            console.log(`messages[i] = ${messages[i]}`);
        }, 0);
    }
    console.log(`outer i = ${i}`);

const

1. const 声明的变量和 let 是一样的，但是你不能给他们赋值，否则将会抛出语法错误

2. 在声明 const 变量时, 给定初始值。

JavaScript 变量提升（Hoisting）

http://www.dongcoder.com/detail-270846.html

https://zonxin.github.io/post/2015/10/javascript-hoisting

http://www.jianshu.com/p/159b95d3e533

http://www.bbsmax.com/R/B0zqv2QJvL/

Closures

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

闭包是指这样的作用域，它包含有一个函数，这个函数可以调用被这个作用域所封闭的变量、函数或者闭包等内容。
通常我们通过闭包所对应的函数来获得对闭包的访问。

// global  var
var counter = 0;

function add() {
    counter += 1;
    console.log(counter);
}

add();
// 1
add();
// 2
add();
// 3


// local var
function add() {
    var counter = 0;
    // overwrite
    counter += 1;
    console.log(counter);
}

add();
// 1
add();
// 1
add();
// 1

闭包

function init() {
  let name = "Mozilla"; 
  // name 是一个被init创建的局部变量
  function displayName() { 
  // displayName() 是一个内部函数,
      alert(name); 
      //  一个闭包使用在父函数中声明的变量
  } 
  displayName();
}
init(); 

add()(); === var add = add(); add();

function add() {
    var counter = 0;
    return function () {
        console.log(counter);
        return counter += 1;
    }
}

add()();
// var add = add(); add();

es6 let & emoji

https://github.com/xgqfrms-GitHub/Native-JavaScript/blob/master/es6-emoji.html

https://jsfiddle.net/sybn4h33/3/

You can't comment at this time — your comment contains unicode characters above 0xffff.