zoukankan      html  css  js  c++  java
  • js模块,类,继承,命名空间,私有属性等相关概念梳理

    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,会有更多东西奉献给大家。

  • 相关阅读:
    CMS之图片管理(4)
    CMS之图片管理(2)
    CMS:文章管理之控制器
    CMS:文章管理之视图(1)
    CMS:文章管理之视图(3)
    CMS:文章管理之视图(2)
    影响Incremental checkpoint position的条件
    oracle中一个数据文件的最大值(非lob)
    X$KCCLE
    图一时之快:手动释放Linux服务器内存
  • 原文地址:https://www.cnblogs.com/crkay/p/3414810.html
Copyright © 2011-2022 走看看