学习笔记（es6 react vue）

一、Symbol

以下内容都是学习软一峰的es6的笔记，详情请参考http://es6.ruanyifeng.com/

1.ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值，可以保证不会与其他属性名产生冲突。

使用一：

let s = Symbol();
typeof s
// "symbol"

使用二:参数只是用来描述

var s1 = Symbol('foo');
var s2 = Symbol('bar');

s1 // Symbol(foo)
s2 // Symbol(bar)

s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"

2.Symbol 值不能与其他类型的值进行运算，会报错。

3.Symbol 值可以显式转为字符串和布尔值，但是不能转换为数值

4.由于symbol的特性，所以可以将其用在对象属性上，这样可以避免某个属性被覆盖或者改写。

var mySymbol = Symbol();

// 第一种写法
var a = {};
a[mySymbol] = 'Hello!';

// 第二种写法
var a = {
  [mySymbol]: 'Hello!'
};

// 第三种写法
var a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

5.Symbol 值作为对象属性名时，不能用点运算符。

var mySymbol = Symbol();
var a = {};

a.mySymbol = 'Hello!';
a[mySymbol] // undefined
a['mySymbol'] // "Hello!"

6.在对象的内部，使用 Symbol 值定义属性时，Symbol 值必须放在方括号之中。

let s = Symbol();

let obj = {
  [s]: function (arg) { ... }
};

obj[s](123);

let obj = {
  [s](arg) { ... }
};

7.Symbol 值作为属性名时，该属性还是公开属性，不是私有属性。

8.作用：

定义一组常量，保证常量组里面的值是不相等的

log.levels = {
  DEBUG: Symbol('debug'),
  INFO: Symbol('info'),
  WARN: Symbol('warn')
};
log(log.levels.DEBUG, 'debug message');
log(log.levels.INFO, 'info message');

保证逻辑正确执行

const COLOR_RED    = Symbol();
const COLOR_GREEN  = Symbol();

function getComplement(color) {
  switch (color) {
    case COLOR_RED:
      return COLOR_GREEN;
    case COLOR_GREEN:
      return COLOR_RED;
    default:
      throw new Error('Undefined color');
    }
}

 二、js的继承

以下内容是这篇文章里面内容的复制品，只是为了以后自己方便查看：http://www.cnblogs.com/ayqy/p/4471638.html

1.基本概念

/*
 * 约定
 */
function Fun(){
    // 私有属性
    var val = 1;        // 私有基本属性
    var arr = [1];      // 私有引用属性
    function fun(){}    // 私有函数（引用属性）
 
    // 实例属性
    this.val = 1;               // 实例基本属性
    this.arr = [1];             // 实例引用属性
    this.fun = function(){};    // 实例函数（引用属性）
}
 
// 原型属性
Fun.prototype.val = 1;              // 原型基本属性
Fun.prototype.arr = [1];            // 原型引用属性
Fun.prototype.fun = function(){};   // 原型函数（引用属性）

2.原型链继承

function Super(){
    this.val = 1;
    this.arr = [1];
}
function Sub(){
    // ...
}
Sub.prototype = new Super();    // 核心
 
var sub1 = new Sub();
var sub2 = new Sub();
sub1.val = 2;
sub1.arr.push(2);
alert(sub1.val);    // 2
alert(sub2.val);    // 1
 
alert(sub1.arr);    // 1, 2
alert(sub2.arr);    // 1, 2

优点：

1. 简单，易于实现

缺点：

1. 修改sub1.arr后sub2.arr也变了，因为来自原型对象的引用属性是所有实例共享的。

   可以这样理解：执行sub1.arr.push(2);先对sub1进行属性查找，找遍了实例属性（在本例中没有实例属性），没找到，就开始顺着原型链向上找，拿到了sub1的原型对象，一搜身，发现有arr属性。于是给arr末尾插入了2，所以sub2.arr也变了

2. 创建子类实例时，无法向父类构造函数传参

3.构造函数

function Super(val){
    this.val = val;
    this.arr = [1];
 
    this.fun = function(){
        // ...
    }
}
function Sub(val){
    Super.call(this, val);   // 核心
    // ...
}
 
var sub1 = new Sub(1);
var sub2 = new Sub(2);
sub1.arr.push(2);
alert(sub1.val);    // 1
alert(sub2.val);    // 2
 
alert(sub1.arr);    // 1, 2
alert(sub2.arr);    // 1
 
alert(sub1.fun === sub2.fun);   // false

优点：

1. 解决了子类实例共享父类引用属性的问题

2. 创建子类实例时，可以向父类构造函数传参

缺点：

1. 无法实现函数复用，每个子类实例都持有一个新的fun函数，太多了就会影响性能，内存爆炸。。

4.组合

function Super(){
    // 只在此处声明基本属性和引用属性
    this.val = 1;
    this.arr = [1];
}
//  在此处声明函数
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...
function Sub(){
    Super.call(this);   // 核心
    // ...
}
Sub.prototype = new Super();    // 核心
 
var sub1 = new Sub(1);
var sub2 = new Sub(2);
alert(sub1.fun === sub2.fun);   // true

优点：

1. 不存在引用属性共享问题
2. 可传参
3. 函数可复用

缺点:

1. （一点小瑕疵）子类原型上有一份多余的父类实例属性，因为父类构造函数被调用了两次，生成了两份，而子类实例上的那一份屏蔽了子类原型上的。。。又是内存浪费，比刚才情况好点，不过确实是瑕疵

三、react进阶好文

https://www.v2ex.com/t/274697

https://segmentfault.com/a/1190000005990091

http://www.ruanyifeng.com/blog/2016/06/css_modules.html css modules的使用，可以结合less等

https://segmentfault.com/a/1190000008356407

 https://segmentfault.com/a/1190000008925295#articleHeader4 react性能优化