js模块，类，继承，命名空间，私有属性等相关概念梳理

浏览数：58 / 时间：2015年06月09日

js确切的说是一种基于对象的语言，和纯面向对象的语言（比如as）稍微有点区别，js中没有类的概念。虽然有继承但是基于原型的继承。随着前段越来越受重视，jser们利用js的一些特性他们制造出了和纯面向对象一样好玩的东西。下面就js中一些概念进行概述，很多东西都是来自博客园的一些大牛，我写这篇文章主要想拿as和js做对比来讲，以方便as像转js的程序员们。本片文章涉及的概念有，模块，类，继承，私有属性和公开属性。

1.模块
大家写as的时候都知道，as里面是有类的概念，每次生成一个类，系统中都会多一个以.as结尾的文件，这个文件我们称为类文件，我们会将所有关于该类实现的属性方法放到这个文件中来写。那么js呢。在我看了很多大牛的博客后，了解到js也是可以分模块的。有两种写法。

//module1.js
1).(function(namespace) {
    function log() {
        console.log(‘test‘);
    }
    namespace.run = function() {
        log();
    };
})(window.module1 = window.module1 || {});


//module2.js
2).var module2 = {
    run: function() {
         console.log(‘hi module‘);
    }
}

从这两种写法中我们可以看到，js中单独的模块并不一定是一个单独的类，而是将一组相关的逻辑写到一个模块中，目的在于程序架构清晰和便于协同开发。

2.类的概念
js中没有类，但是每个函数都可以使用new来生成新的对象。也就是说在js中每个函数都可以代表as中类的概念。那么类中私有方法，公开方法，私有属性和公开属性又是怎样实现的。可以看代码

function ClassA(){
        var a ＝ 1；//这里的a是在函数中使用var关键字声明的，表示的是ClassA中的私有属性，外部不可访问
        this.b = 2;//这里this调用的，表示的是ClassA中公开的属性。
        c = 3;//这里声明的c不在ClassA中，而是在全局作用域，相当于window.c = 3;
        function d(){//这种形式声明的函数属于私有函数，只能在ClassA中调用，window也无法调用。
        console.log(‘function d‘);
    }

    this.e = function(){//这种形式声明的函数，属于公开函数
        console.log(‘function e‘);
    }
}
var cla = new ClassA();
console.log(cla.a);//undefined
console.log(cla.b);//2
console.log(cla.c);//undefined
console.log(window.c);//3

console.log(cla.d);//undefined
console.log(cla.e);//输出函数e的实现
console.log(window.d);//undefined

3.继承
aser都知道as继承一个类很简单只要使用extends就可以了。但是js里面继承是使用的原型继承，什么是原型继承呢。js里面对象有个prototype属性，我们利用这个属性来实现继承。代码演示如下：

function ClassB(){
        this.a = 10;
        this.run = function(){
                console.log(‘函数run被调用‘);
        }
}

function ClassC(){};

ClassC.prototype = new ClassB();//这样ClassC就继承了ClassB的属性和方法不信可以实验下

var t = new ClassC();
console.log(t.a);//看到没，这里输出的是10
t.run();//这里输出的是“函数run被调用”

ClassC.prototype.proA = 34;

console.log(t.proA);//34

4.命名空间
js里面的命名空间是如何实现的呢

var com = {};
com.amswf = {};
com.amswf.utils = {};
com.amswf.utils.PageUtil = function(){
        this.getPageURL = function(){
                return window.location.href;
        }
}

上面概念如果理解的话，我们可以这样写一个类模块

//PageUtil.js
(function(window){
        window.com = {};
        com.amswf = {};
        com.amswf.utils = {};
        com.amswf.utils.PageUtil = function(){};
        com.amswf.utils.PageUtil.prototype.name = ‘amswf‘;
        com.amswf.utils.PageUtil.prototype.getPageURL = function(){
                return window.location.href;
        };
        //其他属性方法可以继续。。。
})(window)

外部使用如下：
var util = new com.amswf.utils.PageUtil();
console.log(util.getPageURL());//这里会输出当前网页地址
感兴趣的朋友，可以到我的博客上做客，http://amswf.com，会有更多东西奉献给大家。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js模块，类，继承，命名空间，私有属性等相关概念梳理