2016前端学习（一）

之前说了那么多雄心壮志的话，包括喝了浓浓的鸡汤，总要做点什么咯？是吧，没有人可以动动嘴皮子或者码点字就去改变世界的（特定的人除外）。so，向着前端架构师的方向，有距离不可怕，可怕的是想要前进的渴望和信仰。

会慢慢总结一些关于前端学习方面的知识，同时也要跟上看书的节奏。
首先先回顾下这些呗，听说是某个面试官leader出的题：js 数据类型以及判断，原型和继承，基于闭包实现唯一生成id，跨域，jsonp 具体实现代码，dom事件和自定义事件系统，前端路由，具体组件api设计和开发；css 常用布局属性，盒模型相关，position，sticky 效果，flex 布局。

一、JS数据类型已经判断

javascript中的数据类型主要分为以下几种：

1、Number
2、String
3、Boolean
4、Null
5、Undefined
6、Object

前五种是JS的基本类型，最后一种Object 包括几种特殊的类型，包括有Function, Array等等。

首先先回顾一下判断类型的几种方法：

1、typeof // 直接判断类型

2、instance // 判断变量是否从某个对象中构造器来？

3、Object.prototype.toString.call() // 使用对象原型链上的方法

typeof

首先定义一些常用的变量，例如下面并且输入它们的typeof的值

var i = 233;
var s = 'string';
var b = true;
var n = null;
var u;
var o = new Object();

var w = new RegExp();
var x = [];
var y = {};
var z = function () {};

输入上面各个值的typeof

console.log(typeof i);  // number
console.log(typeof s); // string
console.log(typeof b); //boolean
console.log(typeof n); // object 
console.log(typeof u); // undefined
console.log(typeof o); // object

console.log(typeof w); // object
console.log(typeof x); // object
console.log(typeof y); // object
console.log(typeof z); // function

上述代码中可以看到，基本类型中，除了null之外都会返回正常的类型判断。至于typeof null 为什么会等于object? 1995年JS诞生时，根本没把null当作数据类型，而是Object的一种特殊值。下面是当年C源码，其中完全没考虑null。这就是typeof null === object的根本原因。。。

那么简单的number，string， boolean， undefined可以直接使用typeof 进行判断。

而下面其中特殊的对象类型function使用typeof检测也可以返回正确的值

instanceof

如果变量是给定引用类型的实例时，instanceof操作符就会返回ture。

var instanceofVariable = function (variable, type) {
    "use strict";

    console.log(variable instanceof type);
};

instanceofVariable(i, Number);   // false
instanceofVariable(s, String);     // false
instanceofVariable(b, Boolean); // false
instanceofVariable(n, Object);   // false
// instanceofVariable(u, ...); 
instanceofVariable(o, Object);   // true

instanceofVariable(w, RegExp); // true
instanceofVariable(x, Array);     // true
instanceofVariable(y, Object);   // true
instanceofVariable(z, Object);   // true

上述代码的结果可见，instanceof只能用于检测对象类型的数据, 然后null instanceof Object === false

Object.prototype.toString.call

那么问题来了？如果判断一个对象类型呢？不可能去每一种对象类型都去判断一下，所以我们使用Object.prototype.toString.call，已经每个对象的原型链末端均为Object，也就是说每个对象都是Obect的实例，使用可以调用Object原型链上的toString方法。

var toStringCall = function (variable) {
    "use strict";

    console.log(Object.prototype.toString.call(variable));
};

toStringCall(i);  // [object Number]
toStringCall(s);  // [object String]
toStringCall(b);  // [object Boolean]
toStringCall(n);  // [object Null]
toStringCall(u);  // [object Undefined]
toStringCall(o);  // [object Object]

toStringCall(w);  // [object RegExp]
toStringCall(x);  // [object Array]
toStringCall(y);  // [object Object]
toStringCall(z);  // [object Function]

WOW

使用Object.prototype.toString.call返回了所以的正确结果咯，然后为什么基本类型也会返回？

在ES5中Object.prototype.toString规范如下

15.2.4.2 Object.prototype.toString ( )
在toString方法被调用时,会执行下面的操作步骤:
1、如果this的值为undefined,则返回”[object Undefined]”.
2、如果this的值为null,则返回”[object Null]”.
3、让O成为调用ToObject(this)的结果.
4、让class成为O的内部属性[[Class]]的值.
5、返回三个字符串”[object “, class, 以及 “]”连接后的新字符串.

总结：

1、那么对于基本类型的判断除null以外可以使用typeof
2、对于特性的对象可以使用instanceof判断
3、对于未知的对象类型，使用Object.prototype.toString判断即可。

不过貌似ES6中能有新的类型，到时候在添上。

PS，上述中遗漏了Date类型的对象，可以自行添加

一、JS数据类型已经判断

typeof

instanceof

Object.prototype.toString.call

总结 ：

总结：