失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > js 面向对象 继承

js 面向对象 继承

时间:2024-03-18 17:13:45

相关推荐

js 面向对象 继承

继承方式有四种:

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 /*通用的父模板*/ 2function Plane(x,y){ 3console.log("plane构造函数") 4console.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__); //falseIPhone.prototype.newfunc=function(){console.log("新添加的功能");}iphone1.__proto__.newfunc2=function(){console.log("另外一个新添加的功能");}// iphone1.newfunc2();// iphone2.newfunc();console.log("color" in iphone2); //trueconsole.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);

如果觉得《js 面向对象 继承》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。