浅析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如何判断输入的url是否正确
Apr 11 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
DWR中各种java方法的调用
May 04 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
JS监听Esc 键触发事键
Apr 14 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
mysql 全文搜索 技巧
2007/04/27 PHP
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
javascript删除option选项的多种方法总结
2013/11/22 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
express框架下使用session的方法
2019/07/31 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
简单解决Python文件中文编码问题
2015/11/22 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
python实现kMeans算法
2017/12/21 Python
Python 忽略warning的输出方法
2018/10/18 Python
python配置文件写入过程详解
2019/10/19 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
详解python内置模块urllib
2020/09/09 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
电气自动化专业职业规划范文
2014/02/16 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
马智宇结婚主持词
2014/04/01 职场文书
公务员个人考察材料
2014/12/23 职场文书