读《高性能 JavaScript》笔记 －”JS进阶必读“(第二章)

二，数据存取

       2.0 javaScript四种基本的数据存取位置

       字面量：字符串，数字，布尔值，对象，数组，函数，正则表达式，及特殊的null和undefined值。

       本地变量：var let const 定义的数据存储单元

       数组元素：存储在javaScript数组对象内部，以数字作为索引

       对象成员：存储在javaScript对象内部，以字符串作为索引

（遍历相同长度的对象集合和数组 ，对象集合比较费时）

    2.1作用域链和标识符解析

    2.1.1改变作用域   with  和 try{}catch(){}  语句   

 (使用with 会使执行环境的作用域链临时被改变 ，一个新的变量对象被创建，这个对象被推入作用域链的首位，这意味着函数的所用局部变量现在处于第二个作用域对象中，因此访问代价更高)

function initUI(){
   with(document){
     links = getElemtnByTagName("a");
     i = 0;
     len = links.length;
     while(i < len){
       update(links[i++])
     }
     getElementById("go-btn").onclick = function(){
       start();
     }
     bd.className = "ative";
   }
}

    2.1.2 闭包，作用域，内存       闭包是javaScipt最强大的特征之一，它允许访问局部作用之外的数据。  但存在引用不能及时释      放的性能问题.  

function assignEvents(){
      var id  = "xid2323";
     document.getElementById("sava-btn").onclick= function(e){
       saveDocument(id);
    }
}

    2.2 原型链

function Book(title,publisher){
      this.title = title;
      this.publisher = publisher;
}

Book.prototype.sayTitle = funciton(){
      alert("this.title")
};

var book1 = new Book("javaScript","publish1");
var book2 = new Book("Phython","publish2");

alert(book1 instanceof Book);//true
alert(book1 instanceof Object);//true 

boo1.sayTitle();//"javaScript"
alert(book1.toString())//"[object Object]"

// 原型对象问题          （摘于 高级程序设计javaScript 3版）
function Person(){}

Person.prototype={
   constructor:Person,
   name:"bruce",
   friends:["aaa","bob"]
}

var person1 =new Person();
var person2 =new Person();
person1.friends.push("ccc");
alert(person2.friends);//“aaa,bob,ccc” 
alert(person1.friends === person2.friends);//true   

//共享的本质问题； 
//因为person1 和 person2指向 同一个原型的指针。所以都会改变。

//解决方法：
//组合使用构造函数模式和原型模式（目前在ECMAScript中使用最广泛 认同度最高）
function Person(name){
    name:"bruce",
 friends:["aaa","bob"]
}
Person.prototype={
   constructor:Person,
   sayName:function(){
    alert(this.name) 
   }
}
var person1 =new Person("bruce");
var person2 =new Person("dddd");
person1.friends.push("ccc");
alert(person1.friends);//“aaa,bob,ccc” 
alert(person2.friends);//“aaa,bob” 
alert(person1.friends === person2.friends);//false
alert(person1.sayName === person2.sayName);//true

//构造函数模式用于定义实例的属性，原型模式用于定义方法和共享的属性。
//结果每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度地节省了内存

    2.3缓存对象成员值   （这种优化技术不推荐用于对象的成员方法，因为许多对象方法使用this来判断执行环境，把一个对象方法保存在局部变量会导致this绑定到window,  this值的改变会使得javaScript引擎无法正确解析它的对象成员，而导致错误）

 

//优化前 
function hasEitherClass(element,className1,className2){
     return element.className == className1 || element.className == className2; 
}

//优化后
function hasEitherClass(element,className1,className2){
     var currentClassName = element.className;//缓存成员变量， 减少读取次数
     return currentClassName == className1 || currentClassName== className2; 
}

注意：如有版权问题，请联系我～