经典继承
js 中实现经典继承的方式是通过构造函数来实现的, 即在子类中对父类调用 call 方法.
- function Geometric() {
- this.time = "";
- this.color = "";
- this.base = function () {alert("Creating time is:" + this.time + "and color is:" + this.color)
- }
- }
- function Circle() {
- Geometric.call(this);
- this.radius = 0;
- this.area = function () {
- alert("the area is:" + Math.PI * this.radius * this.radius)
- }
- }
- function Rectangle() {
- Geometric.call(this);
- this.wi = 0;
- this.he = 0;
- this.area = function () {
- alert("the area is:" + this.wi * this.he)
- }
- }
- var instance1 = new Circle()
- instance1.time = "20xx.xx.xx"
- instance1.color = "red"
- instance1.radius = 0.3;
- instance1.area()
- instance1.base()
- var instance2 = new Rectangle()
- instance2.time = "20xx.xx.xx"
- instance2.color = "blue"
- instance2.wi = 3;
- instance2.he = 4;
- instance2.area();
- instance2.base();
组合继承
组合继承又称伪经典继承, 是通过原型链(实现对原型属性和方法的继承) + 借用构造函数(实现对实例属性的继承) .
父类的方法定义在父类的原型上; 子类中继续进行父类的 call 方法的调用; 让子类的原型指向父类; 子类的方法定义在子类原型上.
- // 组合继承
- // 原型链 + 借用构造函数
- function Geometric() {
- this.time = "";
- this.color = "";
- }
- // 方法定义在构造函数的原型上
- Geometric.prototype.base = function () {
- alert("Creating time is:" + this.time + "and color is:" + this.color)
- }
- function Circle() {
- Geometric.call(this);
- this.radius = 0;
- }
- Circle.prototype = new Geometric()
- Circle.prototype.area = function () {
- alert("the area is:" + Math.PI * this.radius * this.radius)
- }
- var instance3 = new Circle();
- instance3.time = "20xx.xx.xx"
- instance3.color = "green";
- instance3.radius = "20"
- instance3.base();
- instance3.area();
原型式继承
原型式继承使用了一个空函数对象 F 来作为原型链的中间变量.
父类的方法定义在父类的原型上; 子类中继续进行父类 call 方法的调用; 构造一个空函数对象 F; 让 F 的原型 = 父类的原型; 子类的原型 = F; 子类原型的构造函数 = 子类; 子类的方法构造在子类原型上.
- // 原型式继承
- // 使用一个空函数 F 来当做中间对象
- function Geometric() {
- this.time = "";
- this.color = "";
- }
- // 方法定义在构造函数的原型上
- Geometric.prototype.base = function () {
- alert("Creating time is:" + this.time + "and color is:" + this.color)
- }
- function Circle() {
- Geometric.call(this);
- this.radius = 0;
- }
- function F() { }
- F.prototype = Geometric.prototype;
- Circle.prototype = new F()
- Circle.prototype.constructor = Circle();
- Circle.prototype.area = function () {
- alert("the area is:" + Math.PI * this.radius * this.radius)
- }
- var instance4 = new Circle();
- instance4.time = "2018.06.03"
- instance4.color = "green";
- instance4.radius = "20"
- instance4.base();
- instance4.area();
- alert(instance4.__proto__ == Circle.prototype)
- alert(instance4.__proto__.__proto__ == Geometric.prototype)
寄生继承
寄生继承了创建一个用于封装继承过程的函数.
创建一个继承函数; 传入一个父类对象; 在函数内构造该父类对象; 在函数内创建子类; return 该父类对象;
- // 寄生继承
- // 创建一个用于封装继承过程的函数
- function createGeometric(g) {
- var clone1 = Object(g);
- clone1.createCircle = function (radius) {
- this.radius = radius;
- this.circleArea = function () {
- alert("the area is:" + Math.PI * this.radius * this.radius)
- }
- }
- clone1.createRectangle = function (wi, he) {
- this.wi = wi;
- this.he = he;
- this.rectangleArea = function () {
- alert("the area is:" + this.wi * this.he);
- }
- }
- clone1.base = function () {
- alert("Creating time is:" + g.time + "and color is:" + g.color)
- }
- // 最后要将新创建的对象 return 出去
- return clone1
- }
- var g = {
- time: "20xx.xx.xx",
- color: "red"
- }
- var Geometric = createGeometric(g);
- Geometric.base();
- Geometric.createCircle(2.0);
- alert(Geometric.circleArea())
- Geometric.createRectangle(4, 5);
- alert(Geometric.rectangleArea())
寄生组合继承
寄生组合继承避免了组合继承中的一些冗余现象.
组合继承中: 子类中进行了父类 call 方法的调用; 子类的原型指向父类; 这样就会有一定的冗余.
寄生组合继承中, 通过一个函数 (此处写为 inheritPrototype) 来代替子类的原型指向父类这一过程
- // 寄生组合继承, 避免了组合继承中的冗余现象
- function inheritPrototype(subType, superType) {
- var protoType = Object.create(superType.prototype); // 创建对象
- protoType.constructor = subType; // 增强对象
- subType.prototype = protoType; // 指定对象
- }
- function Geometric() {
- this.time = "";
- this.color = "";
- }
- // 方法定义在构造函数的原型上
- Geometric.prototype.base = function () {
- alert("Creating time is:" + this.time + "and color is:" + this.color)
- }
- function Circle() {
- Geometric.call(this);
- this.radius = 0;
- }
- //Circle.prototype = new Geometric()
- inheritPrototype(Circle, Geometric)
- Circle.prototype.area = function () {
- alert("the area is:" + Math.PI * this.radius * this.radius)
- }
- var instance5 = new Circle();
- instance5.time = "20xx.xx.xx"
- instance5.color = "green";
- instance5.radius = "20"
- instance5.base();
- instance5.area();
来源: http://www.bubuko.com/infodetail-2638872.html