在Java和C#中,你可以简单的理解class是一个模子,对象就是被这个模子压出来的一批一批月饼。压个啥样,就得是个啥样,不能随便动,动一动就坏了。
而在Javascript中,没有模子,月饼被换成了面团,你可以捏成自己想要的样子。对象属性,方法不合适,可以修改。没有的方法,可以自己创建,发挥的*度很大。
继承是指一个对象直接使用另一对象的属性和方法。
许多面向对象语言都支持两种继承方式:接口继承和实现继承。
接口继承:只继承方法签名;
实现继承:继承实际的方法。
Javascript是弱类型语言,大小写敏感。它不是原生支持继承,而是通过prototype去模拟的,所以是基于对象,不是面向对象。在ECMAScript中,无法实现接口继承,只支持实现继承,而实现继承主要是依靠原型链。每个函数都有call,apply方法,都有length,arguments,caller等属性。为什么每个函数都有?这肯定是"继承"的。函数由Function函数创建,因此继承Function.prototype中的方法。
ES5继承是先创建子类的实例对象this,再向this对象中添加父类的方法;
ES6继承是先创造父类的实例对象this,再用子类的构造函数修改this。
ECMAScript继承主要分两大类:引用对象继承,实例对象继承。
一、引用对象继承
子引用类型继承父引用类型,然后通过子引用类型生成的实例对象,具有父引用类型的特性。
// 定义一个父类,公用
function Parent(name,age){
// 属性
this.name = name || 'Parent';
this.age = age || 18;
// 实例方法
this.getAge = function(){
console.log('我的年龄是:'+ this.age);
}
}
// 原型方法
Parent.prototype.getName = function() {
console.log('我的名字是:'+ this.name);
};
1、原型链继承
function Child(){
}
Child.prototype = new Parent();//借助JavaScript中的委托机制,将父类的实例作为子类的原型。
Child.prototype.constructor = Child;
Child.prototype.name = 'child1'; //test
var child1 = new Child();
console.log(child1.name);
console.log(child1.getAge());
console.log(child1.getName());
console.log(child1 instanceof Parent); //true
console.log(child1 instanceof Child); //true
【特点】
A、父类新增原型方法/原型属性,子类都能访问到;
B、简单,易于实现;
C、非常纯粹的继承关系,实例是子类的实例,也是父类的实例。
【缺点】
A、来自原型对象的引用属性是所有实例共享的;
B、创建子类实例时,无法向父类构造函数传参;
C、要想为子类新增属性和方法,必须要在new Parent()后执行;
D、无法实现多继承。
2、构造继承(伪造对象,经典继承,对象冒充继承)
function Child(name){
Parent.call(this);//在子类内部调用父类,通过call,apply改变对象的this指向来继承。
//Parent.apply(this, arguments);
this.name = name || 'Camille';
} //test
var child1 = new Child();
console.log(child1.name);
console.log(child1.getAge());
console.log(child1 instanceof Parent); // false
console.log(child1 instanceof Child); // true
【特点】
A、避免了引用类型的属性被所有实例共享;
B、可以在Child中向Parent传参;
C、可以实现多继承,call多个父类对象。
【缺点】
A、实例并不是父类的实例,只是子类的实例;
B、只能继承父类的实例属性和方法,不能继承原型属性/方法;
C、无法实现函数复用,每个子类都有父类实例函数的副本,影响性能。
3、组合继承,次优(类式继承)
function Child(name,age){
Parent.call(this);//通过调用父类构造函数,继承父类的实例属性并保留传参的优点。
this.name = name || 'Camille';
this.age = age;
}
Child.prototype = new Parent();//通过将父类实例作为子类原型,实现函数复用及对原型属性和方法的继承。 Child.prototype.constructor = Child; //test
var child1 = new Child('HouYi',20);
console.log(child1.name);
console.log(child1.getAge());
console.log(child1 instanceof Parent); // true
console.log(child1 instanceof Child); // true
【特点】
A、可以继承实例属性/方法,也可以继承原型属性/方法;
B、既是子类的实例,也是父类的实例;
C、可传参;
D、函数可复用。
【缺点】
A、调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)。
4、寄生继承
function createObj(o){
var F = function(){};
F.prototype = o;
return new F();
}
function getObj(obj){
var cobj = createObj(obj);//创建新对象,通过寄生方式,砍掉父类的实例属性
cobj.setSex = function(){//增强对象
console.log('新对象的性别设置函数');
};
return cobj;//指定对象
} //test
var psl = new Parent();
var child1 = getObj(psl);
console.log(child1.name);
console.log(child1.setSex());
console.log(child1 instanceof Parent); // true
【特点】
A、给原生继承穿了个马甲,更像继承了;
B、createObj函数不是必须的,新对象是如何创建的并不重要,用createObj生的,new出来的,字面量现做的,都可以。
【缺点】
A、无法实现函数复用(没用到原型,当然不行)。
5、寄生组合继承,最优
function createObj(o){
var F = function(){};
F.prototype = o;
return new F();
}
function Child(name,age){
Parent.call(this);
this.name = name || 'Camille';
this.age = age;
}
var nobj = createObj(Parent.prototype);//通过寄生方式,砍掉父类的实例属性,创建对象
nobj.constructor = Child;//增强对象
Child.prototype = nobj;//指定对象 //test
var child1 = new Child('HouYi',27);
console.log(child1.name);
console.log(child1.getAge());
console.log(child1 instanceof Parent); // true
console.log(child1 instanceof Child); // true
【特点】
A、完美,在调用两次父类的构造的时候,不会初始化两次实例方法/属性;
B、对实例属性和原型属性分别进行了继承。
【缺点】
A、实现复杂。
二、实例对象继承
继承得到的对象都具有父实例对象的所有属性和方法,其实就是指对象的复制和克隆。
1、原型继承
// 定义一个父类,公用
function Parent(name,age){
// 属性
this.name = name || 'Parent';
this.age = age || 18;
// 实例方法
this.getAge = function(){
console.log('我的年龄是:'+ this.age);
}
}
// 原型方法
Parent.prototype.getName = function() {
console.log('我的名字是:'+ this.name);
};
/**
* 创建一个继承父类原型的实例对象,这也是ES5中Object.create()的简单实现。
* 在object()函数内部, 先创建一个临时性的构造函数;
* 然后将传入的对象作为这个构造函数的原型,最后返回了这个临时类型的一个新实例。
*/
function createObj(o){
var F = function(){};
F.prototype = o;
return new F();
} //test
var psl = new Parent();
var child1 = createObj(psl);//这是重点
child1.name = 'Camille';
console.log(child1.name);
console.log(child1.getAge());
console.log(child1 instanceof Parent); // true
ECMAScript5通过新增Object.create()方法规范化了原型式继承,这个方法接收两个参数:一个用作新对象原型的对象和一个作为新对象定义额外属性的对象。
var child1 = Object.create(psl);
console.log(child1.name);
console.log(child1.getAge());
console.log(child1 instanceof Parent); // true
【特点】
A、复制父实例对象;
【缺点】
A、原型引用属性会被所有实例共享;
B、无法实现代码复用(新对象是现取的,属性是现添的,都没用函数封装,怎么复用)。
2、拷贝继承
3、借用
有时可能恰好仅需要父对象其中的一两个方法,而不需要父对象的其他方法。这种情况下,可以使用call()和apply()来实现继承,区别就是传参的不同。
A、比如,借用Array中的slice方法
Array.prototype.slice.call();
[].prototype.slice.call();
B、比如,借用对象的方法
//如果getAge的this指向childObj
var parentObj = {
name:'Parent',
getAge:function(age){
console.log('我的年龄是:'+ age);
}
}
var childObj = {
name:'camille'
}
parentObj.getAge.call(childObj, '18'); //我的年龄是:18
//如果getAge的this指向全局对象
var parentObj = {
name:'Parent',
getAge:function(age){
console.log('我的年龄是:'+ age);
}
}
var pgetage = parentObj.getAge;
pgetage("27");//我的年龄是:27 var childObj = {
name:'Camille'
}
function bind(o,m){
return function(){
return m.apply(o,arguments);
};
}
var cgetage = bind(childObj,parentObj.getAge);
cgetage("30");//我的年龄是:30
4、绑定
ES5将bind()添加到Function.prototype,使得bind()像call()apply()一样易用。
// bind的内部实现
if(typeof Function.prototype.bind === 'undefined'){
Function.prototype.bind = function(thisArg){
var _this = this,
slice = Array.prototype.slice,
args = slice.call(arguments, 1);
return function(){
return _this.apply(thisArg, args.concat(slice.call(arguments)));
}
}
}
var parentObj = {
name:'Parent',
getAge:function(age){
console.log('我的年龄是:'+ age);
}
}
var childObj = {
name:'Camille'
}
var cgetage = parentObj.getAge.bind(childObj, '32');
cgetage();//我的年龄是:32
三、ES6中的继承
使用class,extends,super关键字来实现类继承。
//父类 Parentc
class Parentc {
// 父类的构造方法
constructor(name, age) {
this.name = name;
this.age = age;
// 共享变量
this.LEGS_NUM = 2;
}
// 父类的getName方法
getName() {
console.log(`我的名字是:${this.name}`);
} // 父类的getAge方法
getAge() {
console.log('我的年龄是:' + this.age);
} }
//子类 Childc
class Childc extends Parentc {
constructor(name, age, city) {
// 调用父类的构造方法
super(name, age);
this.city = city;
} // 覆盖父类的getName方法
getName() {
console.log(`我的名字是:${this.name},来自${this.city}`);
}
} // 实例化一个Childc的实例
let aperson = new Childc('Camille', 18, '西安');
aperson.getName(); // 我的名字是:Camille,来自西安
aperson.getAge(); // 我的年龄是18
console.log(aperson.LEGS_NUM); //
console.log(aperson instanceof Childc); //true
console.log(aperson instanceof Parentc); //true