1原型式继承

简介:对类式继承的封装,过渡对象相当于子类。

  1. function inheritObject(o) {
  2. //声明过渡函数对象
  3. function F() {}
  4. //过渡对象的原型继承父类
  5. F.prototype = o;
  6. return new F();
  7. }
  8. //测试
  9. var book = {
  10. name : "javascript",
  11. book : ['js','css']
  12. };
  13. var newbook = inheritObject(book);
  14. newbook.name = "ajax";
  15. newbook.book.push("Node");
  16. var otherbook = inheritObject(book);
  17. otherbook.name = "xml";
  18. otherbook.book.push("React");
  19. console.log(newbook.name);//ajax
  20. console.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]
  21. console.log(otherbook.name);//xml
  22. console.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]
  23. console.log(book.name);//javascript
  24. console.log(book.book);//[ 'js', 'css', 'Node', 'React' ]

缺点:

和类式继承一样,父类对象的引用类型值被共用。

2.构造函数式继承

  1. function SuperClass(id) {
  2. this.book = ['javascript','html','css'];//引用类型共有属性
  3. this.id = id;//值类型公有属性
  4. }
  5. //父类声明原型方法
  6. SuperClass.prototype.showBooks = function() {
  7. console.log(this.books);
  8. }
  9. //声明子类
  10. function SubClass(id) {
  11. //继承父类
  12. SuperClass.call(this,id);
  13. }
  14. //测试
  15. var ins1 = new SubClass(1);
  16. var ins2 = new SubClass(2);
  17. ins1.book.push("Node");
  18. console.log(ins1.id);//1
  19. console.log(ins1.book);//['javascript', 'html', 'css', 'Node']
  20. console.log(ins2.id);//2
  21. console.log(ins2.book);//['javascript', 'html', 'css']
  22. ins1.showBooks();//TypeError: ins1.showBooks is not a function

3.组合式继承

  1. function SuperClass(name) {
  2. this.name = name;
  3. this.book = ['javascript','html','css'];
  4. }
  5. SuperClass.prototype.getName = function () {
  6. console.log(this.name);
  7. };
  8. function SubClass(name,time) {
  9. //构造函数式继承,继承父类name属性
  10. SuperClass.call(this,name);
  11. this.time = time;
  12. }
  13. //类式继承,子类原型继承
  14. SubClass.prototype = new SuperClass();
  15. //子类原型方法
  16. SubClass.prototype.getTime = function () {
  17. console.log(this.time);
  18. };
  19. //测试
  20. var ins1 = new SubClass('Node',2016);
  21. ins1.book.push("Node");
  22. console.log(ins1.book);
  23. ins1.getName();
  24. ins1.getTime();
  25. var ins2 = new SubClass('React',2015);
  26. console.log(ins2.book);
  27. ins2.getName();
  28. ins2.getTime();

4.原型式继承

  1. function inheritObject(o) {
  2. //声明过渡函数对象
  3. function F() {}
  4. //过渡对象的原型继承父类
  5. F.prototype = o;
  6. return new F();
  7. }
  8. //测试
  9. var book = {
  10. name : "javascript",
  11. book : ['js','css']
  12. };
  13. var newbook = inheritObject(book);
  14. newbook.name = "ajax";
  15. newbook.book.push("Node");
  16. var otherbook = inheritObject(book);
  17. otherbook.name = "xml";
  18. otherbook.book.push("React");
  19. console.log(newbook.name);//ajax
  20. console.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]
  21. console.log(otherbook.name);//xml
  22. console.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]
  23. console.log(book.name);//javascript
  24. console.log(book.book);//[ 'js', 'css', 'Node', 'React' ]

5.寄生式继承

  1. function inheritObject(o) {
  2. //声明过渡函数对象
  3. function F() {}
  4. //过渡对象的原型继承父类
  5. F.prototype = o;
  6. return new F();
  7. }
  8. //声明基对象
  9. var book = {
  10. name : "javascript",
  11. book : ['js','css']
  12. };
  13. function createBook(obj) {
  14. //通过原型继承方式创建新对象
  15. var o = new inheritObject(obj);
  16. //拓展新对象
  17. o.getName = function() {
  18. console.log(name);
  19. }
  20. //返回拓展后的新对象
  21. return o;
  22. }
  23. var newbook = createBook(book);
  24. newbook.name = "ajax";
  25. newbook.book.push("Node");
  26. var otherbook = createBook(book);
  27. otherbook.name = "xml";
  28. otherbook.book.push("React");
  29. console.log(newbook.name);//ajax
  30. console.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]
  31. console.log(otherbook.name);//xml
  32. console.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]
  33. console.log(book.name);//javascript
  34. console.log(book.book);//[ 'js', 'css', 'Node', 'React' ]

6.寄生组合式继承

  1. function inheritObject(o) {
  2. //声明过渡函数对象
  3. function F() {}
  4. //过渡对象的原型继承父类
  5. F.prototype = o;
  6. return new F();
  7. }
  8. //寄生式继承 继承原型
  9. function inheritPrototype(subClass,superClass) {
  10. //复制一份父类的原型副本保存在变量中
  11. var p = inheritObject(superClass.prototype);
  12. //修正因为重写子类原型导致子类的constructor属性被修改
  13. p.constructor = subClass;
  14. //设置子类的原型
  15. subClass.prototype = p;
  16. }
  17. function SuperClass(name) {
  18. this.name = name;
  19. this.colors = ["red","blue","green"];
  20. }
  21. //定义父类原型方法
  22. SuperClass.prototype.getName = function() {
  23. console.log(this.name);
  24. }
  25. function SubClass(name,time) {
  26. SuperClass.call(this,name);
  27. this.time = time;
  28. }
  29. //寄生式继承父类原型
  30. inheritPrototype(SubClass,SuperClass);
  31. //子类新增原型方法
  32. SubClass.prototype.getTime = function() {
  33. console.log(this.time);
  34. }
  35. //测试
  36. var ins1 = new SubClass("js",2014);
  37. var ins2 = new SubClass("css",2015);
  38. ins1.colors.push("black");
  39. console.log(ins1.colors);
  40. console.log(ins2.colors);
  41. ins2.getName();
  42. ins2.getTime();

javascript继承的6种方法的更多相关文章

  1. JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)

    JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...

  2. javascript继承的几种方法

    继承是面向对象编程中很重要的概念,在其它面向对象的语言中大都很简单,例如java中有关键词extends来实现 javascript语言在ES6也新增了extends关键词可以实现继承,用法与java ...

  3. Javascript 创建对象的三种方法及比较【转载+整理】

    https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain 本文内容 引 ...

  4. 在WebBrowser中执行javascript脚本的几种方法整理(execScript/InvokeScript/NavigateScript) 附完整源码

    [实例简介] 涵盖了几种常用的 webBrowser执行javascript的方法,详见示例截图以及代码 [实例截图] [核心代码] execScript方式: 1 2 3 4 5 6 7 8 9 1 ...

  5. js对象之间的"继承"的五种方法

    今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = & ...

  6. JavaScript数组的22种方法

    原文:http://www.cnblogs.com/xiaohuochai/p/5682621.html javascript中数组的22种方法   前面的话 数组总共有22种方法,本文将其分为对象继 ...

  7. JavaScript继承的几种实现

    0 什么是继承 继承就是获得存在对象已有的属性和方法的一种方式. [2019.4.26 更新]今日又重新学习了一下JS的继承,在这里整理一下以前的笔记并补充一些新的感悟. 1 JS中继承的几种实现方法 ...

  8. javascript继承的三种模式

    javascript继承一般有三种模式:组合继承,原型式继承和寄生式继承: 1组合继承:javascript最为广泛的继承方式通过原型链实现对原型属性和方法的继承,通过构造函数实现对实例属性的继承,同 ...

  9. js(javascript) 继承的5种实现方式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt240 js继承有5种实现方式:1.继承第一种方式:对象冒充  functio ...

随机推荐

  1. TabBar + TabBarView导航风格

    import 'package:flutter/material.dart'; import 'News.dart'; import 'Video.dart'; import 'Chat.dart'; ...

  2. 【BZOJ4031】小Z的房间

    Description 你突然有了一个大房子,房子里面有一些房间.事实上,你的房子可以看做是一个包含n*m个格子的格状矩形,每个格子是一个房间或者是一个柱子.在一开始的时候,相邻的格子之间都有墙隔着. ...

  3. spring boot 2整合mybatis

    mybatis-spring-boot-starter主要有两种解决方案,一种是使用注解,一种是使用XML. 参考这篇文章动手跑了一个例子,稍微不同之处,原文是spring boot,这里改成了spr ...

  4. LeetCode in action

    (1) Linked List: 2-add-two-numbers,2.cpp 19-remove-nth-node-from-end-of-list,TBD 21-merge-two-sorted ...

  5. Java 爬虫学习

    Java爬虫领域最强大的框架是JSoup:可直接解析具体的URL地址(即解析对应的HTML),提供了一套强大的API,包括可以通过DOM.CSS选择器,即类似jQuery方式来取出和操作数据.主要功能 ...

  6. java基础 (四)之集合

    List集合中的元素可以重复 ArrayList:数组,查询比较快 LinkedList:链表,常用于增删改效率高 Vector:线程安全,synchronized 线程安全的写法:Collectio ...

  7. Python语法注意点

    1. 在Python中定义函数,可以用必选参数.默认参数.可变参数.关键字参数和命名关键字参数,这5种参数都可以组合使用.但是请注意,参数定义的顺序必须是:必选参数.默认参数.可变参数.命名关键字参数 ...

  8. Linux下Java环境安装

    本节主要讲解Linux(Centos 6.5)下Java环境的安装 1. 卸载机器上默认安装的JDK 在Linux环境下一般会默认安装jdk,为了自己项目的开发部署,一般情况要重新装jdk,而且自己装 ...

  9. PV、PVC和Storeclass等官方内容翻译

    k8s1.13版本 PV apiVersion: v1 kind: PersistentVolume metadata: name: filesystem-pvc spec: capacity: #未 ...

  10. jmeter工具应用1

      1.Jmeter介绍 Apache JMeter 是Apache组织的开放源代码项目,是一个纯Java桌面应用,用于压力测试和性能测量.它最初被设计用于Web应用测试但后来扩展到其它测试领域. 操 ...