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 相关文章推荐
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
jquery JSON的解析方式
2009/07/25 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
Python文件及目录操作实例详解
2015/06/04 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
Python实现分段线性插值
2018/12/17 Python
python实现串口通信的示例代码
2020/02/10 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
深入探究HTML5的History API
2015/07/09 HTML / CSS
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
给老师的一封建议书
2014/03/13 职场文书
公证委托书模板
2014/04/03 职场文书
实习生岗位职责
2014/04/12 职场文书
房屋产权证明书
2015/06/19 职场文书
JS的深浅复制详细
2021/10/16 Javascript
vue中 this.$set的使用详解
2021/11/17 Vue.js
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript