javascript继承的6种方法
1原型式继承
简介:对类式继承的封装,过渡对象相当于子类。
- function inheritObject(o) {
- //声明过渡函数对象
- function F() {}
- //过渡对象的原型继承父类
- F.prototype = o;
- return new F();
- }
- //测试
- var book = {
- name : "javascript",
- book : ['js','css']
- };
- var newbook = inheritObject(book);
- newbook.name = "ajax";
- newbook.book.push("Node");
- var otherbook = inheritObject(book);
- otherbook.name = "xml";
- otherbook.book.push("React");
- console.log(newbook.name);//ajax
- console.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]
- console.log(otherbook.name);//xml
- console.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]
- console.log(book.name);//javascript
- console.log(book.book);//[ 'js', 'css', 'Node', 'React' ]
缺点:
和类式继承一样,父类对象的引用类型值被共用。
2.构造函数式继承
- function SuperClass(id) {
- this.book = ['javascript','html','css'];//引用类型共有属性
- this.id = id;//值类型公有属性
- }
- //父类声明原型方法
- SuperClass.prototype.showBooks = function() {
- console.log(this.books);
- }
- //声明子类
- function SubClass(id) {
- //继承父类
- SuperClass.call(this,id);
- }
- //测试
- var ins1 = new SubClass(1);
- var ins2 = new SubClass(2);
- ins1.book.push("Node");
- console.log(ins1.id);//1
- console.log(ins1.book);//['javascript', 'html', 'css', 'Node']
- console.log(ins2.id);//2
- console.log(ins2.book);//['javascript', 'html', 'css']
- ins1.showBooks();//TypeError: ins1.showBooks is not a function
3.组合式继承
- function SuperClass(name) {
- this.name = name;
- this.book = ['javascript','html','css'];
- }
- SuperClass.prototype.getName = function () {
- console.log(this.name);
- };
- function SubClass(name,time) {
- //构造函数式继承,继承父类name属性
- SuperClass.call(this,name);
- this.time = time;
- }
- //类式继承,子类原型继承
- SubClass.prototype = new SuperClass();
- //子类原型方法
- SubClass.prototype.getTime = function () {
- console.log(this.time);
- };
- //测试
- var ins1 = new SubClass('Node',2016);
- ins1.book.push("Node");
- console.log(ins1.book);
- ins1.getName();
- ins1.getTime();
- var ins2 = new SubClass('React',2015);
- console.log(ins2.book);
- ins2.getName();
- ins2.getTime();
4.原型式继承
- function inheritObject(o) {
- //声明过渡函数对象
- function F() {}
- //过渡对象的原型继承父类
- F.prototype = o;
- return new F();
- }
- //测试
- var book = {
- name : "javascript",
- book : ['js','css']
- };
- var newbook = inheritObject(book);
- newbook.name = "ajax";
- newbook.book.push("Node");
- var otherbook = inheritObject(book);
- otherbook.name = "xml";
- otherbook.book.push("React");
- console.log(newbook.name);//ajax
- console.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]
- console.log(otherbook.name);//xml
- console.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]
- console.log(book.name);//javascript
- console.log(book.book);//[ 'js', 'css', 'Node', 'React' ]
5.寄生式继承
- function inheritObject(o) {
- //声明过渡函数对象
- function F() {}
- //过渡对象的原型继承父类
- F.prototype = o;
- return new F();
- }
- //声明基对象
- var book = {
- name : "javascript",
- book : ['js','css']
- };
- function createBook(obj) {
- //通过原型继承方式创建新对象
- var o = new inheritObject(obj);
- //拓展新对象
- o.getName = function() {
- console.log(name);
- }
- //返回拓展后的新对象
- return o;
- }
- var newbook = createBook(book);
- newbook.name = "ajax";
- newbook.book.push("Node");
- var otherbook = createBook(book);
- otherbook.name = "xml";
- otherbook.book.push("React");
- console.log(newbook.name);//ajax
- console.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]
- console.log(otherbook.name);//xml
- console.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]
- console.log(book.name);//javascript
- console.log(book.book);//[ 'js', 'css', 'Node', 'React' ]
6.寄生组合式继承
- function inheritObject(o) {
- //声明过渡函数对象
- function F() {}
- //过渡对象的原型继承父类
- F.prototype = o;
- return new F();
- }
- //寄生式继承 继承原型
- function inheritPrototype(subClass,superClass) {
- //复制一份父类的原型副本保存在变量中
- var p = inheritObject(superClass.prototype);
- //修正因为重写子类原型导致子类的constructor属性被修改
- p.constructor = subClass;
- //设置子类的原型
- subClass.prototype = p;
- }
- function SuperClass(name) {
- this.name = name;
- this.colors = ["red","blue","green"];
- }
- //定义父类原型方法
- SuperClass.prototype.getName = function() {
- console.log(this.name);
- }
- function SubClass(name,time) {
- SuperClass.call(this,name);
- this.time = time;
- }
- //寄生式继承父类原型
- inheritPrototype(SubClass,SuperClass);
- //子类新增原型方法
- SubClass.prototype.getTime = function() {
- console.log(this.time);
- }
- //测试
- var ins1 = new SubClass("js",2014);
- var ins2 = new SubClass("css",2015);
- ins1.colors.push("black");
- console.log(ins1.colors);
- console.log(ins2.colors);
- ins2.getName();
- ins2.getTime();
javascript继承的6种方法的更多相关文章
- JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)
JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...
- javascript继承的几种方法
继承是面向对象编程中很重要的概念,在其它面向对象的语言中大都很简单,例如java中有关键词extends来实现 javascript语言在ES6也新增了extends关键词可以实现继承,用法与java ...
- Javascript 创建对象的三种方法及比较【转载+整理】
https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain 本文内容 引 ...
- 在WebBrowser中执行javascript脚本的几种方法整理(execScript/InvokeScript/NavigateScript) 附完整源码
[实例简介] 涵盖了几种常用的 webBrowser执行javascript的方法,详见示例截图以及代码 [实例截图] [核心代码] execScript方式: 1 2 3 4 5 6 7 8 9 1 ...
- js对象之间的"继承"的五种方法
今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = & ...
- JavaScript数组的22种方法
原文:http://www.cnblogs.com/xiaohuochai/p/5682621.html javascript中数组的22种方法 前面的话 数组总共有22种方法,本文将其分为对象继 ...
- JavaScript继承的几种实现
0 什么是继承 继承就是获得存在对象已有的属性和方法的一种方式. [2019.4.26 更新]今日又重新学习了一下JS的继承,在这里整理一下以前的笔记并补充一些新的感悟. 1 JS中继承的几种实现方法 ...
- javascript继承的三种模式
javascript继承一般有三种模式:组合继承,原型式继承和寄生式继承: 1组合继承:javascript最为广泛的继承方式通过原型链实现对原型属性和方法的继承,通过构造函数实现对实例属性的继承,同 ...
- js(javascript) 继承的5种实现方式
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt240 js继承有5种实现方式:1.继承第一种方式:对象冒充 functio ...
随机推荐
- TabBar + TabBarView导航风格
import 'package:flutter/material.dart'; import 'News.dart'; import 'Video.dart'; import 'Chat.dart'; ...
- 【BZOJ4031】小Z的房间
Description 你突然有了一个大房子,房子里面有一些房间.事实上,你的房子可以看做是一个包含n*m个格子的格状矩形,每个格子是一个房间或者是一个柱子.在一开始的时候,相邻的格子之间都有墙隔着. ...
- spring boot 2整合mybatis
mybatis-spring-boot-starter主要有两种解决方案,一种是使用注解,一种是使用XML. 参考这篇文章动手跑了一个例子,稍微不同之处,原文是spring boot,这里改成了spr ...
- 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 ...
- Java 爬虫学习
Java爬虫领域最强大的框架是JSoup:可直接解析具体的URL地址(即解析对应的HTML),提供了一套强大的API,包括可以通过DOM.CSS选择器,即类似jQuery方式来取出和操作数据.主要功能 ...
- java基础 (四)之集合
List集合中的元素可以重复 ArrayList:数组,查询比较快 LinkedList:链表,常用于增删改效率高 Vector:线程安全,synchronized 线程安全的写法:Collectio ...
- Python语法注意点
1. 在Python中定义函数,可以用必选参数.默认参数.可变参数.关键字参数和命名关键字参数,这5种参数都可以组合使用.但是请注意,参数定义的顺序必须是:必选参数.默认参数.可变参数.命名关键字参数 ...
- Linux下Java环境安装
本节主要讲解Linux(Centos 6.5)下Java环境的安装 1. 卸载机器上默认安装的JDK 在Linux环境下一般会默认安装jdk,为了自己项目的开发部署,一般情况要重新装jdk,而且自己装 ...
- PV、PVC和Storeclass等官方内容翻译
k8s1.13版本 PV apiVersion: v1 kind: PersistentVolume metadata: name: filesystem-pvc spec: capacity: #未 ...
- jmeter工具应用1
1.Jmeter介绍 Apache JMeter 是Apache组织的开放源代码项目,是一个纯Java桌面应用,用于压力测试和性能测量.它最初被设计用于Web应用测试但后来扩展到其它测试领域. 操 ...