Javascript 中的类和闭包

2019-11-21 00:50:00

字体：大中小

来源：转载

供稿：网友

有人说javascript也是面向对象的，只是它是prototype based,当然这只是概念上的区别，我不想讨论js是不是面向对象的，关键是想说明虽然javascript的类表现得很像其他语言中的类，但是内部的实现机理确不太一致，如果一味的把javascript中的类类比作其他语言中的类，有时候脑子会犯混。

先看一段简单的代码，一般教材上介绍如何新建一个类的时候都是这样的（当然还有更复杂的方法，不过本质上是一样的）：

复制代码代码如下:

 
function MyClass(x) { 
this.x = x; 
} 
var obj = new MyClass('Hello class'); 
alert(obj.x); 

毫无疑问，此时obj具有一个x属性，现在的值是 Hello class. 但是，obj到底是什么？MyClass仅仅是一个函数而已，我们称之为构造函数。在其他OO的语言中，构造函数是要放在class关键字内部的，也就是先要声明一个类。另外，函数体内的this又是什么？其他OO语言中，this的概念是很明确的，就是当前对象，因为它在构造函数执行之前已经声明了类，类的内部的一些字段都是已经定义好的。

先解释下，在javascript的函数中，this关键字表示的是调用该函数的作用域（scope），作用域的概念也不是太好理解，下面再解释。不过可以简单的认为它是调用函数的对象。再看MyClass函数，它内部的this是什么呢？

如果我们把代码改成：

复制代码代码如下:

var obj = MyClass('Hello class');

这是完全合乎语法的。如果这段代码是在浏览器中运行的，调试一下可以发现,this是window对象。而和obj没有任何关系，obj还是undefined，alert也不会有结果。原来的代码之所以可以工作，都是new关键字的功劳。new关键字把一个普通的函数变成了构造函数。也就是说，MyClass还是一个普通的函数，它之所以能构造出一个obj，基本上是new的功劳。当函数之前有new关键字的时候，javascript会创造一个匿名对象，并且把当前函数的作用域设置为这个匿名对象。然后在那个函数内部引用this的话就是引用的这个匿名对象，最后，即使这个函数没有return，它也会把这个匿名对象返回出去。那么obj自然就具有了x属性。

现在这个MyClass已经有点像一个类了。但是，这并不是new的工作的全部。Javascript同样可以方便的实现继承――依靠是prototype.prototype也是一个对象，毕竟除了原始类型，所有的东西都是对象，包括函数。更为重要的是，前面提到javascript是prototype based，它的含义就是在javascript中没有类的概念，类是不存在的，一个函数，它之所以表现的像类，就是靠的prototype. prototype可以有各种属性，也包括函数。上一段说的new在构造对象的过程中，在最终返回那个匿名对象之前，还会把那个函数的prototype中的属性一一复制给这个对象。这里的复制是复制的引用，而不是新建的一个对象，把内容复制过来，在其内部，相当于保留了一个构造它的函数的prototype的引用。有些教材含糊的说所有的“所有对象都有一个prototype属性”，这种说法是不确切的，虽然它内部确实有一个prototype属性，但是对外是不可见的。只有函数对象是有prototype属性的，函数对象的prototype默认有一个constructor属性。

看如下的代码：

复制代码代码如下:

 
function MyClass(x) { 
this.x = x; 
} 
var proObj = new MyClass('x'); 
InheritClass.prototype = proObj; 
MyClass.prototype.protox = 'xxx'; 
function InheritClass(y) { 
this.y = y; 
} 
var obj = new InheritClass('Hello class'); 
MyClass.prototype.protox = 'changed'; 
proObj.x = 'Changed Too'; 
alert(obj.protox); 
alert(obj.x); 

输出的结果是changed和Changed Too。此代码说明了对象内部保留的是构造函数的prototype的引用，要注意的是，proObj中也是保留的它的构造函数的prototype的引用。如果把代码改成：

复制代码代码如下:

 
var obj = new InheritClass('Hello class'); 
proObj.protox = 'I am winner'; 
MyClass.prototype.protox = 'changed'; 
proObj.x = 'Changed Too'; 
alert(obj.protox); 
alert(obj.x); 

输出的就是 I am winner 和 Changed Too了。事实上，这些prototype逐层引用，构成了一个prototype链。当读取一个对象的属性的时候，首先寻找自己定义的属性，如果没有，就逐层向内部隐含的prototype属性寻找。但是在写属性的时候，就会把它的引用覆盖掉，是不会影响prototype的值的。
再介绍闭包，首先说明下，这里的闭包（closure）和离散数学中关系的传递闭包中的不是一个概念，我曾以为他们之间有关联，后来仔细想想，似乎并无什么关联，恰好名字一样而已。先看定义：
Closure
A "closure" is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).
要完全理解闭包需要对Javascript函数的机理有比较透彻的理解，而这个机理有点复杂，并不是三言两语能讲清的，有兴趣的朋友可以看这里 Javascript clousures. 即使是这篇文章，也只是大概讲了下原理。大意就是任何一个函数调用都在一个运行上下文（Execution Context）中执行的，这个上下文中有一个作用域对象，其中包括了这个函数的局部变量、参数等。另外，如果一个函数是一个内部函数，它的作用域中含有它外部函数的作用域。在内部函数遇到一个变量名的时候，它是从内部的作用域找起，不断往外层的作用域找。因此，如果内部函数作为一个对象返回出外部函数的时候，即使外部函数已经执行完毕，但是由于其内部函数仍有引用指向它，内部函数不会被释放，因为内部函数有外部函数的作用域，因此外部函数的局部变量也不会被释放。这就构成了闭包。

上一篇：IE6下JS动态设置图片src地址问题

下一篇：Extjs学习笔记之六面版