今天即兴研究了下JS,查阅了相关资料 ,发现Js中没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承。下面大概介绍一下Js中五种继承模式!

1、构造函数绑定:使用apply或是call

  1. function Animal() {
  2. this.species = "动物";
  3. }
  4.  
  5. function Cat(name, color) {
  6. //Animal.apply(this, arguments);
  7. //Animal.call(this);
  8. this.color = color;
  9. this.name = name;
  10. }
  11.  
  12. var cat1 = new Cat("cat1", "white");
  13. alert(cat1.species);

 2、prototype模式

  1.     Cat.prototype = new Animal();
  2. //任何一个prototype对象都有一个constructor属性,指向它的构造函数.
  3. Cat.prototype.constructor = Cat;
  4. var cat1 = new Cat("大毛", "黄色");
  5. alert(cat1.species); // 动物
  6.  
  7. //直接继承prototype 优点是效率比较高(不用执行和建立Animal的实例了),比较省内存。缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对
         Cat.prototype的修改,都会反映到Animal.prototype
  8. function Animal() { }
  9. Animal.prototype.species = "动物";
  10. Cat.prototype = Animal.prototype;
  11. Cat.prototype.constructor = Cat;

3、利用空对象作为中介  F是空对象,所以几乎不占内存。这时,修改Cat的prototype对象,就不会影响到Animal的prototype对象。

  1. var F = function () { };
  2. F.prototype = Animal.prototype;
  3. Cat.prototype = new F();
  4. Cat.prototype.constructor = Cat;
  5.  
  6. //对上面封装
  7. function extend(Child, Parent) {
  8. var F = function () { };
  9. F.prototype = Parent.prototype;
  10. Child.prototype = new F();
  11. Child.prototype.constructor = Child;
  12. Child.uber = Parent.prototype; //可以直接调用父对象的方法
  13. }
  14.  
  15. extend(Cat, Animal);
  16. var cat1 = new Cat("大毛", "黄色");
  17. alert(cat1.species); // 动物

4、拷贝继承

  1. function extend2(Child, Parent) {
  2. var p = Parent.prototype;
  3. var c = Child.prototype;
  4. for (var i in p) {
  5. c[i] = p[i];
  6. }
  7. c.uber = p;
  8. }

5、 原型式继承

  1. //clone()函数用来创建新的类Person对象
  2. var clone = function (obj) {
  3. var _f = function () {
  4. };
  5. //这句是原型式继承最核心的地方,函数的原型对象为对象字面量
  6. _f.prototype = obj;
  7. return new _f;
  8. };
  9. //先声明一个对象字面量
  10.  
  11. var Person = {
  12. name: 'Darren',
  13. getName: function () {
  14. return this.name;
  15. }
  16. };
  17. //不需要定义一个Person的子类,只要执行一次克隆即可
  18. var Programmer = clone(Person);
  19. //可以直接获得Person提供的默认值,也可以添加或者修改属性和方法
  20. alert(Programmer.getName());
  21. Programmer.name = 'Darren2';
  22. alert(Programmer.getName());
  23. //声明子类,执行一次克隆即可
  24. var Someone = clone(Programmer);

初步接触Javascript感觉挺简单,可是当我慢慢的深入其中,发现Javascript其实也是一门很复杂的语言!只有慢慢的深入了!

JavaScript中实现继承的更多相关文章

  1. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  2. 浅谈JavaScript中的继承

    引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...

  3. JavaScript中的继承(原型链)

    一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.pro ...

  4. 彻底搞懂JavaScript中的继承

    你应该知道,JavaScript是一门基于原型链的语言,而我们今天的主题 -- "继承"就和"原型链"这一概念息息相关.甚至可以说,所谓的"原型链&q ...

  5. 浅谈 JavaScript 中的继承模式

    最近在读一本设计模式的书,书中的开头部分就讲了一下 JavaScript 中的继承,阅读之后写下了这篇博客作为笔记.毕竟好记性不如烂笔头. JavaScript 是一门面向对象的语言,但是 ES6 之 ...

  6. 关于JavaScript中实现继承,及prototype属性

    感谢Mozilla 让我弄懂继承. JavaScript有八种基本类型,函数属于object.所以所有函数都继承自object.//扩展:对象,基本上 JavaScript 里的任何东西都是对象,而且 ...

  7. javascript中各种继承方式的优缺点

    javascript中实现继承的方式有很多种,一般都是通过原型链和构造函数来实现.下面对各种实现方式进行分析,总结各自的优缺点. 一 原型继承 let Super = functioin(name = ...

  8. javascript中实现继承的几种方式

    javascript中实现继承的几种方式 1.借用构造函数实现继承 function Parent1(){ this.name = "parent1" } function Chi ...

  9. 深入理解JavaScript中的继承

    1前言 继承是JavaScript中的重要概念,可以说要学好JavaScript,必须搞清楚JavaScript中的继承.我最开始是通过看视频听培训班的老师讲解的JavaScript中的继承,当时看的 ...

  10. javascript 中的继承实现, call,apply,prototype,构造函数

    javascript中继承可以通过call.apply.protoperty实现 1.call call的含义: foo.call(thisObject, args...) 表示函数foo调用的时候, ...

随机推荐

  1. Word Pattern - LeetCode

    Given a pattern and a string str, find if str follows the same pattern. Here follow means a full mat ...

  2. Vuex 通俗版教程

    作者 Yeaseon 已关注 2017.03.16 16:44* 字数 1245 阅读 243评论 2喜欢 4 本文基本上是官方教程的盗版,用通俗易懂的文字讲解Vuex,也对原文内容有删减. 如果你对 ...

  3. 泽熙学到的 z

    叶展,原泽熙投资总经理助理,现任齐鲁证券资产管理公司总裁助理,齐鲁星空.星汉等集合理财投资经理. 导读:三年前,我加入了泽熙投资,正式成为一名职业投资者.做职业投资者一直是我的理想.在股市中用眼光和头 ...

  4. 让arclist标签也支持currentstyle属性 完美解决

    1.查找到: $channelid = $ctag->GetAtt('channelid'); 在下面插入:$currentstyle = $ctag->GetAtt('currentst ...

  5. OpenSceneGraph 3.2 版本修改点

    OpenSceneGraph-3.2.0稳定版本发布了,改善了对iOS.Android的支持,支持OpenGL的更多新特性.可以通过 下载版块来进行下载. OpenSceneGraph 3.2 发布. ...

  6. 【dubbo】服务提供者运行的三种方式

    [dubbo]服务提供者运行的三种方式 学习了:https://blog.csdn.net/yxwb1253587469/article/details/78712451 1,使用容器: 2,使用自建 ...

  7. Kali Linux 2.0安装光盘分享

    Kali Linux 2.0安装光盘分享 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I ...

  8. linux挂载硬盘

    最近有个生产机由于缓存问题,硬盘不太够用,所以就加载了一块硬盘,下面把挂载硬盘的过程记录下,供大家参考,有问题欢迎留言! fdisk –l ------------------------------ ...

  9. Odoo11 新功能 : 栏位隐藏

        Odoo11增加了一个 新的 modifier-. 先上 前端框架代码     invisible / readonly / required 这几个 是经常在用的, column_invis ...

  10. SPA路由机制详解(看不懂不要钱~~)

    前言 总所周知,随着前端应用的业务功能起来越复杂,用户对于使用体验的要求越来越高,单面(SPA)成为前端应用的主流形式.而大型单页应用最显著特点之一就是采用的前端路由跳转子页面系统,通过改变页面的UR ...