JS框架设计读书笔记之-小知识

这一篇写一点小知识

 

　　JS中0.1+0.2为什么不等于0.3?

 

　　关于这个问题之前也很疑虑，老师也只是笼统的讲这是JS的语言问题，但是内部具体的情况却没有讲，看了书才发现原理如此简单。

　　简单来讲，计算机识别的数字长度是有限制的，过大的数字计算会出现infinity或者NAN，这个好理解，但是为什么小数也会出现呢？如果从二进制的角度思考就很简单了，对于一定范围内的正数，总是可以表示成对应的二进制，但是小数就有问题了，十进制的0.5相当于热二进制的0.1，0.25 => 0.01，0.125 => 0.001，0.0625 => 0.0001...那么问题来了，0.1和0.2是多少？从这个规律来看，大概是0.01-0.001与0.001-0.0001的一个数，而且肯定是一个无限循环的数字。前面讲了，数字长度是有限的，碰到这种无限长的，只能从中间砍掉，比如0.1在二进制是0.0001100110011...的循环，可能在某个部位就砍掉了，丢失后面的循环；同理，0.2也被砍掉了，导致的结果就是被砍掉后的0.3000...004

 

　　new操作符做了什么?

 

1. 创建了一个空对象

2. instance.__proto__ = constructor.prototype

3. 将构造函数里面的 this => instance

4. 执行construtor里面的代码

5. 判定构造函数是否有返回值，没有返回默认为undefined，如果返回复合数据类型，直接返回，否则返回this

 

　　如何判断浏览器类型

 

// 判断是否在浏览器环境
var inBrowser = typeof window !== 'undefined';
// window.navigator.userAgent => 获取浏览器信息
// Google Chrome返回下列字符串
// Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
// IE8返回下列字符串
// Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Win64; x64; Trident/4.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3)
var UA = inBrowser && window.navigator.userAgent.toLowerCase();

// IE
var isIE = UA && /msie|trident/.test(UA);
// IE9
var isIE9 = UA && UA.indexOf('msie 9.0') > 0;
// edge
var isEdge = UA && UA.indexOf('edge/') > 0;
// android
var isAndroid = UA && UA.indexOf('android') > 0;
// IOS
var isIOS = UA && /iphone|ipad|ipod|ios/.test(UA);

 

　　Object.creat(null)

 

　　Object.create(null)会生成一种叫纯空对象的东西，没有toString、valueOf，什么都没有，在Object.prototype被污染或极需节省内存的情况下有用。

　　

 

　关于Object.preventExtensions/Object.seal/Object.freeze

　　

　Object.preventExtensions

 

1. 阻止添加本地属性

2. 可以删除本地属性

3. 可以修改本地属性

4. 可以添加原型属性

　　

　Object.seal

 

1. 阻止添加本地属性

2. 允许修改本地属性

3. 不允许删除本地属性，内部实现是遍历属性，并将configurable改为false

 

　Object.freeze

 

改都不可以了~

 

 

　　兼容问题

 

　　getElementById：IE6，IE7下会选取到name属性

　　[].slice.call()：IE6-IE8下无法切割NodeList，即DOM节点集合

　　getElementByTagName：IE6-IE8会混杂注释节点

　　getElementByName：只能选取表单元素

　　

 

　　关于querySelectorAll

 

　　该方法返回一个StaticNodelist对象，而常规的方法返回的是NodeList。

　　具体区别看下面代码就明白了。

    var tag = 'getElementsByTagName',
        query = 'querySelectorAll';
    console.log(document[tag]('div') == document[tag]('div')); //true
    console.log(document[query]('div') == document[query]('div')); //false

　　简单来讲，querySelectorAll每次都返回一个不一样的Object，而tag方法会从缓存中取。因此，普通方法要比querySelectorAll快上10倍以上。

　　另外，还有一个问题，IE8下，对StaticNodelist对象取不存在的下标不会返回undefined，而是抛出一个异常，这样的话while(len--){...}这样的表达式就不好使了。