笔记：2019年3月

1、内联元素留白问题

在写小程序时，发现图片下方有留白的现象，
问题解决方法有很多

• 给外层元素加height属性
• 给image加vertical-align属性，top，middle，bottom都可以
• 用margin属性（不太建议）

搜索问题之后发现html中内联元素也有留白的问题。（即两个display：inline或inline-block的元素之间）
问题产生原因：
两个内联元素如果之间有换行，解析html时会当做一个空白节点。
解决方案：去掉元素之间的换行

2、实现new关键字

new关键字做了什么
1、创建一个对象
2、this指向这个对象
3、执行构造函数中的语句
4、返回这个对象（如果构造函数中有返回值，返回值若不是对象则仍然默认返回新创建的对象，返回值若是对象则返回构造函数返回的对象）

自己实现new

function create(Con,...args){
        var obj={};
        Object.setPrototypeOf(obj,Con.prototype);
        let result=Con.apply(obj,args);
        console.log('result',result);
        return result instanceof Object ? result : obj
    }
    function Test(name,age){
        this.name=name;
        this.age=age;
    }
    Test.prototype.say=function(){
        console.log(this.name);
    }
    const a=create(Test,'lily',60);
    console.log(a);

3、安全的类型检测

类型检测方法typeof、instanceof一般是能够检测出数据类型，但存在各自的局限。
typeof在safari中对正则表达式会返回function，导致正则表达式和函数傻傻不清楚。
instanceof在存在多个全局作用域的情况下，也是问题多多，如：

var isArray=value instanceof Array

要准确判断，则要求value必须和Array构造函数在同一个全局作用域中。
上述两个方法也无法判断是原生对象还是开发者自定义的对象。
安全的类型检测方法：

Object.prototype.toString.call(value)

• null => [object Null]
• ‘st’ => [object String]
• 1.5 => [object Number]
• {} => [object Object]
• [] => [object Array]
• true => [object Boolean]
• 正则表达式 => [object RegExp]

是静态属性和静态方法

静态属性和静态方法可以有公用和私用之分。
大多数方法和属性所关联的是类的实例，而静态成员所关联的则是类的本身。以类（构造方法）为对象
创建私有静态成员

var Book=(function(){
        var numOfBooks=0;
        function checkIsbn(isbn){
        }
        return function(newIsbn,newTitle,newAuthor){
           
        }
    })();

numOfBooks和checkIsbn分别为私有静态变量和私有静态方法。形成闭包，Book构造函数可以获取numOfBooks和checkIsbn。

创建共有静态成员：

 Book.convertToTileCase=function(){
    }

注意：静态成员不能访问实例的相关信息
优点：无论生成多少Book对象，静态成员在内存中只生成一份。
判断一个私有成员是否应该被设计为静态方法：看它是否需要访问任何实例数据。如果不需要，则设计为静态方法会更有效率。

《javaScript设计模式》

指出，每个对象都有一个原型对象，但并不意味着每个对象都有一个prototype属性，实际上只有函数对象才有这个属性。在创建一个对象时，js会自动将其原型对象设置为其构造函数的prototype属性所指的对象。
例如：函数的构造函数是Function，原型对象是Function.prototype

rem适配根元素计算方式

rem布局适配的时候document.documentElement.style.fontSize = document.documentElement.clientWidth * 100 / 750 + ‘px’;
750是设计稿的宽度