ES5继承实质:先创建实例对象this,再将父类方法添加到this上面。
ES6继承实质:先创造父类的实例对象this,用子类的构造函数修改this.
参阅ES5各种继承的优缺点:https://www.jb51.net/article/113628.htm
参阅:https://blog.csdn.net/heyue_99/article/details/54932553
---------ES5的继承 ---》1.拷贝继承(浅,深) 2.Object.create()继承 3.(伪)类继承
一:拷贝实现继承
1.浅拷贝实现继承----只针对值类型
var p={
name:'Owen',
age:22
}
var c={
language:'HTML'
}
function extend(p,c){
var c=c||{};
for(var prop in p){
c[prop]=p[prop]
}
}
extend(p,c)//--->c={ language:'HTML',name:'Owen',age:22}
1.深拷贝(递归)----针对引用类型
var p={
name:'Owen',
age:22,
address:{home:'xxxxx',office:'yyyy'},
schools:['小学','大学']
}
var c={
language:'HTML'
}
function extendDeeply(p,c){
var c=c||{};
for(var prop in p){
if(typeof p[prop]==='object'){
c[prop]=(p[prop].constructor ===Array)?[]:{};
extendDeeply(p[prop],c[prop]) ;
}else{
c[prop]=p[prop]
}
}
}
extendDeeply(p,c)//--->c={ language:'HTML',name:'Owen',age:22,address:{home:'xxxxx',office:'yyyy'}, schools:['小学','大学'] }
3.构造函数拷贝实现继承---call
function P(){
this.name='Owen';
this.address = {home:'xxxxx',office:'yyyy'};
}
function C(){
P.call(this);//把父类的实例成员调用过来
this.language = 'java';
}
var c=new C();
c.name;//'Owen'
c.address//{home:'xxxxx',office:'yyyy'};
二,对象式Object.create()继承
浏览器内置的继承create():在__proto__继承的
var chid= Object.create(parent)
var chid = Object.create(parent,{age:{value:20},salary:{value:1000}})
实现原理:
var p ={name:"cj"};
function myCreate(p){
var ins ;
function F(){};
F.prototype = p;
ins=new F();
return ins;
}
三,(伪)类继承(伪类)
ES5继承的本质:先创建实例对象this,再将父类方法添加到this上面。
思路:创建父类 创建子类 建立关系 通用继承方法与super
判断原型---hasOwnProperty() isPrototypeOf(f) Object.getPrototypeOf(f)
建立关系主要有几种:
1.直接关系---C.prototype=P.prototype//子的东西会暴露给父,不推荐
2.C.prototype=new P();//每次创建对象会浪费内存,不推荐
3.构建一个中间函数//推荐
function F(){};
F.prototype=P.prototype;
var f=new F();
C.prototype=f;
实现继承的步骤:如下4步
//1.建立父类,构造函数里写属性,它的prototype上写共用属性,以及方法
function P(){//父类,(其实只是一个构造函数 出来的 伪类)
this.name='Owen';
this.address = {home:'xxxxx',office:'yyyy'};
}
P.prototype.headCount = 1;
P.prototype.eat=function(){
console.log("eating...")
}
//2.创建子类
function C(pname,page,title){
P.apply(this,arguments);
}
//3.0继承关系和constructor修正
C.prototype=Object.create(P.prototype);//继承父,这里C.prototype.constructor指向父的原型对象P.prototype
C.prototype.constructor=C;//这里C.prototype.constructor指向回自己的原型对象C.prototype
//3.1通用继承方法与super(用来取代上面的那个3.0)
function createEx(C,P);
function createEx(C,P){
function F(){};
F.prototype=P.prototype;
C.prototype=new F();
C.prototype.construtor=C;
C.super=C.base=P.prototype;//注意 super是java的方法,base是C#的方法
}
//4.给子类添加成员(一定要放在3后面的,如果放在3前面,会被重写)
C.prototype.language="HTML";
C.work=function(){
console.log("writing code in " +this.language);
C.base.eat();//--跟super 实现子调用父的东西
}
-------------ES6继承--使用class
ES6继承实质:先创造父类的实例对象this,用子类的构造函数修改this.
class P{
constructor(name){
this.name=name;
this.colors=["green","red"]
}
sayName(){console.log(this.name) }
}
class C extends P{
constructor(name,age){
super(name);//super调用父类的方法,会绑定子类的this.
this.age=age;
}
sayAge(){return this.age; }
}
var c=new C("hello",29);
console.log(c);