浅析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+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
AngularJS Module方法详解
Dec 08 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
详解javascript实现瀑布流列式布局
Jan 29 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
PHP+ajax 无刷新删除数据
2010/02/20 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
python将字符串转换成json的方法小结
2019/07/09 Python
python config文件的读写操作示例
2019/09/27 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
教师辞职报告范文
2014/01/20 职场文书
网站创业计划书
2014/04/30 职场文书
军人离婚协议书样本
2014/10/21 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
你需要掌握的20个Python常用技巧
2022/02/28 Python