0x00:使用OOP技术,常常要使用许多的代码模块,每个模块都提供特定的功能,每个模块老师孤立的,甚至与其它的模块完全独立,这种模块化的编程方法大大的提供了代码实现的多样性,大大增加了代码的重用性。js并不是直接的oop语言,但是可以通过模拟的方式做到其它很多oop语言才能做到的事情,如继承、多态、封装(没有做不到,只有想不到)

0x01:对象的属性

对象的属性分为对象属性、私有属性 和类属性

对象属性:要创建对象后才能使用

私有属性:在内部就可以使用,在外部需要通过闭包才能使用

类属性可以通过对象名称直接使用

    function func(){
        this.objPro1 = "对象属性";
        func.prototype.objPro2 = "对象属性";
        var privatePro = "私有属性";
    }     func.classPor = "类属性";
    console.log(func.classPor);    
    var f = new func();
    console.log(f.objPro1);

console.log(f.objPro2);

结果如图 :

我们再访问一下私有属性试试看

console.log(f.privatePro);

结果如图:

在内部访问私用属性:

    function func(){
        this.objPro1 = "对象属性";
        func.prototype.objPro2 = "对象属性";
        var privatePro = "私有属性";
        this.getter = function(){
            return privatePro;
        }
    }     func.classPor = "类属性";
    var f = new func();

console.log(f.getter());

结果如图:

还有就是通过闭包的方式来取得私有变量

    function func(){
        this.objPro1 = "对象属性";
        func.prototype.objPro2 = "对象属性";
        var privatePro = "私有属性";
        this.getter = function(){
            return privatePro;
        }
        return function(){
            return privatePro;
        }
    }
    var fun = new func();

console.log(fun());

看结果:

0x02:对象方法

对象方法包括:对象方法、私有方法和类方法,使用类似 前面的属性

function demoClass(){

        //私有方法
        var privateMethod = function(){
            console.log("this is a private method");
        }         //属性方法
        this.objMethod = function(){
            console.log("this is a object method");
        }         demoClass.prototype.proMethod = function(){
            console.log("this is a object method too");
        }
    }     demoClass.classMethod = function(){
        console.log("this is class method");
    }     var f = new demoClass();
    f.objMethod();//调用属性方法
    f.proMethod();//调用属性方法

结果如图:

那我们再调用一下私有方法试一下:

f.privateMethod(); //调用私有方法

调用一下类方法:

f.classMethod();//调用类方法

demoClass.classMethod(); //调用类方法

总结:

1,对象方法是可以通过实例被调用的,无论是类内的属性方法或者是原型方法构造的属性方法。

2,类方法不能通过实例被调用,可以通过类名"."类方法()的模式调用。 类方法也叫静态方法

0x03:继承、封装、多态

js实现继承是通过 apply方法或者是通过prototype实现的,如果使用apply方法,子类的原型是子类,如果使用prototype,那么子类的原型也将继承父类。

    function fatherClass(name,age){
        this.name = name;
        this.age = age;
        this.say = function(){
            console.log(" the say method of father class");
        }
    }     function oneSon(name,age){
        fatherClass.apply(this,[name,age]);
    }     var objOneSon = new oneSon("oneSon",20);
    console.log(objOneSon.name);
    console.log(objOneSon.age);
    objOneSon.say();
    console.log(objOneSon instanceof fatherClass);

console.log(objOneSon instanceof oneSon);

结果如图:

如果使用prototype方法

    function fatherClass(name,age){
        this.name = name;
        this.age = age;
        this.say = function(){
            console.log(" the say method of father class");
        }
    }     function oneSon(name,age){
        fatherClass.apply(this,[name,age]);
    }
    oneSon.prototype = new fatherClass();
    var objOneSon = new oneSon("oneSon",20);
    console.log(objOneSon.name);
    console.log(objOneSon.age);
    objOneSon.say();
    console.log(objOneSon instanceof fatherClass);

console.log(objOneSon instanceof oneSon);

结果如图:

子类的方法会覆盖父类的方法,即表现的是多态性

    function fatherClass(name,age){
        this.name = name;
        this.age = age;
        this.say = function(){
            console.log(" the say method of father class");
        }
    }     function anotherSon(name,age){
        this.say = function(){
            console.log("i am anotherSon");
        }
    }     anotherSon.prototype = new fatherClass();     function threeSon(name,age){
        this.say = function(){
            console.log("i am threeSon");
        }
    }     threeSon.prototype = new fatherClass();     function yes_or_no(cls){
        if(cls instanceof fatherClass){
            cls.say();
        }
    }     var objanotherSon = new anotherSon();
    var objthreeSon = new threeSon();
    yes_or_no(objanotherSon);

yes_or_no(objthreeSon);

结果如图所示:

即实现了类的多态。

js面向对象的三大特性的更多相关文章

  1. js 面向对象的三大特性

    一.封装 所谓封装的概念,是不希望暴露函数中属性或者方法的地址,使外界不能操作,但是可以暴露特有的公有接口,可以利用接口操作. function hello(){ var name='xiaoming ...

  2. js 面向对象的三大特性:封装,继承、多态

    一:什么是封装? 封装的定义:就是对象内部的变化对外界是透明的,不可见的. 封装的场景: 在写项目的过程中,有时候不同页面,会有相同的功能,我们还需要每个页面都写一遍吗?额,,,,其实也可以写的,只不 ...

  3. JavaScript面向对象的三大特性

    1.JavaScript面向对象的三大特性 JavaScript的三大特性:封装性.继承性.多态性. 2.JavaScript实现封装特性 在一些静态类型的语言如java中,本身语法就提供了这些功能. ...

  4. JavaScript中面向对象的三大特性(一个菜鸟的不正经日常)

    经过几天的学习,把jQuery给啃会了,但是运用的还不算特别熟练,总感觉自己在JavaScript方面的基础十分欠缺,所以继续拾起JavaScript,开始更好的编程之旅~ 今天学的是JavaScri ...

  5. 谈谈Java面向对象的三大特性

    Java面向对象的三大特性就是指封装.继承.多态了. 一.封装: 概念:封装是指隐藏对象的属性和实现细节,仅对外提供公共访问方式. (举例:笔记本电脑就是一个封装体,Java语言中最小的封装体就是函数 ...

  6. oc语言--面向对象的三大特性

    一.封装 1.什么是封装 在程序上,隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读和修改的访问级别:将对象得到的数据和行为(或功能)相结合,形成一个有机的整体,也就是将数据与操作数据的 ...

  7. OC面向对象的三大特性

    一.面向对象的三大特性:封装(成员变量).继承和多态 1. set方法和get方法 1. set方法和get方法的使用场合 @public的成员可以被随意赋值,应该使用set方法和get方法来管理成员 ...

  8. java基础笔记(6)----面向对象的三大特性

    简介:面向对象的三大特性就是封装,继承,多态,是面向对象的核心. 封装 简介:封装是类的边界,可以对数据起到保护作用 特性:属性私有,提供公开的get/set方法 属性私有:private 数据类型 ...

  9. C#基础知识之面向对象以及面向对象的三大特性

    在C#基础知识之类和结构体中我详细记录了类.类成员.重载.重写.继承等知识总结.这里就记录一下对面向对象和面向对象三大特性的广义理解. 一.理解面向对象 类是面向对象编程的基本单元,面向对象思想其实就 ...

随机推荐

  1. python中判断readline读到文件末尾

    fp = open('somefile.txt') while True: line = fp.readline() if not line: #等价于if line == "": ...

  2. js 数组,字符串,JSON,bind, Name

    /** * Created by W.J.Chang on 2014/5/23. */ // 判读是否是数组的方法 console.log(Array.isArray(new Array)); con ...

  3. 单例模式 GetInstance()

    如何设计一个含GetInstance()函数的类 直接上代码: 头文件(MyClass.h): class CMyClass { public: CMyClass(void); ~CMyClass(v ...

  4. JS 人民币大写

    /***** HongShijin** Me@HongShijin.com** 2014-10-15 9:13:00.00000** text/javascript***/ (function ($) ...

  5. spm3 基本

    spm3 命令 spm init //初始化一个spm模块,会生成基本配置以及测试文件等(下图). //注 初始化以后一般需要 鲜执行一下 spm install 安装默认依赖模块 index.js就 ...

  6. DataTable去除重复行

    //抽取dt中的特定列"Region","Cur","Year"组合成新的dat DataTable dat = dt.DefaultVie ...

  7. 2014.9.3数据库CRUD

    CRUD 增删改查 DCL 数据控制语言:备份,grant DML 数据操作语言: CRUD DDL 数据定义语言:create drop alter 自增长列不能赋值 增: Insert into  ...

  8. Building Workspace速度慢的原因

    今天把ext3.0部署到web project很慢很慢,查了一下,这个当笔记. 转自http://blog.163.com/jong_cai/blog/static/87028045201311178 ...

  9. yii2.0 从控制器到视图的输出

    在controllers/SiteController.php文件中,添加 public function actionSay($message = 'Hello') { return $this-& ...

  10. PHP判断是中文还是英文

    static function ischinese($s){ $allen = preg_match("/^[^/x80-/xff]+$/", $s); //判断是否是英文 $al ...