function Person() {
this.name = "Person name";
this.arr = [1, 2, 3];
}
Person.prototype.getFunName = function () {
return "Person";
};
// 类式继承
(function () {
console.log("--------类式继承--------");
function Son() {}
Son.prototype = new Person();
const son1 = new Son();
const son2 = new Son();
console.log("son2.arr =>", son2.arr);
son1.arr.push(666);
console.log("son1.arr.push(666)");
console.log("son2.arr =>", son2.arr);
try {
console.log("拿到了 Person.prototype", son1.getFunName());
} catch (e) {
console.error(e);
}
console.log(
"缺点:\n1、实例化Parent的时候无法入参;\n2、实例只有共性,不能保持个性"
);
console.log("--------end--------\n");
})();
// 构造函数继承
(function () {
console.log("--------构造函数继承--------");
function Son() {
Person.call(this);
}
const son1 = new Son();
const son2 = new Son();
console.log("son2.arr =>", son2.arr);
console.log("son1.arr.push(666)");
son1.arr.push(666);
console.log("son2.arr =>", son2.arr);
try {
console.log("拿到了 Person.prototype", son1.getFunName());
} catch (e) {
console.error(e);
}
console.log("缺点:\n1、实例保持了个性,却不能共享方法");
console.log("--------end--------\n");
})();
// 组合继承
(function () {
console.log("--------组合继承(类式继承与构造函数继承的结合)--------");
function Son() {
Person.call(this);
}
Son.prototype = new Person();
const son1 = new Son();
const son2 = new Son();
console.log("son2.arr =>", son2.arr);
console.log("son1.arr.push(666)");
son1.arr.push(666);
console.log("son2.arr =>", son2.arr);
try {
console.log("拿到了 Person.prototype", son1.getFunName());
} catch (e) {
console.error(e);
}
console.log("缺点:\n1、实例化了两次Parent");
console.log("--------end--------\n");
})();
// 原型式继承
(function () {
console.log("--------原型式继承--------");
function Son(o) {
function F() {}
F.prototype = o;
return new F();
}
const PersonObj = {
name: "Person name",
arr: [1, 2, 3],
};
// 也可使用Object.create来实现 Object.create(PersonObj);
const son1 = Son(PersonObj);
const son2 = Son(PersonObj);
console.log("son2.arr =>", son2.arr);
console.log("son1.arr.push(666)");
son1.arr.push(666);
console.log("son2.arr =>", son2.arr);
console.log("缺点:\n1、实例只有共性,不能保持个性(同类式继承)");
console.log("--------end--------\n");
})();
// 寄生式继承
(function () {
console.log("--------寄生式继承--------");
function Son(o) {
function F() {
this.getFunName = function () {
return "Son";
};
}
F.prototype = o;
return new F();
}
const PersonObj = {
name: "Person name",
arr: [1, 2, 3],
};
const son1 = new Son(PersonObj);
const son2 = new Son(PersonObj);
console.log("son2.arr =>", son2.arr);
console.log("son1.arr.push(666)");
son1.arr.push(666);
console.log("son2.arr =>", son2.arr);
try {
console.log("拿到了 F.getFunName", son1.getFunName());
} catch (e) {
console.error(e);
}
console.log("缺点:\n1、实例只有共性,不能保持个性(同类式继承)");
console.log("--------end--------\n");
})();
// 寄生组合式继承
(function () {
console.log("--------寄生组合式继承(寄生与构造)--------");
function Son() {
Person.call(this);
}
function inheritProto(Sub, Super) {
const proto = Object.create(Super.prototype);
proto.constructor = Sub;
Sub.prototype = proto;
}
inheritProto(Son, Person);
const son1 = new Son();
const son2 = new Son();
console.log("son2.arr =>", son2.arr);
console.log("son1.arr.push(666)");
son1.arr.push(666);
console.log("son2.arr =>", son2.arr);
try {
console.log("拿到了 Person.getFunName", son1.getFunName());
} catch (e) {
console.error(e);
}
console.log("缺点:\n1、没有缺点");
console.log("--------end--------\n");
})();
JS的继承(ES5)
最新推荐文章于 2024-06-08 16:25:56 发布