zoukankan      html  css  js  c++  java
  • JS封装继承函数

     1 function extend(child,parent){
     2     var F=function(){}
     3     F.prototype=parent.prototype;
     4     child.prototype=new F();
     5     child.prototype=child;
     6     child.uber=parent.prototype; //uber指向父对象的原型。方便子对象调用父对象原型中的重写的方法。
     7 }
     8 function Shape(){}
     9 Shape.prototype.name="Shape";
    10 Shape.prototype.color="blue";
    11 
    12 function circle(radius){
    13     this.radius=radius;
    14 }
    15 
    16 circle.prototype.name="circle";
    17 circle.prototype.getS=function(){
    18     return this.radius*this.radius*3.14;
    19 }
    20 extend(circle,Shape);
    21 
    22 var cir=new circle(2);
    23 alert(cir.name);   //"circle"
    24 alert(cir.color);    //"blue"
    25 alert(cir.uber.name);    //"Shape"
    26 alert(cir.getS()) //"12.56"


     extend函数的第一个参数是子构造器,第二个参数是父构造器;

    为什么子构造器的原型对象不直接指向父构造器的原型对象,是因为若child.prototype=parent.prototype,则会出现父子的原型对象绑定在一起,即父子的原型对象的引用相等,相当于指向同一个地址,改变子对象的原型,父对象的原型也会随之改变, 若遍历父对象的原型和子对象的原型,发现两个完全相同个。

     1 var cir=new circle(2);
     2 var shape1=new Shape();
     3 cir.prototype.name="this is circle";
     4 
     5 
     6 for(var i in shape1){
     7      if(!shape1.hasOwnProperty(i)){  //遍历非实例属性
     8          console.log(i+":"+shape1[i]);
     9      }
    10 }
    11 
    12 //name:circle
    13 //color:blue
    14 //getS:function (){
    15     return this.radius*this.radius*3.14;
    16 }
    17 
    18 
    19 for(var i in cir){
    20      if(!cir.hasOwnProperty(i)){
    21         console.log(i+":"+cir[i]);
    22      }
    23 }
    24 
    25 //name:circle
    26 //color:blue
    27 //getS:function (){
    28     return this.radius*this.radius*3.14;
    29 }.
    爱写代码的孩子运气不会太差。 github:http://github.com/lavyun 新浪微博:http://weibo.com/u/5921186675 个人网站: http://lavyun.cn
  • 相关阅读:
    INS-30011 输入的ADMIN口令不符合Oracle建议的标准
    INS-30001 ADMIN口令为空
    INS-20802
    ORA-00922:选项缺失或无效
    struts2的配置文件
    Cache Fusion
    MQ配置模板
    RTSP流媒体数据传输的两种方式(TCP和UDP)
    ArcGIS For Flex报错二
    ArcGIS For Flex报错
  • 原文地址:https://www.cnblogs.com/smartXiang/p/5890373.html
Copyright © 2011-2022 走看看