浅析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 相关文章推荐
奇妙的js
Sep 24 Javascript
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
JavaScript数组及常见操作方法小结
Nov 13 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 smarty模版引擎中的缓存应用
2009/12/02 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
javascript时区函数介绍
2012/09/14 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
React组件的三种写法总结
2017/01/12 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
python人人网登录应用实例
2014/09/26 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
Python代码注释规范代码实例解析
2020/08/14 Python
Python字符串及文本模式方法详解
2020/09/10 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
介绍Java的内部类
2012/10/27 面试题
计算机科学与技术应届生求职信
2013/11/07 职场文书
《春笋》教学反思
2014/04/15 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
民事调解书范文
2015/05/20 职场文书
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技