浅析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 相关文章推荐
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
微信小程序实现点击效果
Jun 21 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正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
PHP数组实例总结与说明
2011/08/23 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
浅析Python3 pip换源问题
2020/01/06 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
办公文员的工作岗位职责
2013/11/12 职场文书
自主招生自荐信
2013/12/08 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
超市食品安全承诺书
2015/04/29 职场文书