JS笔记

1. js中，调用Object.prototype.toString.call(a)和调用a.toString()结果不同，除非a是一个对象。
2. 解构赋值

let {a,b,...c}={a:1,b:2,u:3,v:4};
console.log(c);//{u:3,v:4}

var a=(function(x){
    delete x;
    return x;
})(2);
console.log(a);//2

var a=1;
console.log(global.a);//undefined
console.log(delete a);//false
console.log(typeof a);//number
console.log(a);//1
/*原因：使用var声明的变量有一个名为[[Configurable]]的特性，
且被设置为false，因此不能通过delete操作符删除，会返回false*/

a=1;
console.log(global.a);//1
console.log(delete a);//true
console.log(typeof a);//undefined
console.log(a);//ReferenceError: a is not defined

var a={},
    b={key:'b'},
    c={key:'c'};
a[b]=123;
a[c]=456;
console.log(a[b]);//456
console.log(a);//Object {[object Object]: 456}

原因：a[variable]相当于给对象a添加了一个属性，而属性的key就是variable.toString()的结果，Object类型的b和c的b.toString()和c.toString()的结果均为"[object Object]"，所以a[c]就会把a[b]覆盖

6. 在任何值上调用Object原生的toString()方法，都会返回一个"[object NativeConstructorName]"格式的字符串。每个类在内部都有一个[[Class]]属性，这个属性中就指定流量上述字符串中的构造函数名。（与第一点中的照应）。
7. 在对非数值应用一元加操作符时，该操作符会像Number()转型函数一样对这个值执行转换。
8. Number()转型函数规则
9. 添加动态脚本
   ①document.write()，接收一个字符串，且<script>...</script>要写成<script>...<\/script>
   ②创建<script>元素，指定src（或者script.appendChild(document.createTextNode("js代码"))），document.body.appendChild()
10. 添加动态样式
    ①创建<link>元素，指定href(或者创建style元素style.appendChild(document.createTextNode("css代码"))），document.head.appendChild()
    ②
11. 有关添加、删除、获取属性的四种方式
    ①ele.getAttribute("name") setAttribute("class") remove...
    ②通过HTML属性如ele.id、ele.title、ele.style、ele.className
    ③通过ele.attributes属性获得NodeList，ele.attributes.getNamedItem("id").nodeValue OR ele.attributes["id"].nodeValue
    ④

var attr=document.createAttribute("name");
attr.value="aaaaa";
ele.setAttributeNode(attr);

12. 返回NodeLIst（包括NodeList、HTMLCollection、NamedNodeMap）的方法：childNodes、getElementsByTagName()、getElementsByName()、element.attributes、getElementsByClassName()、children、form.elements
13. 为单例对象创建私有变量

var sigleton=function(){
    var privateVar=10;
    function privateFunc(){
        return false;
    }

    return{
        publicVar:"hahaha",
        publicFunc:function(){
            privateVar++;
            return privateFunc;
        }
    }
}();
console.log(sigleton.privateVar);//undefined
console.log(sigleton.publicVar);//"hahaha"
console.log(sigleton.publicFunc()());//false

14. 惰性载入函数两种方法：
    ①在函数第一次执行时将函数重新覆盖为一个适当的函数（在第一次执行时损失性能）

function createXHR(){
    if(xxx){
        createXHR=function(){
            //...
        };
    }else if(yyy){
        createXHR=function(){
            //...
        };
    }else{
        createXHR=function(){
            //...
        };
    }
    return createXHR();
}

②在函数第一次声明函数时就指定适当的函数（在第一次加载时损失性能）

var createXHR=function(){
    if(xxx){
        return function(){
            //...
        }
    }else if(yyy){
        return function(){
            //...
        }
    }else{
        return function(){
            //...
        }
    }
}();

15. 函数柯里化

16. 函数绑定
17. Object.create()的内部实现：

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

除此之外，Object.create()还有一个可选的第二个参数，一个对象，表示新对象的可选属性。e.g.

var aPerson=Object.create(Person.prototype,{
    name:{
        value:"Xiaoming"
    }
});

18. 创建对象的方式

• 工厂模式
• 构造函数模式
• 原型模式
• 组合使用构造函数模式和原型模式
• 动态原型模式
• 字面量
• Object.create()

19. 继承方式
    ①原型链继承
    ②构造函数继承
    ③组合继承（原型链+构造函数）
    ④原型式继承
    ⑤寄生组合式继承
20. e.getAttribute(propName)和e.propName的区别和联系

• e.getAttribute()返回值是源文件中设置的值，类型是字符串或者null（有的实现返回""）
• e.propName返回值可能是字符串、布尔值、对象、undefined等（尤其是对于style属性和函数）
• 大部分attribute与property是一一对应关系，修改其中一个会影响另一个，如id，title等属性

• opacity:0：视觉隐藏，占据布局，可以交互
• visibility:hidden：视觉隐藏，占据布局，屏蔽交互
• display:none：真正隐藏，真正渲染，屏蔽过渡效果，可以通过dom访问

页面重绘（repaint）和页面回流（reflow）：

• 重绘(repaint)：当render tree中的一些元素需要更新属性，单这些属性只会影响元素的外观，风格，而不会影响到元素的布局，此类的页面渲染叫作页面重绘。
• 回流(reflow)：当render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而引起的页面重新渲染。
  可以看出，回流必将引起重绘，而重绘不一定会引起回流。
  引发回流的事件：
• DOM树发生变化
• 元素尺寸的改变
• 由于内容改变引发的尺寸变化
• 浏览器窗口大小改变（resize事件触发）
  改善由dom操作引起的回流：
• 使用DocumentFragment进行缓存操作,引发一次回流和重绘
• 使用display:none技术，只引发两次回流和重绘
• 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘。

23. 输入URL到显示界面中发生了什么
24. 发生内存泄露的情况

• 被遗忘的计时器
• 脱离dom的引用
• 闭包
• 循环引用（IE中）

25. cookie、sessionStorage、localStorage区别

• 都会在浏览器端保存，有大小限制，同源限制
• cookie会在请求时发送到服务器，作为会话标识，服务器可修改cookie；web storage不会发送到服务器
• cookie有path概念，子路径可以访问父路径cookie，父路径不能访问子路径cookie
• 有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效，直到用户删除
• 共享：sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享
• localStorage的修改会促发其他文档窗口的update事件
• cookie有secure属性要求HTTPS传输
• 浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。web stora e大小支持能达到5M

26. CSS中position四个值的区别（static、relative、absolute、fixed）

• static
  static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
• relative
  relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
  定位为relative的元素遵循常规流，参照自身在常规流中的位置进行移动，但其原先在文本流中的位置依然存在。
• absolute
  absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
  定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。
• fixed
  生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

27. ES新特性：

• promise√
• 箭头函数√
• let、const和块级作用域
  没有变量提升
• Symbol√
• Set和Map√
• class和继承√

28. Git基本操作
29. 数组去重、数组乱序、深拷贝、浅拷贝