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 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
javascript常用方法总结
2015/05/14 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
Python的动态重新封装的教程
2015/04/11 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
python之mock模块基本使用方法详解
2019/06/27 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
Java程序员面试题
2016/09/27 面试题
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
培训协议书范本
2014/04/22 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
优秀员工演讲稿
2014/05/19 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
事业单位岗位说明书
2015/10/08 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
vue中data里面的数据相互使用方式
2022/06/05 Vue.js