当前位置:  编程技术>WEB前端
本页文章导读:
    ▪javascript内存管理和垃圾回收      这两天看了js的一些有关内存管理和垃圾回收的知识,现在来总结一下。垃圾回收:javascript具有垃圾回收的机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。其余的不多说,.........
    ▪JavaScript起点(严格模式)       严格模式(Strict Mode)是ECMAScript5新增的功能。ECMAScript5虽然可以向后兼容ECMAScript3,但如果使用严格模式,哪些ECMAScript5“不在建议使用”的ECMAScript3语法功能将会被全部进制,如果出.........
    ▪JavaScript面向对象编程深入分析      一. Javascript 面向对象编程:封装Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类).........

[1]javascript内存管理和垃圾回收
    来源:    发布时间: 2013-11-06

这两天看了js的一些有关内存管理和垃圾回收的知识,现在来总结一下。
垃圾回收:javascript具有垃圾回收的机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。其余的不多说,我们来分析一下函数中局部变量的正常生命周期。局部变量只在函数执行过程中存在。而在这个过程中,会为局部变量在栈(或堆)内存上分配相应的空间,以便存储他们的值。然后在函数中使用这些变量,直到函数结束。此时,局部变量就没有存在的必要了,因此可以释放他们所占的内存以供他们使用。现在各大浏览器通常用采用的垃圾回收有两种方法:标记清除、引用计数。下面来了解了解。

标记清除:这是javascript中最常用的垃圾回收方式。当变量进入执行环境是,就标记这个变量为“进入环境”。从逻辑上讲,永远不能释放进入环境的变量所占用的内存,因为只要执行流进入相应的环境,就可能会用到他们。当变量离开环境时,则将其标记为“离开环境”。
  
    
垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。然后,它会去掉环境中的变量以及被环境中的变量引用的标记。而在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了。最后。垃圾收集器完成内存清除工作,销毁那些带标记的值,并回收他们所占用的内存空间。

引用计数:另一种不太常见的垃圾回收策略是引用计数。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时,则这个值的引用次数就是1。相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数就减1。当这个引用次数变成0时,则说明没有办法再访问这个值了,因而就可以将其所占的内存空间给收回来。这样,垃圾收集器下次再运行时,它就会释放那些引用次数为0的值所占的内存。
       
但是用这种方法存在着一个问题,下面来看看代码:

function problem() {
var objA = new Object();
var objB = new Object();

objA.someOtherObject = objB;

objB.anotherObject = objA;

}

在这个例子中,objA和objB通过各自的属性相互引用;也就是说这两个对象的引用次数都是2。在采用引用计数的策略中,由于函数执行之后,这两个对象都离开了作用域,函数执行完成之后,objA和objB还将会继续存在,因为他们的引用次数永远不会是0。这样的相互引用如果说很大量的存在就会导致大量的内存泄露。
       
我们知道,IE中有一部分对象并不是原生JavaScript对象。例如,其BOM和DOM中的对象就是使用C++以COM(Component Object
Model,组件对象)对象的形式实现的,而COM对象的垃圾回收器就是采用的引用计数的策略。因此,即使IE的Javascript引擎使用标记清除的策略来实现的,但JavaScript访问的COM对象依然是基于引用计数的策略的。说白了,只要IE中涉及COM对象,就会存在循环引用的问题。看看下面的这个简单的例子:

var element = document.getElementById("some_element");
var myObj =new Object();
myObj.element = element;
element.someObject = myObj;

上面这个例子中,在一个DOM元素(element)与一个原生JavaScript对象(myObj)之间建立了循环引用。其中,变量myObj有一个名为element的属性指向element;而变量element有一个名为someObject的属性回指到myObj。由于循环引用,即使将例子中的DOM从页面中移除,内存也永远不会回收。
       
不过上面的问题也不是不能解决,我们可以手动切断他们的循环引用。

myObj.element = null;
element.someObject =null;

这样写代码的话就可以解决循环引用的问题了,也就防止了内存泄露的问题。
上面讲了这么大段把JavaScript的内存回收的原理搞清楚了,现在来看看内存管理就很容易了~~~~

内存管理:使用JavaScript编程,我们一般都不需要管内存回收的问题,如果说想要写出高水平的代码还是有点问题值得注意。一个主要问题就是分配给WEB浏览器的可用内存通常比分配给桌面应用程序要少。这样做的目的主要是出自于安全方面的考虑,目的是防止运行JavaScript的网页耗尽全部系统内存导致系统崩溃。内存限制问题不仅会影响给变量分配内存,同时还会影响调用栈以及在一个线程中能够同时执行的语句的数量。
       
因此,确保占用最少的内存可以让页面获得更好的性能。而优化内存占用的最佳方式,就是执行中的代码只保存必要的数据。一旦数据不在有用,最好通过将其值设置为null来释放其引用——这个做法叫解除引用。这一做法适合于大多数全局变量和局部变量的属性。局部变量会在他们离开执行环境的时候自动被解除引用,下面来看看代码:

function createPerson(name) {
var localPerson = new Object();
localPerson.name = name;
return localPerson;
}

var globalPerson =createPerson("Tracy");
globalPerson = null;
//手工解除引用

        在这个例子中,变量globalPerson取得了createPerson()函数的返回值。在createPerson()函数内部,我们创建了一个对象并将其值赋给局部变量localPerson,然后又为局部变量添加了一个名为name
的属性。最后,当调用这个函数的时候,localPerson以函数值的形式返回并赋值给globalPerson。由于localPerson在createPerson()函数执行完毕后就离开了执行环境,因此无需我们显示地去为他们解除引用。但是对于globalPerson而言,则需要我们不使用它的时候手动为他解除引用。
       
不过,解除一个值的引用并不意味着自动回收该值所占的内存。解除引用的真正作用是让值脱离执行环境,以便垃圾收集器下次运行时将其回收。

本文链接


    
[2]JavaScript起点(严格模式)
    来源:    发布时间: 2013-11-06

 

严格模式(Strict Mode)是ECMAScript5新增的功能。ECMAScript5虽然可以向后兼容ECMAScript3,但如果使用严格模式,哪些ECMAScript5“不在建议使用”的ECMAScript3语法功能将会被全部进制,如果出现就会抛出一行。引入Strict Mode目的是允许开发人员能够选择“更好”的Javascript版本,这个版本能用不同的方式处理那些普遍而又臭名昭著的错误。目前所有的主流浏览器的最新版本——包括IE10与Opera12——都支持严格模式。关于严格模式的大多数信息都可以在《ES5规范》[PDF]的第223页找到。

如何启用严格模式

可以在全局范围内使用严格模式,也可以在一个函数范围内使用严格模式。如果要再全局范围内启用严格模式,只需要在程序的第一行使用代码即可:

1 'use strict';

 

在函数的内部启用严格模式,只需要在函数体内第一行使用代码即可:

1 function imStrict(){
2   'use strict';
3   // ... 其他代码 ...
4 }

 

启用严格模式的语句只是一段普通的字符串“use strict”,没有任何新语法。这意味着不会对就旧式浏览器造成任何负面影响,因此可以大胆使用。

在函数内部启用严格模式的一个实际应用是,把整个Javascript类库定义在严格模式的函数内部,这样就可以不影响外部的代码:

1 (function(){
2   "use strict";
3   // Define your library strictly...
4 })();

 

严格模式带来了什么?

在开始介绍特殊特性之前,你需要记住,严格模式的目标之一是允许更快地调试错误。帮助开发者调试的最佳途径是当确定的问题发生时抛出相应的错误(throw errors when certain patterns  occur),而不是悄无声息地失败或者表现出奇怪的行为(这正是如今不在严格模式下的Javascript做的)。严格模式下的代码抛出更多的错误信 息,这是好事,因为它能帮助开发者很快注意到一些必须立即解决的问题。

去除with语句(Eliminates with)

首先,严格模式去除了with语句。当with语句出现在严格模式中时,它会被认为是非法的Javascript语句并抛出语法错误。所以,使用严格模式的第一步就是确保你没有在使用with。

1 // 在严格模式中将导致语法错误
2 with(location){
3 alert(href);
4 }

 

 

防止意外的全局变量(Prevents accidental globals)

第二点是,变量在赋值之前必须声明。在非严格模式下,给一个未声明的变量赋值将自动生成一个该名字的全局变量。这是Javascript中最普遍的错误之一。严格模式中,这样做将抛出一个错误。

1 // 严格模式中抛出一个错误
2 (function(){
3 someUndeclaredVar ="foo";
4 }());

 

取消this值的强制转换(Eliminates this coercion)

另一个重要的变化是,当this值为null或undefined时,不会再将其强制转换为全局对象。也就是说,this保留了它的原始值,也因此可能会导致一些依赖于强制转换的代码发生错误。例如:

 

1 window.color ="red";
2 function sayColor(){
3 // 严格模式下,this不会指向window
4 alert(this.color);
5 }
6
7 // 以下两种情况,在严格模式下都抛出错误
8 sayColor();
9 sayColor.call(null);

 

根本而言,this值必须赋值,否则将保留undefined值。这意味着调用构造函数时若漏掉了new关键字也会导致错误:

1 functionPerson(name){
2 this.name = name;
3 }
4 // 严格模式下导致错误
5 var me =Person("Nicholas");

 

在这段代码里,调用Person构造函数时缺少了new关键字,此时this值为undefined。由于你不能给undefined添加属性,这段代码抛出了一个错误。在非严格模式下,this会强制转换为全局对象,因此name属性能够被正确赋值为全局变量。

拒绝重复(No duplicates)

当你做了大量的编码的时候,你很容易在对象中定义了重复的属性或者给函数定义了重复的参数名。严格模式下,这两种情况都会导致错误的发生:

1 // 严格模式下错误 - 重复参数
2 function doSomething(value1, value2, value1){
3 //code
4 }
5
6 // 严格模式下错误 - 重复属性
7 var object ={
8 foo:"bar",
9 foo:"baz"
10 };

 

这两者都是语法错误,在代码执行之前将抛出错误。

更安全的eval()(Safer eval())

eval()没有被移除,但它在严格模式下发生了一些变化。最大的改变是:在eval()语句中声明的变量以及函数不会在包含域中创建。例如:

1 (function(){
2
3 eval("var x = 10;");
4
5 // 非严格模式下,x为10
6 // 严格模式下,x没有声明,抛出一个错误
7 alert(x);
8
9 }());

 

任意由eval()创建的变量或函数仍呆在eval()里。然而,你可以通过从eval()中返回一个值的方式实现值的传递:

1 (function(){
2
3 var result =eval("var x = 10, y = 20; x + y");
4
5 // 严格模式与非严格模式下都能正常工作(得到30)
6 alert(result);
7

    
[3]JavaScript面向对象编程深入分析
    来源:    发布时间: 2013-11-06

一. Javascript 面向对象编程:封装

Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。

那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?

1. 生成对象的原始模式

假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性。

var Cat = {
name : '',
color : ''
}

现在,我们需要根据这个原型对象,生成两个实例对象。

var cat1 = {}; // 创建一个空对象
cat1.name = "大毛"; // 按照原型对象的属性赋值
cat1.color = "黄色";
var cat2 = {};
cat2.name = "二毛";
cat2.color = "黑色";

好了,这就是最简单的封装了。但是,这样的写法有两个缺点,一是如果多生成几个实例,写起来就非常麻烦;二是实例与原型之间,没有任何办法,可以看出有什么联系。

2. 原始模式的改进

我们可以写一个函数,解决代码重复的问题。

function Cat(name, color) {
return {
name: name,
color: color
}
}

然后生成实例对象,就等于是在调用函数:

var cat1 = Cat("大毛","黄色");
var cat2 = Cat("二毛","黑色");

这种方法的问题依然是,cat1和cat2之间没有内在的联系,不能反映出它们是同一个原型对象的实例。

3. 构造函数模式

为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。

所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

比如,猫的原型对象现在可以这样写,

function Cat(name, color) {
this.name = name;
this.color = color;
}

我们现在就可以生成实例对象了。

var cat1 = new Cat("大毛", "黄色");
var cat2 = new Cat("二毛", "黑色");
alert(cat1.name); // 大毛
alert(cat1.color); // 黄色

 

这时cat1和cat2会自动含有一个constructor属性,指向它们的构造函数。

alert(cat1.constructor == Cat); //true
alert(cat2.constructor == Cat); //true

Javascript还提供了一个instanceof运算符,验证原型对象与实例对象之间的关系。

alert(cat1 instanceof Cat); //true
alert(cat2 instanceof Cat); //true

4. 构造函数模式的问题

构造函数方法很好用,但是存在一个浪费内存的问题。

请看,我们现在为Cat对象添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠)。那么,原型对象Cat就变成了下面这样:

function Cat(name, color) {
this.name = name;
this.color = color;
this.type = "猫科动物";
this.eat = function () { alert("吃老鼠"); };
}

 

还是采用同样的方法,生成实例:

var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat ("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠

 

表面上好像没什么问题,但是实际上这样做,有一个很大的弊端。那就是对于每一个实例对象,type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。这样既不环保,也缺乏效率。

alert(cat1.eat == cat2.eat); //false

能不能让type属性和eat()方法在内存中只生成一次,然后所有实例都指向那个内存地址呢?回答是可以的。

5. Prototype模式

Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。

这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。

function Cat(name, color) {
this.name = name;
this.color = color;
}

Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function () { alert("吃老鼠") };

然后,生成实例。

var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠

这时所有实例的type属性和eat()方法,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率。

alert(cat1.eat == cat2.eat); //true

6. Prototype模式的验证方法

6.1 isPrototypeOf()

这个方法用来判断,某个proptotype对象和某个实例之间的关系。

alert(Cat.prototype.isPrototypeOf(cat1)); //true
alert(Cat.prototype.isPrototypeOf(cat2)); //true

6.2 hasOwnProperty()

每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自protot

    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

▪CSS小例子(只显示下划线的文本框,像文字一... iis7站长之家