浅析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中void(0)的具体含义解释
Feb 27 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
iframe实用操作锦集
Apr 22 Javascript
浅谈javascript回调函数
Dec 07 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
vue环境搭建简单教程
Nov 07 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
vue 出现data-v-xxx的原因及解决
Aug 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
给初学PHP的5个入手程序
2006/11/23 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
python中readline判断文件读取结束的方法
2014/11/08 Python
python中异常报错处理方法汇总
2016/11/20 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
详解Django配置优化方法
2019/11/18 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
Python 日期与时间转换的方法
2020/08/01 Python
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
linux面试相关问题
2012/08/11 面试题
感恩寄语大全
2014/04/11 职场文书
节能环保标语
2014/06/12 职场文书