面向对象

最新推荐文章于 2024-10-14 20:18:07 发布

维克多噗噗

最新推荐文章于 2024-10-14 20:18:07 发布

阅读量267

点赞数

分类专栏：知识点

知识点专栏收录该内容

52 篇文章

订阅专栏

本文介绍了JavaScript面向对象编程的基础概念，包括抽象、封装、继承和多态等特性，并通过实例展示了构造函数、原型对象的使用及构造函数优先级的规则。

        javascript一切都是对象
        面向对象编程(oop)的特点
            抽象:抽取对象 抓住核心问题
          !!封装:只有对象才可以执行方法和属性
            继承:(extend) 从已有对象上继承新的对象
            多态:(Interface接口) 多个对象不同的形态展示 (usb接口)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
    </style>
</head>
<body>
    <script type="text/javascript">
        /*
            面向对象编程
                流程式写法
                面向对象写法 ---> 鸟类

            var arr = new Array();
            var date = new Date();
            var pattern = new RegExp();
            var obj = new Object();

            //包装类
            var string = new String();
            var string = new Number();
            var string = new Boolean();


            javascript一切都是对象
            面向对象编程(oop)的特点
                抽象:抽取对象 抓住核心问题
                封装:只有对象才可以执行方法和属性
                继承:(extend) 从已有对象上继承新的对象
                多态:(Interface接口) 多个对象不同的形态展示 (usb接口)
         */
         /*
        var obj1 = new Object();
        obj1.name = "xq";
        obj1.age = 18;
        obj1.say = function(){
            alert("同学们晚上好");
        };

        // alert(obj1.name);
        // obj1.say();
        var obj2 = new Object();
        obj1.name = "cc";
        obj1.age = 20;
        obj1.say = function(){
            alert("我叫cc");
        };*/

        /*
            封装 --- 工厂模式(Person)
                     为了解决对个对象的声明
                     两者是不会覆盖
                     obj instanceof object 检测obj是不是object创建的对象
                     无法识别到底是谁创建的对象
         */

        function Person(name,age){
            //原料
            var obj = new Object();
            //每个角色 姓名年龄
            //加工
            obj.name = name;
            obj.age = age;

            //具有相同的动作
            obj.say = function(){
                alert(this.name +"==="+ this.age);
            };
            //出厂
            return obj;
        };

        var p1 = Person("xq",18);
        // p1.say();
        // alert(p1 instanceof Person);//false
        alert(p1 instanceof Object);//true

        var p2 = Person("cc",20);
        // p2.say();
        // alert(p2 instanceof Person);//false



    </script>
</body>
</html>

    用new调用一个函数的时候
        这个函数创建的对象就是this
        并且默认返回this对象(隐式返回)

    构造函数
        ###一定要通过new创建对象
        用new调用一个函数的时候这个函数创造的对象就是this
        默认返回this对象(隐式返回)
        可以识别是谁创建的对象 instanceof
        每个对象都不相同


    构造函数和工厂模式区别
        1:有无new
        2:没有直接将属性赋值给this
        3:没有return

    作用:创建了一类对象

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li {list-style: none;}
            body {font-family: "Microsoft yahei";}
        </style>
    </head>
<body>

<script type="text/javascript">
    /*
        用new调用一个函数的时候
            这个函数创建的对象就是this
            并且默认返回this对象(隐式返回)

        构造函数
            ###一定要通过new创建对象
            用new调用一个函数的时候这个函数创造的对象就是this
            默认返回this对象(隐式返回)
            可以识别是谁创建的对象 instanceof
            每个对象都不相同


        构造函数和工厂模式区别
            1:有无new
            2:没有直接将属性赋值给this
            3:没有return

        作用:创建了一类对象
     */

    /*function Person(name,age){
        this.name = name;
        this.age = age;
        this.say = function(){
            alert(this.name);
        };
        // return this;
    };
    var p1 = new Person("123",123);
    p1.say();
    alert(p1 instanceof Person);//true;
    alert(p1 instanceof Object);//true;*/

    //一般
    function Person1(){

    };

    var p1 = new Person1();
    alert(typeof p1);
    p1.name = "xq";
    p1.age = 18;
    p1.say = function(){
        alert(this.name +"=="+ this.age);
    }
    p1.say();
    alert( p1 instanceof Person1);
</script>
</body>
</html>

    面向对象 原型prototype
        作用:去改写对象下边的方法或者属性在内存中只有一份
        ###prototype只能给构造函数加

        js的内置构造函数只能添加不可以修改 (不要去这么做)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
    </style>
</head>
<body>
    <script type="text/javascript">
        /*
            面向对象 原型prototype
                作用:去改写对象下边的方法或者属性在内存中只有一份
                ###prototype只能给构造函数加

                js的内置构造函数只能添加不可以修改 (不要去这么做)
         */



        var arr1 = [1,2,3,4,5];
        var arr2 = [1,2,3,4,5];
        var arr3 = [1,2,3,4,5];
        // arr1.sum = function(){
        //     var sum = 0;
        //     for(var i=0;i<this.length;i++){
        //         sum += this[i];
        //     };
        //     return sum;
        // };
        //求和
        // alert(arr.sum());


        // function Array(){

        // }

        Array.prototype.sum = function(){
            //迭代
            return this.reduce(function(cur,prev){
                return cur+prev;
            });
        };
        //alert(arr1.sum()+"--"+arr2.sum()+"---"+arr3.sum());


        // alert(isArray(str));
        function isArray(arr){
            if(typeof arr =="object" && arr.constructor.toString().toLowerCase().indexOf("arr")!=-1){
                return true;
            }else{
                return false;
            }
        }
    </script>
</body>
</html>

在构造函数上扩展

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li {list-style: none;}
            body {font-family: "Microsoft yahei";}
        </style>
    </head>
<body>

<script type="text/javascript">
    //在构造函数上扩展
    //

    function Person(name,age){
        this.name = name;
        this.age = age;
    };
    var per = Person.prototype;
    // alert(per);//object
    //扩展有两种
    //一种方法
    //存储的位置相同 共有的
    // Person.prototype.say = function(){
    //     alert(this.name);
    // };
    Person.prototype.dis = "boy";//存储的位置相同 共有的
    // var p1 = new Person("pp",12);
    // var p2 = new Person("pp1",1323);
    // alert(p1.say() == p2.say());//true ====>存储的say位置是一样
    // alert(p1.dis);//"boy";
    // alert(p2.dis);
    // alert(p1.constructor == Person);//true

    // 第二种字面量形式 扩张prototype
    Person.prototype = {
        constructor:Person,//需要手动的改变构造器的指向
        dis:"boy",
        say:function(){
            alert(this.name);
        }
    };
    var per = new Person("2",123);
    // alert(per.constructor == Person);//没手动改变constructor时.===>Object  false
    // alert(per.constructor == Object);//true

    // 手动改变之后
    alert(per.constructor == Person);//true
    alert(per.constructor == Object);//false
</script>
</body>
</html>

构造函数的优先级

在构造函数中的属性叫做自有属性 prototype 叫做扩张展属性  首先会找自有属性---再找prototype---undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
    </style>
</head>
<body>
    <script type="text/javascript">
        function Person(){
            // this.name = "xq1";//它优先
        };


        Person.prototype = {
            constructor:Person,
            // name:'xq2',
            age:18,
            point:function(){
                alert(this.constructor);
            }
        };


        //在构造函数中的属性叫做自有属性 prototype 叫做扩张展属性  首先会找自有属性---再找prototype---undefined
        var person = new Person();
        alert(person.name);


        // var a = 2;
        // function fn(){
        //     var a = 1;
        //     console.log(a);
        // }
    </script>
</body>
</html>