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 相关文章推荐
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
通过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
php实现singleton()单例模式实例
2014/11/06 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
javascript 写类方式之九
2009/07/05 Javascript
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
如何基于python实现脚本加密
2019/12/28 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
Python实现疫情地图可视化
2021/02/05 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
社区端午节活动方案
2014/01/28 职场文书
室内拓展活动方案
2014/02/13 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
社区党务公开实施方案
2014/03/18 职场文书
培训督导岗位职责
2015/04/10 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python