经典继承

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();

javascript学习笔记--经典继承、组合继承、原型式继承、寄生继承以及寄生组合继承的更多相关文章

  1. Java程序猿JavaScript学习笔记(2——复制和继承财产)

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  2. Java程序猿的JavaScript学习笔记(6——面向对象模拟)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  3. Java程序猿的JavaScript学习笔记(汇总文件夹)

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  4. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  5. Java程序猿的JavaScript学习笔记(3——this/call/apply)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  6. Java程序猿JavaScript学习笔记(4——关闭/getter/setter)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  7. Java程序猿JavaScript学习笔记(14——扩大jQuery UI)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  8. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  9. Java程序猿的JavaScript学习笔记(1——理念)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. 配置文件:android:inputType参数类型说明

    输入字符 android:inputType="none"  --输入普通字符  android:inputType="text" --输入普通字符  andr ...

  2. Python稀疏矩阵运算

    import numpy as np import scipy import time import scipy.sparse as sparse t = [1]+[0]*4999 a = scipy ...

  3. windows10 下 gcc/g++ 的安装

    一.gcc的下载 网址:www.mingw.org ,点击右上方的 download installer 二.安装 打开安装程序,默认安装,弹出下列界面 找到mingw32-gcc-g++(注意cla ...

  4. [design pattern](6) Absract Factory

    前言 在前面的章节中,我们先后介绍了简单工厂模式和工厂方法模式.他们都是工厂模式大家族的一员,那么,本章将会接着上一章,来说一说工厂模式的最后一员,那就是抽象工厂模式. 思考题 首先,来思考下下面的问 ...

  5. FP回写阶段卡住或报错

    FP在autosap阶段往往会因各种各样的因素导致回写报错,卡住等异常: 本次由于一个视图的性能突然下降导致回写长期卡住没有完成: 这时如果要重新执行回写的话就要检查哪部分的数据回写到SAP端,一般有 ...

  6. es入门--curl的使用

    文档介绍: 首先要讲什么是文档,我们中大多是java程序员,java是面向对象的,那么在elasticsearch看来:对象和文档是等价的.只不过这个对象是可以被序列化成key-value形式的jso ...

  7. PHPStrom 配置DataSource来管理数据库

    在使用phpstrom的时候经常会连接数据库,使用phpstrom自带的工具,可以连接到mysql数据库,管理和查看mysql,非常方便 这个连接是官方文档教你如何配置http://www.jetbr ...

  8. linux下面用Mingw编译libx264

    linux下面用Mingw编译libx264 首先要先安装好mingw 我用的是Ubuntu 编译ffmpeg的时候 ,官方上面有一个自动化脚本能够把mingw安装好 这里就不说了 新版本的libx2 ...

  9. React Native商城项目实战04 - 封装TabNavigator.Item的创建

    1.Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Im ...

  10. [论文理解] LFFD: A Light and Fast Face Detector for Edge Devices

    LFFD: A Light and Fast Face Detector for Edge Devices 摘要 从微信推文中得知此人脸识别算法可以在跑2K图片90fps,仔细一看是在RTX2070下 ...