JS中的多种继承方式(包含ES6)

本文探讨了JavaScript中的继承机制,包括原型继承、call继承和寄生组合式继承,对比了与JAVA继承及方法重载的区别。在JS中,原型链允许多继承,但不存在方法重载。ES6引入的`extends`关键字提供了新的类继承方式,需在子类构造函数中调用`super()`。
  • 为了让有JAVA基础的小伙伴更直观的看到区别简单描述一下JS中的继承、方法重载跟JAVA中的继承、方法重载区别
  • JS继承:

js中的继承有多种方式,大体上就是两种,一种是基于原型链覆盖的形式、一种是对象冒充也就是通过改变this指向。支持多继承,通过原型链可以一直往上找。

  • JAVA继承:

java中的继承是一个类继承了父类以后,它就不能再继承别的类,只支持单继承。但是java中存在接口,接口从本质上来说可以更好的代替继承,可以把需要的方法定义在接口中,让具体的类实现接口中的功能。

  • JS重载:

js中不存在重载,相同名字的函数由于js底层原理(变量提升)会导致相同名字的函数覆盖。

  • JAVA重载:

java中重载是可以定义相同名字的接口(方法)参数不同、参数个数不同、返回值不同实现不同的功能。

  • JS第一种继承方案:原型继承(子类原型=父类的实例)
function Parent(){
	this.x = 100;
}
Parent.prototype.getX = function getX(){
	return this.x;
}
function Child(){
	this.y = 200;
}
//原型继承 Child通过原型链可以找到Parent中的私有属性和Parent.prototype中的公有属性
Child.prototype = new Parent;
Child.prototype.getY = function getY(){
	return this.y;
}
var child1 = new Child;

原型继承

原型继承特点:
1.父类中私有和公有的属性方法,最后都变为子类实例公有的;
2.和其它语言不同的是,原型继承并不会把父类的属性方法 copy给子类,而是让子类实例基于__proto__原型链上找到自己定义的属性和方法“指向/查找”方式的;
3.修改子类原型中的内容,内容修改后,对子类的其他实例有影响,但是对父类的实例不会有影响。直接修改父类的原型,不仅影响父类的实例,也会影响子类的实例。

  • JS第二种继承方案,call继承:
function Parent(){
	this.x = 100;
}
Parent.prototype.getX = function getX(){
	return this.x;
}
function Child(){
	//在子类构造函数中,把父类当做普通方法执行(没有父类实例,父类原型上的公共属性方法就和它没关系了)"拷贝式"
	Parent.call(this);
	this.y = 200;
}
Child.prototype.getY = function getY(){
	return this.y;
}
var child1 = new Child;

特点:
call继承,只能继承父类中私有的,不能继承父类中共有的

  • JS第三种继承方案,寄生组合式继承(call继承 + 另类原型继承):
function Parent(){
	this.x = 100;
}
Parent.prototype.getX = function getX(){
	return this.x;
}
function Child(){
	Parent.call(this);
	this.y = 200;
}
//IE浏览器下不支持操作__proto__
//Child.prototype.__proto__=Parent.prototype;
//兼容性写法 Child原型指向一个空对象,空对象的原型指向的Parent的原型
Child.prototype = Object.create(Parent.prototype);
Child.prototype.contructor=Child;
Child.prototype.getY = function getY(){
	return this.y;
}
var child1 = new Child;
  • ES6中的类和继承,extends Parent:

ES6中创建的就是类,不能当做普通函数执行,只能new执行。继承后一定要在constructor第一行加上super();

class Parent{
	constructor(){
		this.x=100;
	}
	getX(){
		retrun this.x;
	}
}
class Child extends Parent{
	constructor(){
		super();//类似于call继承super(100,200) 相当于把Parent中的constructor执行,传递了100和200
		this.y=200;
	}
	getY(){
		retrun this.y;
	}
}
本作品是一套通用型的中后台管理系统原型设计方案,可以帮助你快速输出标准美观的中后台产品原型方案,极大的节省协作成本提升工作效率。这套方案提供了12套不同型的登录界面系统框架,并涵盖了大量的常用组件常用页面模板,可以满足各中后台管理系统的原型设计需求,快速输出各种管理信息系统,如CMS、OA、CRM、ERP、POS等系统原型。 在2017年AxureUX发布了基于电商后台业务系统的原型模板,并总结分享了相关的设计方法框架模板,收获了非常良好的用户反馈,并被很多产品同行应用到了实际的原型设计工作中。为了满足更多的中后台系统的原型方面的设计需求,我们参考了大量的案例并推出了这套全新的设计方案。这套作品保留了自适应布局框架内联框架链接页面等特性,同时简化了相关的界面布局交互事件,具有更易应用维护等特点。同时,作品使用了较为安全的蓝色作为主色调,可以满足更丰富的应用场景。 除了提供不同型的登录界面系统框架之外,本套作品中还提供了丰富的常用页面模板,涵盖了各典型的中后台系统使用场景。其中包含了各中后台数据仪表首页示例、数据管理的增删改查相关页面、团队协作功能流程相关页面,以及各信息展示提示反馈页面。由于这套设计方案的所有内页都是通过框架页面进行链接的,所以相关的页面模板基本都是独立的,可以非常方便进行复用。在实际使用过程中,可以根据需要组合对应的框架页面模板。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值