继承方式有四种:

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);    //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);

转载于:https://www.cnblogs.com/ltxblog/p/7073638.html

js 面向对象 继承相关推荐

  1. JS面向对象的程序设计之继承-继承的实现-借用构造函数

    JS面向对象的程序设计之继承-继承的实现-借用构造函数 前言:最近在细读Javascript高级程序设计,对于我而言,中文版,书中很多地方翻译的差强人意,所以用自己所理解的,尝试解读下.如有纰漏或错误 ...

  2. 捋一捋js面向对象的继承问题

    说到面向对象这个破玩意,曾经一度我都处于很懵逼的状态,那么面向对象究竟是什么呢?其实说白了,所谓面向对象,就是基于类这个概念,来实现封装.继承和多态的一种编程思想罢了.今天我们就来说一下这其中继承的问 ...

  3. JS 面向对象编程、原型链、原型继承(个人学习总结)

    一.面向对象 1. 面向对象 是所有语言 都有的一种编程思想,组织代码的一种形式 基于对象的语言:JS语言 面向对象的语言:c++ java c# 2. 面向对象 3大特征 封装:将重用代码封装到函数 ...

  4. JavaScript(JS) 面向对象(封装、继承、多态)

    面向对象是把事物给对象化,包括其属性和行为.面向对象编程更贴近实际生活的思想.可以简单的理解面向对象的底层还是面向过程,面向过程抽象成类,然后封装,方便使用就是面向对象.本文主要介绍JavaScrip ...

  5. Js Call方法详解(js 的继承)

    call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN ...

  6. JS面向对象一:MVC的面向对象封装

    JS面向对象一:MVC的面向对象封装 MDNjavascript面向对象 面向对象(Object-Oriented) 面向对象里面向的意思是以...为主,面向对象编程既以对象为主的编程. 面向对象的一 ...

  7. 简单粗暴地理解js原型链–js面向对象编程

    简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...

  8. js中继承的几种用法总结(apply,call,prototype)

    本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承 js中有三种继承方式 1.js原型(proto ...

  9. 对js面向对象的理解

    转自:http://www.cnblogs.com/jingwhale/p/4678656.html js面向对象理解 ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP ...

  10. 面试官问:JS的继承

    原文作者若川,掘金链接:https://juejin.im/post/5c433e216fb9a049c15f841b 写于2019年2月20日,现在发到公众号声明原创,之前被<前端大全> ...

最新文章

  1. 权限表管理之获取用户权限表列表数据
  2. Python之max(num, key=lambda x:x[0])用法的详细解析
  3. error LNK2001: 无法解析的外部符号 __imp__Shell_NotifyIconA@8
  4. JAVA分析命令:jps、jstack、jmap、jhat
  5. Opencv--获取Mat图像数据的方式
  6. [BZOJ1477] 青蛙的约会|扩展欧几里得算法
  7. 调整SAP系统中物料账和财务账的期间
  8. 2016 ACM/ICPC 沈阳站 小结
  9. 【Java笔记】Java开发实战经典 - 第三章
  10. 如何计算某一天是星期几?—— 蔡勒(Zeller)公式
  11. VHDL-任意分频器(50%占空比)
  12. 单片机编程技术学习攻略
  13. python 公众号 关注者位置_微信公众号获取用户地理位置
  14. 职业能力倾向测试下什么软件,职业能力倾向测验
  15. python strip什么意思_python中strip什么意思
  16. 吉林大学老师蓝牙点名被赞“有创意”
  17. RDS认证辅导,所有RDS原料、辅料都有追溯性文件必须通过CU证书
  18. 安防视频监控流媒体服务器系统对网络带宽的要求
  19. 关于ftp操作中被动模式(Passive Mode)是什么意思?
  20. VMware环境部署vFW虚拟防火墙

热门文章

  1. Sutherland-Hodgeman多边形裁剪
  2. Report Service中报 RSClientController 未定义
  3. [分享]如何开机后直接进入桌面
  4. eclipse中将java项目变成web项目
  5. VEGAS Pro 18序列号 PC上最佳的入门级视频编辑软件
  6. iOS Expected unqualified-id 和 Unkown type name 'NSString'
  7. 小学生把自己学校的网站搞了!
  8. 拜托!你真会用线程池吗?
  9. 阿里大牛程序员的Java问题排查工具单
  10. 五轮面试,阿里offer到手!!