首页 > 代码库 > JavaScript面向对象

JavaScript面向对象

 面向对象:不了解原理的情况下,会使用功能,不关注内部细节,是一种通用思想

对象:黑盒子 不了解内部的结构,知道表面的各种操作

面向对象编程OOP:

  •    特点:抽象(抓住核心问题),
  •    封装(不考虑内部实现,只考虑功能),
  •    继承(遗传 父母和孩子 从父类继承出一些属性和方法,还可以 有自己的新方法)

             多重继承  多态

 

对象由属性和方法组成

  • 属性-变量:状态 静态
  • 方法-函数:过程 动态
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script type="text/javascript">
        var a=7;//变量 自由的,不属于任何人
        alert(a);
        var arr=[1,2,3,4,5,6];
        arr.a=12;//属性 非自由,属于一个对象
        alert(arr.a);
        function aa(){
            alert(abc);//函数:自由
        }
        aa();
        arr.aa= function () {
            alert(abcd);//方法:非自由 属于对象
        }
        arr.aa();
    
    </script>
    </body>
    </html>

    结果:7       12     abc     abcd

  • this:当前发生事件的对象   当前的方法属于谁

    <script type="text/javascript">
        var arr=[1,2,3,4];
        arr.a=12;
        arr.show=function(){
            alert(this.a);
        }
        arr.show();
    </script>

    12

    <script type="text/javascript">
        window.show=function(){
        alert(this);
        }
        show();
    </script>

    object Window   当前的方法属于谁  属于Window

  • 不能再系统对象中随意添加方法、属性,否则会覆盖已有方法和属性
  • object 对象  没有东西
<script type="text/javascript">
   var obj=new Object();
    obj.name=blue;
    obj.qq=930260035;
    obj.showName= function () {
        alert(我的名字是:+this.name);
    }
    obj.showQQ= function () {
        alert(我的qq是:+this.qq);
    }
    obj.showName();
    obj.showQQ();
</script>

技术分享    技术分享

 

 

<script type="text/javascript">
    function createPerson(name,qq){//构造函数
       //原料
        var obj=new Object();
        //加工
        obj.name=name;
        obj.qq=qq;
        obj.showName= function () {
            alert(我的名字是:+this.name);
        };
        obj.showQQ= function () {
            alert(我的qq是:+this.qq);
        };
        //出厂
        return obj;
    }
    var obj=createPerson(blue,54546466);
    obj.showName();
    obj.showQQ();
    var obj2=createPerson(张三,555555555);
    obj2.showName();
    obj2.showQQ();
</script>
  • 工厂方式的缺点:没有new    函数重复导致资源浪费

JavaScript面向对象