js 面向对象 继承

Posted 2020-09-24 暑假暑假

继承方式有四种：

1、call

2、apply

3、prototype

4、for in 

 

call 和 apply 的主要区别：

call 传参数只能一个一个的传，

apply 因为是用数组，所以可以用arguments 获取所有的实参。当参数多时，就用apply更方便。

arguments = 返回参数集合

 

call 和 apply 继承

已打飞机游戏为例：

创建飞机时有很多重复的步骤

以创建玩家飞机 用call 继承 和用applay 创建boss飞机为例：

/*父模板*/
/*x,y,节点,blood,speed
* move
* shoot XXX
* init
* */

 1   /*通用的父模板*/
 2     function Plane(x,y){
 3     console.log("plane构造函数")
 4     console.log(this);
 5       this.x = x;
 6       this.y = y;
 7       this.imgNode = document.createElement("img")
 8       this.imgsrc="";
 9       this.blood=5;
10       this.speed=10;
11       this.move=function(){
12         console.log("Plane的move方法");
13       }
14       this.init=function(){}
15       this.init();
16     }

/*1.call*/
    function PlayerPlane(px,py){
    console.log(this);    //new PlayerPlane()
     // call传递参数,参数依次写上
    Plane.call(this,px,py); //写在代码第一行
//     重写 ==》多态 同一个方法，不同的实现方式
    this.x=1000;
    this.move=function(){
    console.log("Player Plane 的move方法")
    }
     this.shoot=function(){}
    }

    var playerplane = new PlayerPlane(200,300);
    console.log(playerplane.hasOwnProperty("x")); //true
    console.log(playerplane.x)
    playerplane.move();

 /*2.apply*/

    function BossPlane(bx,by){
      console.log(arguments);   //参数数组
      Plane.apply(this,arguments);
      this.move=function(){
        console.log("Boss飞机的移动");
      }
    }

    var bossplane = new BossPlane(100,200);
    console.log(bossplane.x,bossplane.y);
    bossplane.move()

 

 

原型继承

    /*通用的手机模板*/
    function Phone(name,price){
      this.phoneName = name;
      this.price = price;
      this.color="red";
      this.callPhone=function(){

      }
    }

    function IPhone(){
      this.color="blue";
      this.music=function(){
        console.log("听音乐");
      }
      this.news=function(){
        console.log("看新闻");
      }
    }

    var iphone1 = new IPhone();
    console.log(iphone1.color);

    //原型链继承
    IPhone.prototype = new Phone("苹果",6000);
    var iphone2 = new IPhone();
    console.log(iphone2.color);

    console.log(iphone1.__proto__); //原本的Iphone.prototype, 空对象
    console.log(iphone2.__proto__); //new Phone()
    console.log(iphone1.__proto__===iphone2.__proto__); //false

    IPhone.prototype.newfunc=function(){
      console.log("新添加的功能");
    }
    iphone1.__proto__.newfunc2=function(){
      console.log("另外一个新添加的功能");
    }
//    iphone1.newfunc2();
//    iphone2.newfunc();
    console.log("color" in iphone2);    //true
    console.log(iphone2.hasOwnProperty("color"));   //false

区别与前两种方法：

通过原型链继承的属性不是自己的，

只是存在于原型链上。

 Phone.country="中国";
//    var p = new Phone();
//    console.log(p.country)    //undefined 原型链上并没有
//    console.log("country" in p) //false
    /*p = 实例化对象
    * Phone = 函数 --- 函数也是一个对象*/
//    console.log(Phone.country);   //只有Phone函数才能调用country

//    var iphone1 = new IPhone();
//    console.log(iphone1.country);

    IPhone.prototype = new Phone();
    var iphone2 = new IPhone();
    console.log(iphone2.country);   //undefined
    console.log(iphone2.color);


    IPhone.prototype = Phone;
    var iphone3 = new IPhone();
    console.log(iphone3.country); // 打印得出来了
    console.log(iphone3.color);  // undefined
    console.log(iphone3.__proto__.__proto__.__proto__)

//prototype 指向一个对象就行了，可以是自己创建的新对象。
    IPhone.prototype={
      newAttr1:"新属性1",
      newAttr2:"新属性2"
    }
    var iphone4 = new IPhone();
    console.log(iphone4.newAttr1);