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的值

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
5
6
7
8
9
10
11
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的根本原因。。。
image

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

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

instanceof

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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类型的对象,可以自行添加