10月28日 前端js知识点整理

一、箭头函数和普通函数的区别

1.不可以当作构造函数，不可以使用new命令，否则会抛出错误（箭头函数没有原型，而普通函数有）

let a=function(){
    console.log('a');
}

let b=()=>{
    console.log('b');
}

console.log(a.prototype);//{constructor:f}每个原型对象都有一个constructor的属性
console.log(b.prototype);//undefined 证明b方法没有原型对象的constructor属性
let a1=new a();
let b1=new b();//报错b is not a constructor

2.不可以使用arguments对象，该对象在函数体内不存在，如果要用，可以用Rest参数替代

arguments对象是一个类似数组的对象，它在函数中表示传递给函数的参数

arguments只有索引和length、callee、caller属性

Rest参数是一个真正的数组，形式为...变量名

function A(a){
    console.log(arguments);
}
A(1,2,3,4,5,8)//[1,2,3,4,5,8,callee:f,length:6,symbol(symbol.interator):f]
//callee属性是一个指针，指向拥有这个arguments对象的函数
//symbol（迭代器）一个values函数

let B=(b)=>{
    console.log(arguments);
}
B(2,92,32,32)//报错Uncaught ReferenceError:argumrnts is not defined

let C=(...c)=>{// ...c是Rest参数
    console.log(c);
}
C(3,82,32,11323)//输出[3,82,32,11323]

3.不可以使用yield命令，因此箭头函数不能用作Generator函数

4.函数体内的this对象，是指向谁的问题（重点）

箭头函数：不改变this指向，this为上层函数作用域的this对象，如果没有上层函数作用域，则指                        向顶部this（window），箭头函数的this永远指向其上下文的this，任何方法都改变不                      了其指向。

普通函数：this指向该函数的调用者，call，apply，bind会改变普通函数的this

二、严格模式的限制

严格模式提供了高效严谨的差错机制，保证代码安全运行。在脚本文件引入"use strict"可触发严格模式。

1.变量必须声明后再使用

2.不能有重复的参数名，函数的参数也不能有同名属性

3.不能使用with语句

4.不能对只读属性赋值

5.不能使用前缀0表示八进制数

6.不能删除不可删除的属性

7.eval不会在它的外层作用域引入变量（eval函数接受字符串作为参数，可以将字符串转换成js表达式并且立即执行该表达式）

8.eval和arguments不能被重复赋值

9.arguments不会自动反应函数的变化

10.不能使用arguments.callee和arguments.caller

11.禁止this指向全局对象

12.不能使用fn.caller和fn.arguments获取函数调用的堆栈

13.增加了保留字

三、ES6新增

1.模板字符串`${}`

2.箭头函数（）=>{}

3.for-of（用来遍历数据，这里不过多解释，以后会解释）

4.ES6将promise对象纳入规范，提供了原生的promise对象

5.增加了let和const命令，用来声明变量（以后解释）

6.引用module模块的概念

四、attribute和property的区别

attribute是DOM元素在文档中作为html标签拥有的属性

property就是DOM元素在js中作为对象拥有的属性

对于html的标准属性来说，attribute和property是同步的，是会自动更新的

对于自定义属性来说他们是不同步的

1.公认的attribute会映射到property

一个元素的全部属性里面的attributes就是特性，特性就是该元素特有属性，其他就是property，所有元素都有的特性就会被映射为属性

2.读写方式不同

读：（property）element.property                                      例：p.className

       （attribute）element.getAttribute('属性名','属性值')     例：element.getAttribute（"href"）

写：（property）element.property="xx"                              例：p.className="xiao"

       （attribute）element.setAttribute('属性名','属性值')     例：element.setAttribute（"href","#"）

五、let和const的区别

let 不存在变量提升，如果在let前使用，会导致报错

如果块区中存在let和const命令，就会形成封闭作用域

不允许重复声明

const定义的是常量，不能修改，但是如果定义对象，可以修改对象内部数据

六、内存泄漏

程序中已动态分配的堆内存由于某种原因程序未释放或无法释放引发的各种问题

js出现内存泄漏原因：全局变量、dom清空时，还存在引用、定时器未清除、子元素存在引起的内存泄漏。

原则：不用了的东西要及时归还

七、script引入方式

1.html静态script引用

2.js动态插入script

3.<script defer>:异步加载，元素解析完成后执行，浏览器立即下载，但延迟执行

   <script async>:异步加载，但执行时会阻塞元素渲染，不会阻塞页面解析

关于defer和async的总结：

    defer：仅适用于外链，规定脚本延迟执行，不会阻塞页面解析，在html解析完成后，DOMConfertLoaded之前执行，会按照出现的顺序执行。

    async：仅适用于外链，规定异步执行，不会阻塞页面解析，不会按照出现的顺序执行，先下载完成那个就先执行那个，执行的时候，有可能页面还没有解析完成。