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 进度条 实现代码
Jul 30 Javascript
Date对象格式化函数代码
Jul 17 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
详解React 条件渲染
Jul 08 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 Javascript
基于openlayers实现角度测量功能
Sep 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
php输出xml格式字符串(用的这个)
2012/07/12 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
prototype 学习笔记整理
2009/07/17 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
Python常用算法学习基础教程
2017/04/13 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
顶岗实习计划书
2014/01/10 职场文书
大学生求职自我评价
2014/01/16 职场文书
采购部年度工作总结
2015/08/13 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js