JS 知识点

盒子模型

对于非替换的行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（行高）由 line-height
属性决定

box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
content-box：默认值，标准盒子模型。width = 内容的宽度，height = 内容的高度。
border-box：width = border + padding + 内容的 width，height = border + padding + 内容的 height。

es6新特性

ES6常用语法整合
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。
class

class Cons{
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  getMes() {
    console.log(`hello ${this.name} !`);
  }
}
let mesge = new Cons('ashin', 3)
mesge.getMes()

class Ctrn extends Cons {
  constructor(name, anu) {
    super(name)
    this.anu = anu
  }

  ingo() {
    console.log(`${this.name} & ${this.anu}`);
  }
}

let ster = new Ctrn('ashin', 3)
ster.getMes()
ster.ingo()

箭头操作符

var arr = [1,2,3]
arr.forEach(x=>console.log(x))

解构赋值
数组中的值会自动被解析到对应接收该值的变量中

var [name,,age] = ['a', 'b', 3]
console.log(name + age);

默认参数
定义函数的时候指定参数的默认值

// es5
function fn(name) {
  var name = name || 'a'
  console.log(name);
}
fn()//a

// es6
function fn(name='b') {
  console.log(name);
}
fn()//b

多行字符串
使用反引号`来创建字符串

//ES5

var str = 'The 3.1 work extends XPath and'
  +'XQuery with map and array data structures'
  +'along with additional functions and operators'
  +'for manipulating them; a primary motivation'
  +'was to enhance JSON support.';

//ES6

var roadPoem = `The 3.1 work extends XPath and
  XQuery with map and array data structures
  along with additional functions and operators
  for manipulating them; a primary motivation
  was to enhance JSON support.`;

字符串模版
由美元符号加花括号包裹的变量${name}

var name = 'will';
console.log(`my name is ${name}`);

扩展运算符

// es5
function add() {
  var arr = Array.prototype.slice.call(arguments)
  console.log(arr.reduce((x,y)=>x+y));
}
add(1,2,3)

// es6
function add(...args) {
  console.log(args.reduce((x,y)=>x+y));
}
add(1,2,3)

块级作用域
let与const 关键字！可以把let看成var，它定义的变量被限定在了特定范围内。const则用来定义常量，即无法被更改值的变量。共同点都是块级作用域。

//let
for (let i=0;i<2;i++){
  console.log(i);//输出: 0,1
}
console.log(i);//输出：0?

//const
const name='a';
name='b';   //报错

模块

// b.js
function fn(){
    console.log('hello world');
}
export fn;  

// a.js
module { fn } from "./b";
fn();
// 然后在HTML引入a文件运行

for of
我们都知道for in循环用于遍历数组，类数组或对象，ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值。

var a = ['a', 'b', 'c']
for(x in a) {
  console.log(x);
} // 0 1 2

for(x of a) {
  console.log(x);
} // a b c

javascript中的面向对象

构造函数继承

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

非构造函数继承

function object(o) {
　　　　function F() {}
　　　　F.prototype = o;
　　　　return new F();
　　}

JavaScript 继承简单理解与实现
JavaScript 原型理解与创建对象应用

详解https是如何确保安全的？

事件捕获事件冒泡事件代理
JavaScript 详说事件机制之冒泡、捕获、传播、委托
javascript 有没有更高效的事件绑定写法？

Javascript的this用法

clone: Object.create(obj)
http://www.cnblogs.com/yugege/p/6526215.html