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

  • 相关阅读:
    nginx能访问html静态文件但无法访问php文件
    LeetCode "498. Diagonal Traverse"
    LeetCode "Teemo Attacking"
    LeetCode "501. Find Mode in Binary Search Tree"
    LeetCode "483. Smallest Good Base" !!
    LeetCode "467. Unique Substrings in Wraparound String" !!
    LeetCode "437. Path Sum III"
    LeetCode "454. 4Sum II"
    LeetCode "445. Add Two Numbers II"
    LeetCode "486. Predict the Winner" !!
  • 原文地址:https://www.cnblogs.com/Alex80/p/4480897.html
Copyright © 2011-2022 走看看