浅析JS原型继承与类的继承


Posted in Javascript onApril 07, 2016

我们先看JS类的继承

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
    <title>JS类的继承</title>
</head>

<body>
  /* -- 类式继承 -- */
  <script type="text/javascript">
  //先声明一个超类
  var Animal = function(name) {
      this.name = name;
    }
    //给这个超类的原型对象上添加方法
  Animal.prototype.Eat = function() {
    console.log(this.name + " Eat");
  };
  //实例化这个超
  var a = new Animal("Animal");

  //再创建构造函数对象类
  var Cat = function(name, sex) {
      //这个类中要调用超类Animal的构造函数,并将参数name传给它
      Animal.call(this, name);
      this.sex = sex;
    }
    //这个子类的原型对象等于超类的实例
  Cat.prototype = new Animal();
  //因为子类的原型对象等于超类的实例,所以prototype.constructor这个方法也等于超类构造函数

  console.log(Cat.prototype.constructor);
  //这个是Animal超类的引用,所以要从新赋值为自己本身
  Cat.prototype.constructor = Cat;
  console.log(Cat.prototype.constructor);
  //子类本身添加了getSex 方法
  Cat.prototype.getSex = function() {
      return this.sex;
    }
    //实例化这个子类
  var _m = new Cat('cat', 'male');
  //自身的方法
  console.log(_m.getSex()); //male
  //继承超类的方法
  console.log(_m.Eat()); //cat
  </script>
</body>

</html>

 我们再看JS原型继承

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>JS原型继承</title>
</head>

<body>
  <!--原型继承-->
  <script type="text/javascript">
  //clone()函数用来创建新的类Person对象
  var clone = function(obj) {
    var _f = function() {};
    //这句是原型式继承最核心的地方,函数的原型对象为对象字面量
    _f.prototype = obj;
    return new _f;
  }

  //先声明一个对象字面量
  var Animal = {
      somthing: 'apple',
      eat: function() {
        console.log("eat " + this.somthing);
      }
    }
    //不需要定义一个Person的子类,只要执行一次克隆即可
  var Cat = clone(Animal);
  //可以直接获得Person提供的默认值,也可以添加或者修改属性和方法
  console.log(Cat.eat());
  Cat.somthing = 'orange';
  console.log(Cat.eat());

  //声明子类,执行一次克隆即可
  var Someone = clone(Cat);
  </script>
</body>

</html>

我们可以试验一下,JS类的继承 children.constructor==father 返回的是true,而原型继承children.constructor==father 返回的是false;

以上这篇浅析JS原型继承与类的继承就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现简单的表单验证
Nov 17 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
react组件基本用法示例小结
Apr 27 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
AngularJs 弹出模态框(model)
Apr 07 #Javascript
详解AngularJS 模态对话框
Apr 07 #Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 #Javascript
jQuery动态添加
Apr 07 #Javascript
javascript模块化简单解析
Apr 07 #Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 #Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 #Javascript
You might like
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
JavaScript 代码压缩工具小结
2012/02/27 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
React优化子组件render的使用
2019/05/12 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
pytyon 带有重复的全排列
2013/08/13 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
python随机生成库faker库api实例详解
2019/11/28 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
python绘制汉诺塔
2021/03/01 Python
20年同学聚会邀请函
2014/02/04 职场文书
小学生元旦感言
2014/02/26 职场文书
人事专员岗位说明书
2014/07/29 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
求职简历自我评价2015
2015/03/10 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL