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 /*通用的父模板*/ 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 面向对象 继承相关推荐
- JS面向对象的程序设计之继承-继承的实现-借用构造函数
JS面向对象的程序设计之继承-继承的实现-借用构造函数 前言:最近在细读Javascript高级程序设计,对于我而言,中文版,书中很多地方翻译的差强人意,所以用自己所理解的,尝试解读下.如有纰漏或错误 ...
- 捋一捋js面向对象的继承问题
说到面向对象这个破玩意,曾经一度我都处于很懵逼的状态,那么面向对象究竟是什么呢?其实说白了,所谓面向对象,就是基于类这个概念,来实现封装.继承和多态的一种编程思想罢了.今天我们就来说一下这其中继承的问 ...
- JS 面向对象编程、原型链、原型继承(个人学习总结)
一.面向对象 1. 面向对象 是所有语言 都有的一种编程思想,组织代码的一种形式 基于对象的语言:JS语言 面向对象的语言:c++ java c# 2. 面向对象 3大特征 封装:将重用代码封装到函数 ...
- JavaScript(JS) 面向对象(封装、继承、多态)
面向对象是把事物给对象化,包括其属性和行为.面向对象编程更贴近实际生活的思想.可以简单的理解面向对象的底层还是面向过程,面向过程抽象成类,然后封装,方便使用就是面向对象.本文主要介绍JavaScrip ...
- Js Call方法详解(js 的继承)
call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN ...
- JS面向对象一:MVC的面向对象封装
JS面向对象一:MVC的面向对象封装 MDNjavascript面向对象 面向对象(Object-Oriented) 面向对象里面向的意思是以...为主,面向对象编程既以对象为主的编程. 面向对象的一 ...
- 简单粗暴地理解js原型链–js面向对象编程
简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...
- js中继承的几种用法总结(apply,call,prototype)
本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承 js中有三种继承方式 1.js原型(proto ...
- 对js面向对象的理解
转自:http://www.cnblogs.com/jingwhale/p/4678656.html js面向对象理解 ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP ...
- 面试官问:JS的继承
原文作者若川,掘金链接:https://juejin.im/post/5c433e216fb9a049c15f841b 写于2019年2月20日,现在发到公众号声明原创,之前被<前端大全> ...
最新文章
- 权限表管理之获取用户权限表列表数据
- Python之max(num, key=lambda x:x[0])用法的详细解析
- error LNK2001: 无法解析的外部符号 __imp__Shell_NotifyIconA@8
- JAVA分析命令:jps、jstack、jmap、jhat
- Opencv--获取Mat图像数据的方式
- [BZOJ1477] 青蛙的约会|扩展欧几里得算法
- 调整SAP系统中物料账和财务账的期间
- 2016 ACM/ICPC 沈阳站 小结
- 【Java笔记】Java开发实战经典 - 第三章
- 如何计算某一天是星期几?—— 蔡勒(Zeller)公式
- VHDL-任意分频器(50%占空比)
- 单片机编程技术学习攻略
- python 公众号 关注者位置_微信公众号获取用户地理位置
- 职业能力倾向测试下什么软件,职业能力倾向测验
- python strip什么意思_python中strip什么意思
- 吉林大学老师蓝牙点名被赞“有创意”
- RDS认证辅导,所有RDS原料、辅料都有追溯性文件必须通过CU证书
- 安防视频监控流媒体服务器系统对网络带宽的要求
- 关于ftp操作中被动模式(Passive Mode)是什么意思?
- VMware环境部署vFW虚拟防火墙