JS 基础

函数

1、函数定义一：

function f(){
         var name;
         this.name;
 }
 f.name;
 f.prototype.name;

2、函数定义二：

var fun = new Function("arg" , "alert('arg');");  //  最后一个参数是方法体，前几个参数是fun的形参

3、组成：f作为构造函数时，this.name会覆盖 f.prototype.name；其他情况下，以上四个name没有任何关系

4、类型：typeof f == function；f instanceof Function == true; f instanceof Object == true;
5、this指向：作为对象成员函数时，this指向该对象；作为单独函数时，this指向window对象（全局）； 作为构造函数时，this指向将new出来的对象

作用域

函数作用域：var a

块作用域：let a ，const a

全局作用域：a，window.a 或 函数外 var a，let a；其中 let a 非 window.a

构造器

var f1 = function(){};

f1.prototype = new f(); // f1.prototype.constructor 默认为 f1 本身，但是f1.prototype可以被改变

var a = new f1();  // f1 是 a 的构造器

a.constructor // a.constructor不一定是其构造器，是其构造器的prototype.constructor，这里为 f

a.__proto__ == f1.prototype // a的原型即a.__proto__ == a的构造器的prototype

a.__proto__.__proto__ // 原型链，原型链最终指向 Object.prototype 即 {}.__proto__，进而指向 null

a instanceof f1 // true, a 是其构造器的实例

a instanceof f // true, a是其原型链节点的构造器的实例

f1.prototype.constructor = f1;  // 避免对象的constructor不是其构造函数 

原型链

添加成员：本对象和原型链都没有该成员。
修改成员：本对象和原型两至少一个有该成员。
删除成员：本对象有，原型有，值变成原型链里的值；本对象没有，原型有，删除不成功。
var f = function(){this.name = "aa";}
f.prototype.name = "dd";
var a = new f();
delete a.name;
console.log(a.name); //打印出 “dd”

闭包

在一个函数中定义另一个函数，内部函数使用了外部函数定义的变量。当外部函数被调用并返回，但仍有对内部函数的引用未被销毁（比如将内部函数返回出去并被赋值给了全局变量，或者在执行外部函数时就把内部函数赋值给了全局变量），此时被内部函数使用的外部函数中定义的变量不会被释放，未被释放的外部函数变量和这个内部函数，就构成了一个闭包。
function f(param){
   return {
       fn1:function(){
           param++;
           console.log(param);
        },
       fn2:function(){
           console.log(param);
       }
   }
}
var a = f(1);
var b = f(3);
console.log(a.fn1 === b.fn1); //false，每次执行定义函数语句都产生新的函数实例
a.fn1();//2
a.fn2();//2，函数fn1、fn2和变量param组成一个闭包
b.fn1();//4，每次调用f，都产生新的闭包
b.fn2();//4

闭包的应用：闭包揭示模块，函数柯里化

ECMAScript 5

ES（ECMAScript）Ecma国际制订的脚本标准
ECMA（European Computer Manufacturers Association，欧洲计算机制造商协会）
ECMAScript 1.0  1997
ECMAScript 2.0  1998
ECMAScript 3.0  1999
ECMAScript 5.0  2009
ECMAScript 5.1  2011
ECMAScript 6    2015

ES5新增方法

参考：http://www.ibm.com/developerworks/cn/web/1305_chengfu_ecmascript5/

Object

// 对象属性描述
var obj = {a:1};
var descriptor = Object.getOwnPropertyDescriptor(obj, "a"); //获取描述对象
descriptor.writable = false; //是否可写
descriptor.enumerable = false; //是否可枚举
Object.defineProperty(obj, "a", descriptor); // 设置属性的描述对象
// Get/Set访问器
var obj = {
    get age (){
        return value + 1;
    },
    set age (value){
        age = value +3;
    }
};
obj.age = 1; // 访问age时，会调用set age
// 访问器写在属性描述里
Object.defineProperty(obj, "age", {
        get: function () { return value + 1; },
        set: function (value) { age = value + 1; }
    });
// 以o为原型，创建一个对象
var obj = Object.create(o);
//获取键集合
Object.keys(obj);

Function.bind

var obj = { 
    name : "alex"
 }; 


 function func() { 
    console.log(this.name); 
 } 


 var func1 = func.bind(obj); 
 func1(); // 输出 alex 


 function add(a, b) { 
    return a + b; 
 } 


 var addBy5 = add.bind(this, 5); 
 addBy5(3); // 值为 8，只有一个形式参数

bind的实现
Function.prototype.bind = function(context) {
    var self = this;

    return function() {

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

        self.apply(context, args); 
    }
};

 Array
 Array.isArray(array); //判断是否是数组
 array.indexOf(3); // 查询元素位置
 array.lastIndexOf(4); // 查询元素倒数位置
 array.every(function(value, index, arr) { 
    return value % 2 === 0; 
 }); // 遍历元素，判断是否都满足
 array.some(function(value, index, arr) { 
    return value % 2 === 0; 
 }); // 遍历元素，判断是否有满足
 array.forEach(function(value, index, arr) { 
    console.log(value); 
 }); //遍历元素
 array.map(function(value, index, arr) { 
    return value * 2; 
 }); // 遍历元素，返回一个新的数组，其元素为function里返回的值 
 array.filter(function(value, index, arr) { 
    return value % 2 === 0; 
 }); // 遍历元素，返回一个新的数组，其元素为过滤出来的部分
array.reduce((total, value)=>{

  return total + value; // 遍历元素，让每个元素参与相同运算（例如累加），最终得到一个值

});

新增JSON
JSON.parse(jsonStr); 
JSON.stringify(object); 


新增严格模式
 "use strict" 

JavaScript 模式

 参考《JavaScript模式》

模块

命名空间
一个对象即这个对象的所有属性的命名空间，因为这些属性可以与其他对象的属性重名，而又是不同的变量。例如 $ 是 $.trim 的命名空间。

构造函数
构造函数返回的是对象，那么它构造的就是这个对象。如果没返回或者返回非对象，那么相当于返回的是this
构造函数的成员相当于它的静态成员

即时（自调用、自执行）函数
//利用匿名函数实现
(function(global){
    console.log();
})(this);   // 传入全局对象


模块模式：
命名空间模式
(function(global){
    global.module = {
        name:'d',
   getName:function(){
       return this.name;
   },
        init: function(){
       console.log('do some init');
   }
    };
    global.module.setName = function(){
    }
    global.module.init();
})(this);


构造器模式 （常用于UI组件定义，构造函数参数为包裹元素）
(function(global){
    var module = function(initParam){
   console.log('do some init');
}
module.prototype = {
   name:'d'
}
global.module = module;
})(this);

闭包揭示模式 （常用于工具组件定义）
//揭示模块的核心；闭包(外部函数声明私有属性，内部函数访问私有属性)、调用（外部函数自调用或者作为构造函数被调用）、揭示（内部函数被返回或者被赋予，可以被单独揭示或者作为对象的成员被揭示）
(function(global){  // 闭包
    var name = 'd';  // 私有属性
var getName = function(){
   return name;   // 访问私有属性
}
var setName = function(){
   
}
return {   // 揭示
   getName:getName,
setName:setName
}      
)(this);  //调用


命名空间结合闭包揭示：命名空间的成员是揭示模块
命名空间结合构造器：命名空间的成员是构造器模块
构造器结合命名空间：原型或构造器this的成员是命名空间模块
构造器结合闭包揭示：原型或构造器this的成员是揭示模块
闭包揭示结合命名空间：揭示模块揭示的是一个命名空间
闭包揭示结合构造器：揭示模块揭示的是一个构造器


//构造器this的成员是揭示模块
function man(){    //构造函数作为外部函数
    var name = 'a'; //私有属性
this.getName = function(){   // 内部函数单独被赋予
   return name;
}
}

//原型的成员是揭示模块
man.prototype = (function(){ //自调用函数作为外部函数
    var name = 'a';          // 私有属性
return {
   getName:function(){    // 内部函数作为对象的成员被返回
       return name;
   }
}
})();
 

设计模式

单例模式
function Singleton(){
    if(typeof Singleton.instance === 'Object'){
   return Singleton.instance;
}
Singleton.instance = this;
return this;
}
var o1 = new Singleton();
var 02 = new Singleton();
01 === 02; // true


工厂模式
function Maker(){}
Maker.factory = function(){
    return new Maker();
}


观察者模式（订阅发布模式，自定义事件，广播）

var observer = {
  events:{
    'success':[]
  },
  on: function(fn,type){
    type = type || 'any';
    if(!this.events[type]){
      this.events[type] = [];
    }
    this.events[type].push(fn);
  },
  off: function(fn,type){
  },
  trigger: function(type,arg){
    type = type || 'any';
    var fns = this.events[type];
    for(var i=0;i<fns.length;i++){
      fns[i](arg);
    }
  }
}

ECMAScript 6

 参考：http://es6.ruanyifeng.com/

 ES6支持：http://kangax.github.io/compat-table/es6/

一、新增类型

1、Symbol类型实例，用来当作唯一值

对象成员的key有两种，一种是字符串，一种是Symbol
let s1 = Symbol("描述")
a[s1] = 1;
a = {
   [s1]: 1

}

symbol 成员不能被遍历，可以通过以下方法获取：Object.getOwnPropertySymbols(object)

var s1 = Symbol.for("名称"); // 查找有名Symbol

Symbol.keyFor(s1); // 得到Symbol的名称

2、Class
//类，是对function.prototype的改造写法
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  static toString() { // 静态方法，通过类调用
    return '';
  }
}
// 实例化，是对new function的改造写法
let b = new Point();
// 继承，是对 prototype = new function 的改造写法
class ColorPoint extends Point {
}

3、新增数据结构 序列 Set
    var s = new Set([]);
s.add()、s.size、s.delete()、s.has()、s.clear()、set.forEach(function)
// Set 转 数组
var a = [...s]
4、新增数据结构 WeakSet
    与Set的区别：只能存放对象，不能遍历，垃圾回收时不会考虑它包含的引用
作用：可以用它来缓存DOM对象，DOM被删除时其资源会被回收，从而避免内存泄漏
5、新增数据结构 键值映射 Map
    var m = new Map([['key1','value1'],['key2','value2']);
m.set(key,'value'); //key 可以是对象
m.get()、m.has()、me.delete()、m.size、m.clear()、m.forEach(function)
//Map 转 数组
[...map.values()]

6、新增数据结构 WeakMap，特性同 WeakSet

二、语法

// 模块，变量声明，解构赋值，箭头函数，扩展运算符

export let [a, b] = (arr)=> [...arr]

1、模块

   export var m1 = 1;
   export{
       m1 as m4,
       m2,
  m3
   }
   export default m1; // 模块的默认成员
import {firstName, lastName as surname, year} from './profile'; 
import * as circle from './circle'; // 将所有输入放到对象 circle中
import m form './profile'; // 获取模块的默认成员
import {default as m} from './profile';// 获取模块的默认成员

2、变量声明
   let变量与var变量的区别：let变量在块内不会“声明提前”。块内声明了一个let变量，那么在这个声明前（暂时性死区）使用该变量会报错。function外声明的let变量也不会是全局变量。
   const常量只能 在声明时 初始化一次，   其他特性与let相同

3、解构赋值

   let [a, b, c] = [1, 2, 3];
   let {a,b} = {1,2};       // 适用于从对象里取出成员

   let [a,b] = '12';

   function({a, b}){}

3、箭头函数：this指向与外层一样，不能作为构造函数，不能作为Generator函数，没有arguments，没有prototype

4、扩展操作符... 与 for-of循环

可遍历对象（Array、Map、Set、String、arguments、NodeList、Generator函数值）有一个成员是[Symbol.iterator]，即遍历器生成方法，可以用for...of 遍历

let array =  [...iterable] // 可遍历对象转数组

let object = {...iterable}    // 适用于从对象里取出成员 放到 新对象里

二、扩展

1、对象 扩展
   冻结： Object.freeze(object); //使得object的成员不能被改变
   严格相等：Object.is({}, {}); // false
   合并：Object.assign(o1,o2);  // 适用于从对象里取出成员 覆盖到 已有对象
   //成员定义方式扩展
   var x = 1;
   var o = {
       x, // 成员属性简写,等价于 x:x；适用于将成员放入新对象里
  f(){
     // 成员方法简写,等价于 f:function(){}
  },
  [x]:1 // 属性名表达式，等价于 o[x] = 1;
   }
   // 原型
   设置原型：Object.setPrototypeOf(o1, o2); // 相当于 o1.__proto__ = o2
   获取原型：Object.getPrototypeOf(obj); //相当于 obj.__proto__

 Object.keys()，Object.values()
2、字符串扩展
    新增方法： includes()、startsWith()、endsWith()、repeat()、String.raw(加上转义)
模板字符串：`` 包裹，可以书写多行字符串。字符串中可以通过 ${} 来引用上下文中的变量
3、数组扩展
   Array.form(类数组转数组)，Array.of(一组值转数组)
   [].find(function(){return boolean;//查找})，[].findIndex()，[].fill(用给定值填充)，[].includes()
   // 遍历器，也适用于 Set、Map
   遍历键：for (let index of ['a', 'b'].keys()) {  }
   遍历值：for (let elem of ['a', 'b'].values()) {}
   遍历键值对：for (let [index, elem] of ['a', 'b'].entries()) {}
4、函数扩展
   参数默认值
   function f(x=1){
   }
   // 解构赋值 结合 参数默认值
   function f({x, y = 5}) {
      return [x, y];
   }
   function f({x, y} = { x: 0, y: 0 }) {
      return [x, y];
   }
   // rest参数（剩余参数），... 理解为展开运算符，把一个对象展开成用逗号隔开的序列
   function f(...values){
      for (var val of values) {
      }
   }
   // 解构赋值 结合 rest参数（ES7）
   let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
   // 函数名
   f.name
   // 函数绑定 （ES7）

   foo::bar;   // 等同于   bar.bind(foo);

四、异步编程

1、Generator函数
function* gen() {
  yield 'hello';
  var reset = yield 'world';
  return reset;
}
var hw = gen(); // 得到状态遍历器
hw.next() // 遍历，得到{ value: 'hello', done: false }

hw.next(0) // 0 传给 reset

2、Promise 对象

const promise = new Promise(function(resolve, reject) {
  
});
promise.then(result => {···}).catch(error => {···}).finally(() => {···});
Promise.all(promises)
Promise.race(promises)

3、async 函数
相当于 Generator函数 + 自动执行器，Generator函数内 yield promise，自动执行器 hw.next().then(result => {hw.next(result)})
const asyncReadFile = async function () {
  const f1 = await readFile('/etc/fstab');  // 将 readFile 的结果赋给 f1，再进行下一步
  const f2 = await readFile('/etc/shells');  // await 只能在 async 函数中使用

  return 1;  // 会被包装成一个promise
};

asyncReadFile(); // 返回 Promise 对象

总结：

async 用来声明函数，作用1：把函数的返回值 包装 成 promise；作用2：async函数里面await才能使用

await 用来调用异步方法（返回promise的方法）

五、对象操作

1、Proxy对象，新对象重载了原对象或原方法的默认行为(get,set,apply)
var newObj = new Proxy(obj, handlers);

2、Reflect，提供对象操作的等效(proxy前)方法(set,get,has,definedProperty,deleteProperty,apply)

六、修饰器

//类修饰器
function decorator(target) {
  target.prototype.isTestable = true;
}
@decorator  
class A {}
// 等同于
A = decorator(A) || A;  // 这段代码在编译时运行，而非运行时
//方法修饰器
function readonly(target, name, descriptor){
  descriptor.writable = false;
  return descriptor;
}
class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}
// 类似于
Object.defineProperty(Person.prototype, 'name', readonly(Person.prototype, 'name', descriptor));