zoukankan      html  css  js  c++  java
  • web前端学习(四)JavaScript学习笔记部分(9)-- JavaScript面向对象详解

    1、认识面向对象

    1.1、概念

      1.一切事物皆是对象

      2.对象具有封装和继承特性

      3.信息隐藏(类的信息隐藏,包括属性和方法)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        var person = {
            name : "iwen",
            age:30,
            eat:function(){
                alert("能吃");
            }
        }
        alert(person.name);
        person.eat();/*执行对象的函数时带上括号就可以执行了*/
    
    
        function Person(){
            /*什么都不写*/
        }/*把函数当做对象使用*/
        Person.prototype = {
            name:"iwen",
            age:30,
            eat:function(){
                alert("吃two");
            }
        }
        var p = new Person();
        console.log(p);
        alert(p.age + `,`+p.name);
        p.eat();
    </script>
    </body>
    </html>

    2、面向对象(一)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        // alert(`wocao???`);/*测试alert能不能用反引号,结果是可以的*/
        (function(){
            var n = "testName";/*在进行封装之后只能在封装包内部进行使用,子类无法进行访问n的动作,访问的时候会出错*/
            function People(name){
                this.name = name;
                /*使用this指定的属性是子类在继承父类之后可以进行访问的属性*/
                 var ParentElement1 = "testParentElement1";
                this.ParentElement3 = "testParentElement3"
            }
            People.prototype.ParentElement2 = "testParentElement2";
            People.prototype.say = function(){
                alert("people-hello " + this.name);
            }
             window.People = People;/*将People对象赋值给window,在封装起来之后才可以使用,让子类进行继承*/
         }());/*记得这里要加一个分号*/
        /*这里不加外面那一层小括号会让你添加函数名,不然就出错,这里是执行这个函数的意思*/
        
        
        /*alert(People);*//*这里很奇怪,能够直接看到People这个函数对象的内容*/
        
        //alert(People.prototype.ParentElement1);/*undefined*//*不是类的属性名不能够访问,子类也无法访问,详情见下面子类访问ParentElement1*/
        alert(People.prototype.ParentElement2);/*这样写才能够访问属性*//*这里是在父类外部添加进去的属性*/
        //alert(People.prototype.ParentElement3);/*undefined*//*不是继承过他的子类其他人无法访问这个属性*/
        alert(People.prototype.name);/*--------*//*undefined*//*不是继承过他的子类其他人无法访问这个属性*/
    
        function Student(name){
            this.name = name;
        }
        Student.prototype = new People();
        var superSay = Student.prototype.say;
        var superTestParentElement1 = Student.prototype.ParentElement1;/*/*undefined*//*不是类的属性名不能够访问,子类也无法访问,详情见下面子类访问ParentElement1*/
        var superTestParentElement3 = Student.prototype.ParentElement3;
        Student.prototype.say = function(){
            superSay.call(this);
            alert(`student-hello `+this.name+` `+n+` `+superTestParentElement1+ ` `+ superTestParentElement3);
        }
        var s = new Student("iwen");
        s.say();
    
        /*2#
            楼主需要看情况实现哈!你在new一个子类对象的时候,需要先调用父类的相关构造器,对父类中的字段进行初始化操作!
           如果父类中的字段的权限修饰符声明为private的,那么子类将不能获知父类中该字段的任何信息(就如同不存在一样)。
        别的权限声明情境下,如果子类定义了一个和父类同名的字段,那么子类实例每次获取的都将是子类中声明的同名字段,
        如果想要调用父类中的同名字段,需要使用super关键字进行调用。当然如果子类和父类中同名字段存储的值不一样,
        那么取得的值自然也是不同的(具备不同的内存区间)。这个时候能够达到楼主想要的需求!!如果子类中没有与父类同名的字段,
        那么子类将通过继承获得父类的该字段,对子类的该字段的操作当然也会被保存起来的!!*/
    
        /*4#
        你可以用2个子类一起继承一个父类,然后用子类1调用父类的属性,改变值,再用子类2调用看值改变了没有,
        明显答案是没有。。不可能彻底改变父类的值,如果能改变那程序都乱跑了。。。子类不能彻底改变父类的值,
        只能调用父类的属性重新赋值罢了。。*/
    
    </script>
    </body>
    </html>

    3、面向对象(二)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        (function(){
            var n = "ime";
            function Person(name){
                var _this = {};
                _this._name = name;
                _this.sayHello = function(){
                    alert("PersonHello" + _this._name + n);
                }
                return _this;/*返回这个函数对象,这一句实现了这整个类的定义工作*/
            }
            window.Person = Person;
        }());
    
        function Teacher(name) {
            var _this = Person(name);
            var superSay = _this.sayHello;
            _this.sayHello = function(){
                superSay.call(this);/*调用自己的时候这样写是不能够在superSay后面加括号的*/
                alert("TeacherHello"+_this._name);
            }
            return  _this;
        }
        var t = Teacher("zhangjie");
        t.sayHello();
    
        t.testProperty = "原来如此";/*这种临时加的对象属性也是可以的,后面可以打印出来*/
        alert(t.testProperty);
    </script>
    </body>
    </html>
  • 相关阅读:
    golang 中 sync包的 WaitGroup
    Go_20: Golang 中 time 包的使用
    mysql 同步数据到 ElasticSearch 的方案
    mysql 对应 binlog 查看
    python3.6爬虫总结-01
    Golang 之协程详解
    golang私服搭建
    Ubuntu vim设置
    密码校验规则
    golang密码校验
  • 原文地址:https://www.cnblogs.com/foreverlin/p/10095830.html
Copyright © 2011-2022 走看看