zoukankan      html  css  js  c++  java
  • js原生继承之——组合式继承实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>groupInherit</title>
        <script type="text/javascript">
        //声明父类
        function superClass(name){
            this.name = name;
            this.books = ['html','css','js'];
        }
        superClass.prototype.getName = function(){
            console.log(this.name);
        }
        superClass.prototype.getBooks = function(){
            console.log(this.books);
        }
        //声明子类
        function subClass(name,time){
            superClass.call(this,name);//让子this指向父this,后面带的是父类需传入的参数name
            this.time = time;
        }
        subClass.prototype = new superClass();//类式继承
        subClass.prototype.getTime = function(){
            console.log(this.time);
        }
        //测试用例:实例化对象测试
        var test1 = new subClass('js book',2015);
        var test2 = new subClass('css book',2014);
        test1.books.push('php');//test2插入的数据'php'不影响test1

        console.log(test1.name);      //'js book'
        console.log(test1.books);   //["html", "css", "js", "php"]
        test1.getName();              //'js book'
        test1.getBooks();           //["html", "css", "js", "php"]
        test1.getTime();            //2015

        console.log(test2.name);      //'css book'
        console.log(test2.books);   //["html", "css", "js"]
        test2.getName();              //'css book'
        test2.getBooks();           //["html", "css", "js"]
        test2.getTime();            //2014

        //本例已经通过验证,this属性和原型方法均能访问
        </script>
    </head>
    <body>
        
    </body>
    </html>

  • 相关阅读:
    如何快速修改替换对象中的某个属性?
    element组件 MessageBox不能显示确认和取消按钮,记录正确使用方法!
    记录一下vue transition 过渡各状态()
    记录一下vue slot
    vue路由传参query和params的区别(详解!)
    一段话让你理解vuex的工作模式!
    vue+axios访问本地json数据踩坑点
    怎么构建vue-cli项目
    IO模型
    epoll真正实现高并发服务器
  • 原文地址:https://www.cnblogs.com/koleyang/p/4916827.html
Copyright © 2011-2022 走看看