数据存取
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;
}
注意:如有版权问题,请联系我~