JavaScript面向对象

Posted 缘琪梦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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面向对象的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

常用Javascript代码片段集锦

JavaScript单行代码,也就是代码片段

javascript 仿面向对象编程实例代码(私有,公共变量。。。)

JavaScript对象原型链继承闭包