JS伪继承prototype实现方法示例


Posted in Javascript onJune 20, 2018

本文实例讲述了JS伪继承prototype实现方法。分享给大家供大家参考,具体如下:

众所周知JS中没有类的概念,但是要想实现类的功能可以同过function模拟。如:

第一种继承 (属性继承)

//该函数相当于是一个构造器,也是一个伪类
  function Fn(){
    this.a = 4;
    this.b = 5;
    this.log = function(){
      console.log(this.a,this.b);
    }
  }
  function Fn1(){
    Fn.call(this);//调用父类的构造函数
  }
  Fn1.prototype = Fn.prototype;
  var fn = new Fn();
  var fn1 = new Fn1();
  //由此可见Fn1 是fn1的子类。
  fn1 instanceof Fn; // true
  fn instanceof Fn1; // true
  fn.a = 5;
  //由此可见Fn1 继承了 Fn得所有属性和方法
  //而是是复制了一份Fn的属性和方法,并不是对象的引用。
  console.log(fn.a); // 5
  console.log(fn1.a); // 4
  this.log(); // 4 5

总结: 这种继承,是重新拷贝一份放入内存中,他们的值互相独立,修改一个不会改变另一个。

第二种继承 原型继承(prototype)

function Fn(){}
  Fn.prototype.data = {
    name: 'zhangsan'
  }
  Fn.prototype.getName = function(){
    return this.data.name;
  }
  function Fn1(){}
  //原型链继承
  Fn1.prototype = Fn.prototype;
  var fn = new Fn();
  var fn1 = new Fn1();
  //所用Fn1 继承了 Fn
  fn1 instanceof Fn;//true
  console.log(fn1.getName()); // zhangsan
  console.log(fn.getName()); // zhangsan
  //修改了fn的name属性值
  fn.data.name = 'lisi';
  // 由此我们可看出 原型链继承 是 引用继承
  //不会重新拷贝一份变量。就像对象的引用一样。
  console.log(fn.getName()); // lisi
  console.log(fn1.getName()); // lisi

两种类的写法造成示例的区别

//第一种
  function Fn(){
    this.a = 4;
    this.b = 5;
    this.log = function(){
      console.log(this.a,this.b);
    }
  }
  var fn1 = new Fn();
  var fn2 = new Fn();
  fn1.a = 1;
  //由此可以看出两个对象互不影响
  //说明每个对象里都存在一份a和b
  fn1.log(); // 1 5
  fn2.log(); // 4 5
  //第二种
  function Fn(){}
  fn.prototype.name = 'zhangsan';
  fn.prototype.data = {
    a: 4,
    b: 5
  }
  fn.prototype.log = function(){
    console.log(this.data.a,this.data.b);
  }
  var fn1 = new Fn();
  var fn2 = new Fn();
  fn1.a = 1;
  //由此可见就算是不同的示例他们他们所指向的值是同一个。
  fn1.log();//1 5
  fn2.log();//1 5
  fn2.name = 'lisi';
  //这里fn1.name并没有被修改
  console.log(fn1.name); //zhangan
  console.log(fn2.name); // lisi

总结

类中直接this. 出来的属性和方法都会直接复制一份给子类或者实例对象。个子类或实例对象之间互不影响。

使用prototype增加的属性和方法,对象类型的只有一份,值类型的这会被复制。

收获

由于函数都是通用的,所以比较上面两种方法,第二种明显比第一种性能要好的多,因为避免了没有必要的复制,肯定会比较节省内存。所以以后写类的时候,尽量使用第二种方式。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
vue.js学习之递归组件
Dec 13 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
js中创建对象的几种方式
Feb 05 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
浅析Vue 生命周期
Jun 21 Javascript
react MPA 多页配置详解
Oct 18 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 #jQuery
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 #Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 #Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 #Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 #Javascript
vue异步加载高德地图的实现
Jun 19 #Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 #Javascript
You might like
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
php字符串操作常见问题小结
2016/10/11 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
python实现解数独程序代码
2017/04/12 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
机械设计及其自动化专业推荐信
2013/10/31 职场文书
国际贸易专业推荐信
2013/11/15 职场文书
导游个人求职信范文
2014/03/23 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
家长通知书家长意见
2014/12/30 职场文书
学年个人总结范文
2015/03/05 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
python数字类型和占位符详情
2022/03/13 Python
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫