浅析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 相关文章推荐
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
js解决movebox移动问题
Mar 29 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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的十大要点(上)
2009/02/04 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
详解Python的Django框架中的通用视图
2015/05/04 Python
Python中字符串的修改及传参详解
2016/11/30 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
python如何运行js语句
2020/09/09 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
python安装sklearn模块的方法详解
2020/11/28 Python
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
四年大学自我鉴定
2014/02/17 职场文书
在校实习生求职信
2014/06/18 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
失职检讨书大全
2015/01/26 职场文书
面试通知单大全
2015/04/20 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书