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

简介: 读《高性能 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;
}

注意:如有版权问题,请联系我~

相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
48 0
|
25天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
28天前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
1月前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
48 2
|
21天前
|
Web App开发 JavaScript 前端开发
高性能的纯Js滚动条美化插件smooth-scrollbar
smooth-scrollbar是一款高性能的纯JavaScript滚动条美化插件。该滚动条为现代浏览器而制作,它具有高性能,自由配置,平滑滚动等特点,支持各种现代桌面浏览器和手机设备。
|
28天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
2月前
|
人工智能 JavaScript 前端开发
使用Node.js模拟执行JavaScript
使用Node.js模拟执行JavaScript
28 2
|
2月前
|
消息中间件 JavaScript 前端开发
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
50 1
|
2月前
|
移动开发 JavaScript 前端开发
【JavaScript】JS执行机制--同步与异步
【JavaScript】JS执行机制--同步与异步
24 1
|
2月前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具