说一说js承继的办法和优缺陷?
要点: 原型链承继、借用结构函数承继、组合承继、原型式承继、寄生式承继、寄生组合式承继、ES6 Class
答:
一、原型链承继
缺陷:
- 1.引证类型的特点被一切实例同享
- 2.在创立 Child 的实例时,不能向 Parent 传参
//原型链承继
function Parent() {
this.parentPrototype = "parent prototype"
//验证这种承继办法的确定,如果父类示例中存在一个引证类型的特点,将会被一切子类同享
this.parentObj = {
info: "我是 parent 引证特点parentObj中的 info"
}
}
function Children() {
}
//将Children的原型目标指定为Parent的示例,经过原型链,将Parent中的特点赋值给Children示例
Children.prototype = new Parent();
const a = new Children();
console.log(a.parentPrototype); // parent prototype
//缺陷
const b = new Children();
//在a示例中改动承继的引证特点
a.parentObj.info = "我是a示例中 引证特点parentObj中的 info"
//b与a示例同享引证特点
console.log(b.parentObj.info); // 我是a示例中 引证特点parentObj中的 info
二、借用结构函数(经典承继)
长处:
- 1.避免了引证类型的特点被一切实例同享
- 2.能够在 Child 中向 Parent 传参
缺陷:
- 1.办法都在结构函数中界说,每次创立实例都会创立一遍办法。
function Parent() {
this.parentPrototype = "parent prototype"
this.obj = {
info: "parent obj info"
}
this.fn = function () {
console.log("打印功用")
}
}
function Children() {
Parent.call(this);
}
const a = new Children();
console.log(a.parentPrototype); // parent ptototype
//缺陷 此刻Parent()会再次创立一个fn函数,这个是没有必要的
const b = new Children();
a.obj.info = "a obj info";
//长处 避免了子类实例同享引证特点
console.log(b.obj.info) // parent obj info;
三、组合承继
长处:
- 1.融合原型链承继和结构函数的长处,是 JavaScript 中最常用的承继形式。
function Parent() {
this.parentPrototype = "我是Parent 中的特点"
}
//Parent中的办法,在原型上界说
Parent.prototype.pFn = function () {
console.log('我是Parent中的办法');
}
function Children() {
//Parent中的特点仍然在结构函数中承继
Parent.call(this);
}
//将Children的原型目标赋值为 Parent实例,这样Parent中的办法也能够被Children承继
Children.prototype = new Parent();
const c = new Children();
console.log(c.parentPrototype); //我是Parent 中的特点
c.pFn(); //我是Parent中的办法
四、原型式承继
缺陷: – 1.包含引证类型的特点值一直都会同享相应的值,这点跟原型链承继一样。
function objFn(o) {
o.objFnPrototype = "我是 objFnPrototype"
function F() {}
F.prototype = o;
return new F();
}
let a = objFn({
name: "name1"
});
console.log(a.name); //name1
console.log(a.objFnPrototype); //我是 objFnPrototype
五、寄生式承继
缺陷:
- 1.跟借用结构函数形式一样,每次创立目标都会创立一遍办法。
function createObje(obj) {
let clone = Object.assign(obj); //接受到目标后,原封不动的创立一个新目标
clone.prototype1 = "我是新增的prototype1"; //在新目标上新增特点,这便是所谓的寄生
return clone; //返回新目标
}
const parent = {
parentPrototype: "parentPrototype"
}
//c实例,就承继了parent的一切特点
let c = createObje(parent);
console.log(c.parentPrototype); //parentPrototype
六、寄生组合式承继
长处:
- 1.这种方式的高效率表现它只调用了一次 Parent 结构函数,并且因此避免了在 Parent.prototype 上面创立不必要的、剩余的特点。
- 2.与此同时,原型链还能坚持不变;
- 3.因此,还能够正常使用 instanceof 和 isPrototypeOf。
function inherProto(superType, subType) {
//复制一个超类的原型副本
let proto = {
...superType.prototype
};
//将原型的超类副本作为子类的原型目标,也便是第一种中的原型链承继方式,只不过承继的是超类原型的副本
subType.prototype = proto;
//这一步比较迷,官方的说法是,咱们在复制超类的原型的时候,复制的proto目标,将会丢掉默认自己的结构函数,也便是superType,
//所以咱们这儿将它的结构函数补全为subType。貌似不做这一步也没啥问题,但是缺了点东西或许会有其他的副作用,所以还是补上
proto.constructor = subType;
}
function Super() {
this.superProto = "super proto";
this.colors = ["red", "yelloy"];
}
function Sub() {
this.subProto = "sub proto";
this.name = "sub name";
//这儿还是借用结构函数的套路
Super.call(this);
}
Super.prototype.getName = function () {
console.log(this.name);
}
//这儿要在界说完Super的特点后执行,由于承继的是超类原型的副本,与Super.prototype是两个目标,在这之后再改动Super.prototype,就已经不会在影响到Sub所承继的副本超类原型目标了
inherProto(Super, Sub);
let a = new Sub();
console.log(a.getName);