zoukankan      html  css  js  c++  java
  • js继承

    参考:https://www.cnblogs.com/MuYunyun/p/5933366.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <script type="text/javascript">

    //使用原型(prototype)实现继承

    //通过function Person(){}定义一个函数对象
    function Person(name,age){
    this.name=name;
    this.age=age;
    }

    //通过函数默认的原型拓展方法
    Person.prototype.sayHello=function(){
    alert("使用原型得到Name:"+this.name);
    }
    var per=new Person("马小倩",21);//通过new Person()构造器的方式构造一个新的对象

    //通过这种方式构造对象,对象的原型会指向构造函数的prototype属性,也就是foo.prototype

    per.sayHello();//输出:使用原型得到的Name:马小倩

    function Student(){}
    Student.prototype=new Person("洪如彤",21);
    var stu=new Student();
    Student.prototype.grade=5;
    Student.prototype.intr=function(){
    alert(this.grade);
    }
    stu.sayHello();
    stu.intr();
    /**************************************/
    /*
    继承是oo语言中重要的特性和概念,两种继承方式:接口继承和实现继承
    ECMAScript只支持实现继承,其实现继承主要通过(原型链)来实现
    在PHP中,使用extend实现继承
    原型链基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法
    每个构造函数都是一个原型对象,原型对象包含一个指向构造函数的指针(prototype),而实列则包含一个指向原型对象的内部指针(__proto__)

    */
    //原型链有一种基本模式
    function SuperType(){
    this.property=true;
    }
    SuperType.prototype.getSuperValue=function(){
    return this.property;
    }
    function SubType(){
    this.subproperty=false;
    }

    //继承了SuperType
    SubType.prototype=new SuperType();
    SubType.prototype.getSubValue=function(){
    return this.subproperty;
    };

    var instance=new SubType();
    alert(instance.getSubValue);//true

    /*
    javascript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实列即可,即 "子类型".prototype=new 父类型();

    *///原型链
    //为父类型创建构造函数
    function SuperType(){
    this.name=['dali','jack','tim'];
    this.property=true;
    }
    //为父类型添加方法
    SuperType.prototype.getSuperValue=function(){
    return this.property;
    }
    //为子类型创建构造函数
    function SubType(){
    this.test=['h1','h2','h3','h4'];
    this.subproperty=false;
    }
    //实现继承的关键步骤,子类型的原型指向父类型的实列
    SubType.prototype=new SuperType();

    //在此处给子类型添加方法,一定要在实现继承之后,否则会在将指针指向父类型的实列。则方法为空
    SubType.prototype.getSubValue=function(){
    return this.subproperty;
    }

    /*
    原型链代码存在的第一个问题是由于子类型的原型是父类型的实例,也就是子类型的原型中包含的父类型的属性,从而导致引用类型值的原型属性会被所有实例所共享。以上代码的instance1.name.push('wyc');就可以证明此问题的存在。而原型链的第二个问题就是:在创建子类型的实例时,不能向超类型的构造函数中传递参数。因此我们在实际开发中,很少单独使用原型链。
    */
    /*


    //借用构造函数
    为了解决原型链中存在的两个问题,开发人员开始使用一种叫做借用构造函数的技术来解决原型链中存在的问题,只需要在子类型的构造函数内部调用父类型的构造函数即可
    函数只不过是特定环境下的执行对象,因此可以通过apply()或call()方法执行构造函数


    */
    //为父类型创建构造函数
    function SuperType(name){
    this.name=name;
    this.color=['pink','yellow'];
    this.property=true;
    this.testFun=function(){
    alert('http://tools.jb51.net/');
    }
    }

    //为父类型添方法
    SuperType.prototype.getSuerperValue=function(){
    return this.property;
    }

    //为子类型创建构造函数
    function SubType(name){
    SuperType.call(this,name);
    this.test=['h1','h2','h3','h4'];
    this.subproperty=false;
    }
    //在此处给子类型添加方法,一定要在实现继承之后,否则会将指针指向的父类型的实列,则方法为空
    SubType.prototype.getSubValue=function(){
    return this.subproperty;
    }
    /*
    可以看到以上代码中子类型SubType的构造函数内通过调用父类型"SuperType.call(this,name)"实现继承属性
    只能调用父类型中构造函数的方法:testFun。这就同创建对象中只使用构造函数模式一样,使得函数没有复用性可言。考虑到这些问题,借用构造函数的技术也是很少单独使用的。
    */
    /*
    组合继承(原型链+借用构造函数)
    顾名思义,组合继承就是结合使用原型链与借用构造函数的优点,组合而成的一个模式。实现也很简单,既然是结合,那当然结合了两方的优点,即原型链继承方法,构造函数继承属性。具体代码实现如下
    */
    //为父类型创建构造函数
    function SuperType(name){
    this.name=name;
    this.color=['pink','yellow'];
    this.property=true;

    this.testFun=function(){
    alert('http://www.baidu.com');
    }
    }

    //为父类型添加方法
    SuperType.prototype.getSuerperValue=function(){
    return this.property;
    }
    //子类型创建构造函数
    function SubType(name){
    SuperType.call(this,name);
    this.test=['h1','h2','h3','h4'];
    this.subproperty=false;
    }

    SubType.prototype=new SuperType();

    //在此处给子类型添加方法,一定要实现继承之后,否则会将指针指向父类
    SubType.prototype.getSubValue=function(){
    return this.subproperty;
    }

    /*
    以上代码通过SuperType.call(this,name);继承父类型的属性,
    通过SubType.prototype=new SuperType();继承父类型的方法。
    因此在子类型的构造函数内在次调用父类型的构造函数从而继承了父类型的属性而去覆盖了原型中所继承的属性,这样调用两次构造函数显然没有必要,但有什么方法可以解决呢?
    */

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

    日常所遇,随手而记。
  • 相关阅读:
    关于asp.net Ajax v1.0.61025版(即1.0 rc) 错误:'sys'未定义解决方法.
    MagicAjax Features (MagicAjax特点 0.30版) (翻译)
    简单测试在存储过程中临时表与union all的性能差别
    Reporting Service 中使用自定义程序集
    vs.net Ide智能感知自动失效后处理
    关于ie的内存泄漏与javascript内存释放
    无代码的工作流创作模式
    工作流服务Workflow Service(2):SendActivity
    推荐一个操作Zip文件的开源类库:DotNetZip
    工作流与WF
  • 原文地址:https://www.cnblogs.com/zhihou/p/6728948.html
Copyright © 2011-2022 走看看