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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
js运动事件函数详解
Oct 21 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
webpack4的迁移的使用方法
May 25 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
js中Object.create实例用法详解
Oct 05 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
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
javascript的事件描述
2006/09/08 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
JavaScript Split()方法
2015/12/18 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
原生js二级联动效果
2017/06/20 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
js实现简单扫雷
2020/11/27 Javascript
python中__call__方法示例分析
2014/10/11 Python
python获取标准北京时间的方法
2015/03/24 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
linux 下selenium chrome使用详解
2020/04/02 Python
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
房地产销售计划书
2014/01/10 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
优秀团员自我评价
2015/03/10 职场文书
二胎满月酒致辞
2015/07/29 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL