浅析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 相关文章推荐
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
原生js实现购物车功能
Sep 23 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 Javascript
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中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
python发送邮件接收邮件示例分享
2014/01/21 Python
全面了解python字符串和字典
2016/07/07 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
python unittest实现api自动化测试
2018/04/04 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
Python for i in range ()用法详解
2020/09/18 Python
tornado+celery的简单使用详解
2019/12/21 Python
python super函数使用方法详解
2020/02/14 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
Python 实现一个简单的web服务器
2021/01/03 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
质量工程师岗位职责
2013/11/16 职场文书
家长会欢迎标语
2014/06/24 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2015团员个人年度总结
2015/11/24 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python