javascript

java实时显示

input框里keydown事件后，需要发送请求到服务器，如果每按一次发送一次的话，对服务器压力太大，此时，可以在keydown事件里加一个定时器，当用户连续输入时，不发送请求，等用户输入完后500ms后再发送；

javascript------闭包

闭包如果使用不当，会造成内存泄漏；

示例一(200W次事件绑定)：

注：以上代码用浏览器打开后，会消耗掉1G多内存；

示例二(200W次事件绑定)： 

注：以上代码相比于示例一的代码，只会消耗200多M内存； 

示例3：

注：该段代码输出的结果为1，2，3； main函数里返回值是一个匿名函数，且该函数被赋值给了变量add，而add在调用了三次，前两次调用完成后，因为外面还有变量引用了该匿名函数，所以该匿名函数里的变量total成了闭包对象，从而在执行完了后不会被销毁；

注：上图为示例3里，javascript引擎创建的对象，分别为本地对象，闭包对象和全局对象，其中在闭包对象中变量就是闭包对象； 

闭包的几种定义

闭包的应用

上面代码的执行结果为：

注：对象2相较对1对象1，所有内部方法对外都不可见，相当于实现了面向对象中private，达到封装代码的一个效果；

javascript------原型和原型链

javascript实现类似面向对象里的class的用法一：

用法二：

注：用法二的代码里，Animal.prototype里的prototype就是原型的意思，在prototype之后，可以定义多个方法；

用法一和用法二总结： 

用法一里每定义一个实例，该实例下面都会有类(其实是一个函数，并不对面向对象中的类)里的所有方法和属性，如果有1000个实例的话，则类的方法和属性也会有1000份， 十分消耗电脑资源，而用法二里，原型里的方法是共享的，1000个实例共享一个方法，相对用法一，相当节省电脑资源；

原型链 

如上面用法二里的代码，pig.run()，javascript执行该行代码时，先去找pig的原型，看下原型下面是否有这个方法，如果没有还会通过原型链去找原型的原型里是否有该方法；

代码示例：

代码的运行结果为：红色方框里的就是原型链

javascript作用域和作用域链

注：上面的代码里涉及到四个函数作用域和一个全局作用域，一共5个，在javascript引擎的解释下，是一个本地作用域，3个闭包作用域和一个全局作用域；

javascript------执行流与错误影响范围

代码示例1：

执行结果为：

示例代码2：

执行结果为：

示例代码3：

执行结果为：

示例代码4：

执行结果为：

示例代码5：

执行结果为：

示例代码6：

执行结果为：

注：上图中，引擎线程后面的方块表示javascript的执行流(每个块都是一个执行流)，每个块里出错后，影响范围只有块本身，其它的块不会收到错误影响；js的错误分两种，一种是语法错误，产生语法错误时，整个js执行流都不会执行，如示例1，另外一种错误是运行错误，产生运行错误时，js执行流中，错误前面的代码会执行，错误后面则不会执行；示例5是由于jquery的内部机制，导致后面的执行流受到影响而不能执行；示例6中，由于错误被隔离到了Timer里了，所以不影响后续代码的执行；

注2：执行流的范围，每个<script></script>里均会产生一个执行流，每个定时器Timer也均会产生一个执行流， 每个事件也均会产生一个执行流；

javascript基础重点

1）js对象作为函数的参数传递

执行结果为：

注：js中除对象外的变量是存放在栈内存中，而如上图中的对象，是存放在堆内存的，point变量存储是的对象在堆内存中的地址；change函数虽然没有返回值，但改变的对象point的值会被保存下来；

执行结果为：

注：形参和实参是两个变量，代码2中，change函数的实参point的地址变成了对象的地址，但形参point里仍然存储的是的地址；所以point中存储仅仅是对象的地址，而不是对象的引用； 

2）this 

执行结果为：

注：定时器是一个执行流，其里面的tihs也是全局对象window；

3）变量声明提升

执行结果为： 

以上的代码等价于：

注：js变量声明提升，但赋值并不提升； 

4）函数声明提升和变量声明提升

执行结果为： 

以上代码等价于：

注：因为函数的声明和变量的标识符是一样的，所以变量的声明就被无效化了；

5） switch匹配

执行结果为：

 'default'

注：js中的swicth后面的case匹配的时候使用的是全等===； 

6）变量声明时没加var就会变成全局变量

执行结果为：

注：上面代码里的i,name,y,z都变成了全局变量，这种变成会全局变量的写法会给整体代码造成隐患； 

7）数组方法的注意事项

执行结果为： 

注：reverse函数不会创建一个新的array对象，而是将已经反转过的对象直接返回；concat则是会返回一个新的array对象； 

8）typeof

执行结果为：

9）函数的返回值

执行结果为： 

注：如上面的代码，js里如果函数的返回值是一个对象，用new时，没法得到我们期望的对象； 

javascript数据类型转换

数据类型转换场景示例：

注：object转换成number时，底层代码会优先使用；  

注：NaN是一个特殊的Number类型的变量，且NaN == NaN返回的是false；x和y引用同一对象示例，var a = {}，如果将a赋值给变量b，即var b = a，这就是引用同一对象，但如果var b = {}，b是另一个新建对象，则不是引用同一对象；

注：string，boolean与number比较时，都会被转换成number类型；

javascript------call-apply

注：call方法和apply方法完成的功能是一样的，只是参数的形式的不一样；

示例代码，构造一些a标签，将更改其title的索引值：

call方法使用示例：

注：上图的代码中，call方法实际是相当于对象obj2通过call方法借用了obj1里方法； ，该行代码里，实际是将obj1.add的this变量指向到obj2；

apply方法使用示例：

javascript------事件和事件委托

事件的执行顺序与事件绑定的顺序没有关系；