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. (转)Web开发中最致命的小错误

    Web开发中最致命的小错误 现在,有越来越多所谓的“教程”来帮助我们提高网站的易用性.本文收集了一些在 Web 开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助 Web 开发者更好 ...

  2. oracle 11g常用命令

    1.监听启动监听lsnrctl start停止监听 lsnrctl stop 查看监听状态 lsnrctl status 2.启动用oracle用户进入su - oracle运行sqlplus命令,进 ...

  3. java获取当前路径的几种方法

    1.利用System.getProperty()函数获取当前路径: System.out.println(System.getProperty("user.dir"));//use ...

  4. 关于使用由CA机构(EJBCA)颁发的证书实现SLLSocket双向认证服务端报null cert chain的解决方案

    在 SSLSocket实现服务端和客户端双向认证的例子 文章中最后提到使用keytool.exe的自签证书实现双向认证可以,但是使用ejbca生成证书实现SLL Socket的双向认证是服务端老是报错 ...

  5. Page.ClientScript.RegisterStartupScript 与 Page.ClientScript.RegisterClientScriptBlock 之间的区别

    Page.ClientScript.RegisterClientScriptBlock 在页面紧跟<form>之后,整个页面未完全加载完成. Page.ClientScript.Regis ...

  6. Mvc--Html.ActionLink()用法

    },new{ target="_blank"})会生成 <a href="Products/Detail/1" target="_blank&q ...

  7. 笔记-linux下Qt5.3.2 静态编译

    这里主要讲linux下的编译,windows下面比较简单 参考:http://qt-project.org/wiki/Building-Qt-5-from-Git 依赖 sudo apt-get in ...

  8. B - Moving Tables

    B - Moving Tables Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u S ...

  9. 在Eclipse中使用Maven构建SpringMVC项目

    环境搭建 安装JDK, Eclipse, Tomcat等 – 请参考网上常见攻略. 安装Maven: 下载需要的Maven 版本( http://maven.apache.org/download.c ...

  10. [置顶] 修改Android开机画面之rle制作

    第一个动画: Bootloader开机使用的图片是linux.bmp,长高分别是120*120,色度是32,所以可以拿相同格式图片替换,进行编译烧写即可. 第二个图片:内核logo 这个修改方式,我在 ...