zoukankan      html  css  js  c++  java
  • JavaScript的数据访问总结

    数据存储共有4中方式:直接量、变量、数组项、对象成员。

    访问直接量和局部变量的时间快,访问数组元素和对象成员相对较慢。局部变量存在于作用域链的起始位置,因此访问局部变量比访问跨作用域变量更快。全局变量总处于作用链的最末端,因此访问速度也是最慢的。

    通常把常用的对象成员、数组元素、跨域变量保存到局部变量中来改善JavaScript的性能。

    1. js四种基本的数据存储位置:

       1) 直接量: 只代表本身,不存储在特定位置(字符串, 数字, 布尔值, 对象, 数组, 函数, 正则表达式, null, undifined)

       2) 变量: 用关键字var定义的数据存储单元, 函数内部声明的时候一定要用var, 否则是全局变量

       3) 数组元素: 存储在js数组对象内部, 以数字作为索引.

       4) 对象成员: 存储在js数组对象内部, 以字符串作为索引.

       性能方面取决于浏览器分别对这四种数据存储位置进行200000次操作所用的时间. 直接量和局部变量的访问速度快于数组项和对象成员的访问速度。

    2. 管理作用域(比如确定那些变量可以被函数访问, 确定this的赋值)

       1) 作用域链和标识符解析

           内部属性[Scope]:包含了一个函数被创建的作用域中对象的集合. 这个集合被称为函数的作用域链,决定了那些数据能被函数访问.

           执行函数时会创建一个成为'运行上下文'的内部对象, 每个运行期上下文都有自己的作用域链,用于标识符解析.

       2) 标识符解析的性能

           一个标识符所在的位置越深,它的读写速度就越慢.函数中读写局部变量是最快的,读写全局变量(总是处于运行期上下文作用域链的最末端)是最慢的(Chrome和Safari 4 不会出现这种问题).

           跨作用域的值(如document)在函数中被引用一次以上,  那么就把它存储到局部变量里.

       3) 改变作用域链

           with语句用来给对象的所有属性创建一个变量. (实际功能用来避免书写重复代码),但是访问布局变量变慢了。(避免使用)

           try-catch,在catch代码块内部,函数所有局部变量将会放在第二个作用域链对象中.但他不是用来解决js错误的。(小心使用)

       4) 动态作用域(只有确实有必要时再用)

           with

           try-catch

           eval()函数,可计算某个字符串,并执行其中的的 JavaScript 代码。

       5) 闭包, 作用域和内存

           闭包: 允许函数访问布局作用域之外的数据. 能够读取其他函数内部变量的函数, 由于在Javascript语言中, 只有函数内部的子函数才能读取局部变量, 因此可以把闭包简单理解成“定义在一个函数内部的函数”。

           闭包作用: 一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

    3. 对象成员

       DOM: 文档对象模型

       BOM: 浏览器对象模型

       对象成员包含属性和方法,包含任何数据类型,既可以说他是函数也可以是一种对象。

       一个命名的成员引用了一个函数,该成员就被成为一个' 方法 '。一个非函数类型的成员被称为' 属性 '。

       对象类型:实例成员(存在于对象实例中)和原型成员(由对象原型继承而来)。

      1) 原型

          对象通过一个内部属性绑定到它的原型。内部属性 _proto_ 与属性中的function并存,属性中hasOwnProperty()=> 判断对象是否包含特定的实例成员;in操作=>确定对象是否包含特定的属性(实例和原型)

      2) 原型链

          构造器Book用来创建了一个新的Book实例book1。book1的原型(_proto_)是Book.prototype,Book.prototype的原型是Object.这个过程创建了一个原型链,book1和book2继承了它们的成员。

          

      3) 嵌套成员

      嵌套越深,访问越慢,影响性能,尽量少用。

      4) 缓存对象成员值(不适用于对象)

      使用一次以上,将值存储到局部变量使用,局部变量访问速度快。  

  • 相关阅读:
    监听浏览器使用不同版本js并且处理ie兼容getElementByClassName
    超出字数部分省略(主要解决不兼容;display: -webkit-box;的浏览器)
    highcharts图表
    整理前端css/js/jq常见问题及解决方法(1)
    [转载]移动页面所需meta元素和Viewport窗口知识点
    在ie和chrome浏览器中滚动条样式的设置
    关于:before :after
    mysql备份与还原
    使用xkbeancomparator对比javabean,生成操作记录
    SSO单点登录和CAS
  • 原文地址:https://www.cnblogs.com/floraCnblogs/p/js-data-access.html
Copyright © 2011-2022 走看看