Javascript小技巧总结

TOC
  1. 1. 一.传参和原型链
  2. 2. 二.执行环境
  3. 3. 三.变量声明
  4. 4. 四.new四部曲(也有说是三部曲)
  5. 5. 五.this
  6. 6. 六.修改原则
  7. 7. 七.避免全局多次调用
  8. 8. 八.声明优化
  9. 9. 九.repaint reflow
  10. 10. 十.注意HTMLCollection
  11. 11. 十一.相等和严格相等

以下是本人看书/写代码是学习的技巧,可能有点乱.

一.传参和原型链

(function test(a){
        alert(a);
 })("string"); 

借助这个传参方式,我们可以这么玩:

"".constructor.constructor("alert('string')")();

说不定可以用作XSS攻击的手段哦.

二.执行环境

执行环境(execution context)的具体实现就是变量对象,也称作上下文对象(variable object)全局执行环境的变量对象就是window.(即window代表全局作用域)

执行环境:(execution context stack), 每个要被执行的函数都会先把函数的 执行环境 [压入] 执行环境 , 函数开始执行 然后 函数在变量对象里创建作用域链对象,函数执行完毕后,这个函数的执行环境就会被执行环境栈弹出, 执行环境栈的控制权由内向外依次交付.
作用域链: 函数执行环境被压入到执行环境栈中, 函数就执行了, 函数执行的第一步是在变量对象里构造一个作用域链, 作用域链保证变执行环境里有权访问的变量和函数是有序的

this指针构造是和作用域链同时发生的,也就是说在上文变量构建作用域链的同时还会构造一个this对象,this对象也是属于上下文变量,而this变量的值就是当前执行环境外部的上下文变量的一份拷贝.

三.变量声明

(function() {
    var a = b = 5;
})();
console.log(b);    //5
console.log(a);    //error

console.log(a)放在下面是因为这个一定会报错,因为变量a执行完就马上被销毁了.b为5很显然,因为这样成了全局变量,它实际上是:

b = 5;
var a = b;

应该避免这种很容易让人误会的变量声明方式,除非你必须这么做.

四.new四部曲(也有说是三部曲)

1.创建一个新对象;
2.将构造函数的作用域赋给新对象(因此this就指向了这个新对象);
3.执行构造函数中的代码(为这个新对象添加属性);
4.返回这个新建的对象;

五.this

document.getElementById("btnTest").onclick = function(){
     alert(this);    //DOM
     sayHi();            //object Window
     sayHi2(this)    //DOM
  }
 function sayHi(){
    alert(this);
  }
 function sayHi2(context){
    alert(context);
 }

六.修改原则

  • 不要为实例或者原型添加属性
  • 不要为实例或者原型添加方法
  • 不要重定义已经存在的方法

七.避免全局多次调用

  • 除非必要,变量声明在局部.全局搜索会更慢
  • 多次访问的数据可以缓存起来
  • 不要使用with

八.声明优化

  • 对象字面量
  • 直接数组
  • 声明多个变量用逗号分开

九.repaint reflow

var list = document.getElementById("mylist"),
     fragment = docuemnt.createDocumentFragment(),
     item,
     i;
    for(i=0;i<10;i++){
            item =document.createElement("li");
            fragment.appendChild(item);
            item.appendChild(document.creatTextNode("Item:"+i));
            list.appendChild(fragment);
    }
  • 如需更新,尽量使用文档碎片更新(如以上例子)
  • 尽量最小化这两个的更新
  • 使用innerHTML来插入节点

十.注意HTMLCollection

HTMLCollection的访问会有巨大的开销.因为每一次访问都是最新获取的结果,可是通常会有这样的情况发生:(囧)

var imgs = document.getElementsByTagName('img');
 for(var i = 0;i<imgs.length;i++){
    //.....
 }

这些都是值得注意的地方:

  • 对getElementsByTagName()的调用
  • 获取元素childNodes属性
  • 获取元素attributes属性
  • 访问特殊集合如:document.forms/document.images等

十一.相等和严格相等

用严格相等,避免某些情况下相等符号带来的类型装换,不然会很蛋疼

访客评论