位置: 编程技术 - 正文

JavaScript 继承详解(三)(js继承的方法)

编辑:rootadmin

注:本章中的jClass的实现参考了Simple JavaScript Inheritance的做法。

首先让我们来回顾一下第一章中介绍的例子:

function Person(name) {this.name = name;}Person.prototype = {getName: function() {return this.name;}}function Employee(name, employeeID) {this.name = name;this.employeeID = employeeID;}Employee.prototype = new Person();Employee.prototype.getEmployeeID = function() {return this.employeeID;};var zhang = new Employee("ZhangSan", "");console.log(zhang.getName()); // "ZhangSan"

修正constructor的指向错误

从上一篇文章中关于constructor的描述,我们知道Employee实例的constructor会有一个指向错误,如下所示:

var zhang = new Employee("ZhangSan", "");console.log(zhang.constructor === Employee); // falseconsole.log(zhang.constructor === Object); // true 我们需要简单的修正: function Employee(name, employeeID) {this.name = name;this.employeeID = employeeID;}Employee.prototype = new Person();Employee.prototype.constructor = Employee;Employee.prototype.getEmployeeID = function() {return this.employeeID;};var zhang = new Employee("ZhangSan", "");console.log(zhang.constructor === Employee); // trueconsole.log(zhang.constructor === Object); // false

创建Employee类时实例化Person是不合适的

但另一方面,我们又必须依赖于这种机制来实现继承。 解决办法是不在构造函数中初始化数据,而是提供一个原型方法(比如init)来初始化数据。

// 空的构造函数function Person() {}Person.prototype = {init: function(name) {this.name = name;},getName: function() {return this.name;}}// 空的构造函数function Employee() {}// 创建类的阶段不会初始化父类的数据,因为Person是一个空的构造函数Employee.prototype = new Person();Employee.prototype.constructor = Employee;Employee.prototype.init = function(name, employeeID) {this.name = name;this.employeeID = employeeID;};Employee.prototype.getEmployeeID = function() {return this.employeeID;};这种方式下,必须在实例化一个对象后手工调用init函数,如下: var zhang = new Employee();zhang.init("ZhangSan", "");console.log(zhang.getName()); // "ZhangSan"

如何自动调用init函数?

必须达到两个效果,构造类时不要调用init函数和实例化对象时自动调用init函数。看来我们需要在调用空的构造函数时有一个状态标示。

// 创建一个全局的状态标示 - 当前是否处于类的构造阶段var initializing = false;function Person() {if (!initializing) {this.init.apply(this, arguments);}}Person.prototype = {init: function(name) {this.name = name;},getName: function() {return this.name;}}function Employee() {if (!initializing) {this.init.apply(this, arguments);}}// 标示当前进入类的创建阶段,不会调用init函数initializing = true;Employee.prototype = new Person();Employee.prototype.constructor = Employee;initializing = false;Employee.prototype.init = function(name, employeeID) {this.name = name;this.employeeID = employeeID;};Employee.prototype.getEmployeeID = function() {return this.employeeID;};// 初始化类实例时,自动调用类的原型函数init,并向init中传递参数var zhang = new Employee("ZhangSan", "");console.log(zhang.getName()); // "ZhangSan"但是这样就必须引入全局变量,这是一个不好的信号。

如何避免引入全局变量initializing?

我们需要引入一个全局的函数来简化类的创建过程,同时封装内部细节避免引入全局变量。

// 当前是否处于创建类的阶段var initializing = false;function jClass(baseClass, prop) {// 只接受一个参数的情况 - jClass(prop)if (typeof (baseClass) === "object") {prop = baseClass;baseClass = null;}// 本次调用所创建的类(构造函数)function F() {// 如果当前处于实例化类的阶段,则调用init原型函数if (!initializing) {this.init.apply(this, arguments);}}// 如果此类需要从其它类扩展if (baseClass) {initializing = true;F.prototype = new baseClass();F.prototype.constructor = F;initializing = false;}// 覆盖父类的同名函数for (var name in prop) {if (prop.hasOwnProperty(name)) {F.prototype[name] = prop[name];}}return F;};使用jClass函数来创建类和继承类的方法: var Person = jClass({init: function(name) {this.name = name;},getName: function() {return this.name;}});var Employee = jClass(Person, {init: function(name, employeeID) {this.name = name;this.employeeID = employeeID;},getEmployeeID: function() {return this.employeeID;}});var zhang = new Employee("ZhangSan", "");console.log(zhang.getName()); // "ZhangSan"OK,现在创建类和实例化类的方式看起来优雅多了。 但是这里面还存在明显的瑕疵,Employee的初始化函数init无法调用父类的同名方法。

如何调用父类的同名方法?

我们可以通过为实例化对象提供一个base的属性,来指向父类(构造函数)的原型,如下:

// 当前是否处于创建类的阶段var initializing = false;function jClass(baseClass, prop) {// 只接受一个参数的情况 - jClass(prop)if (typeof (baseClass) === "object") {prop = baseClass;baseClass = null;}// 本次调用所创建的类(构造函数)function F() {// 如果当前处于实例化类的阶段,则调用init原型函数if (!initializing) {// 如果父类存在,则实例对象的base指向父类的原型// 这就提供了在实例对象中调用父类方法的途径if (baseClass) {this.base = baseClass.prototype;}this.init.apply(this, arguments);}}// 如果此类需要从其它类扩展if (baseClass) {initializing = true;F.prototype = new baseClass();F.prototype.constructor = F;initializing = false;}// 覆盖父类的同名函数for (var name in prop) {if (prop.hasOwnProperty(name)) {F.prototype[name] = prop[name];}}return F;};调用方式: var Person = jClass({init: function(name) {this.name = name;},getName: function() {return this.name;}});var Employee = jClass(Person, {init: function(name, employeeID) {// 调用父类的原型函数init,注意使用apply函数修改init的this指向this.base.init.apply(this, [name]);this.employeeID = employeeID;},getEmployeeID: function() {return this.employeeID;},getName: function() {// 调用父类的原型函数getNamereturn "Employee name: " + this.base.getName.apply(this);}});var zhang = new Employee("ZhangSan", "");console.log(zhang.getName()); // "Employee name: ZhangSan"

目前为止,我们已经修正了在第一章手工实现继承的种种弊端。 通过我们自定义的jClass函数来创建类和子类,通过原型方法init初始化数据, 通过实例属性base来调用父类的原型函数。

唯一的缺憾是调用父类的代码太长,并且不好理解, 如果能够按照如下的方式调用岂不是更妙:

var Employee = jClass(Person, {init: function(name, employeeID) {// 如果能够这样调用,就再好不过了this.base(name);this.employeeID = employeeID;}});

优化jClass函数

// 当前是否处于创建类的阶段var initializing = false;function jClass(baseClass, prop) {// 只接受一个参数的情况 - jClass(prop)if (typeof (baseClass) === "object") {prop = baseClass;baseClass = null;}// 本次调用所创建的类(构造函数)function F() {// 如果当前处于实例化类的阶段,则调用init原型函数if (!initializing) {// 如果父类存在,则实例对象的baseprototype指向父类的原型// 这就提供了在实例对象中调用父类方法的途径if (baseClass) {this.baseprototype = baseClass.prototype;}this.init.apply(this, arguments);}}// 如果此类需要从其它类扩展if (baseClass) {initializing = true;F.prototype = new baseClass();F.prototype.constructor = F;initializing = false;}// 覆盖父类的同名函数for (var name in prop) {if (prop.hasOwnProperty(name)) {// 如果此类继承自父类baseClass并且父类原型中存在同名函数nameif (baseClass &&typeof (prop[name]) === "function" &&typeof (F.prototype[name]) === "function") {// 重定义函数name - // 首先在函数上下文设置this.base指向父类原型中的同名函数// 然后调用函数prop[name],返回函数结果// 注意:这里的自执行函数创建了一个上下文,这个上下文返回另一个函数,// 此函数中可以应用此上下文中的变量,这就是闭包(Closure)。// 这是JavaScript框架开发中常用的技巧。F.prototype[name] = (function(name, fn) {return function() {this.base = baseClass.prototype[name];return fn.apply(this, arguments);};})(name, prop[name]);} else {F.prototype[name] = prop[name];}}}return F;};此时,创建类与子类以及调用方式都显得非常优雅,请看: var Person = jClass({init: function(name) {this.name = name;},getName: function() {return this.name;}});var Employee = jClass(Person, {init: function(name, employeeID) {this.base(name);this.employeeID = employeeID;},getEmployeeID: function() {return this.employeeID;},getName: function() {return "Employee name: " + this.base();}});var zhang = new Employee("ZhangSan", "");console.log(zhang.getName()); // "Employee name: ZhangSan"

至此,我们已经创建了一个完善的函数jClass, 帮助我们在JavaScript中以比较优雅的方式实现类和继承。

在以后的章节中,我们会陆续分析网上一些比较流行的JavaScript类和继承的实现。 不过万变不离其宗,那些实现也无非把我们这章中提到的概念颠来簸去的“炒作”, 为的就是一种更优雅的调用方式。

推荐整理分享JavaScript 继承详解(三)(js继承的方法),希望有所帮助,仅作参考,欢迎阅读内容。

JavaScript 继承详解(三)(js继承的方法)

文章相关热门搜索词:js中的继承,js继承的三种方法,js里的继承,js继承的方法,js继承的方法,js中的继承,javascript继承原理,js继承的三种方式,内容如对您有帮助,希望把文章链接给更多的朋友!

JavaScript 继承详解(四) ClassicalInheritanceinJavaScript。Crockford是JavaScript开发社区最知名的权威,是JSON、JSLint、JSMin和ADSafe之父,是《JavaScript:TheGoodParts》的作者。现在是Yahoo的资深J

一个cssQuery对象 javascript脚本实现代码 /***@authorSupersha*@QQ:*/varcssQuery={//parent:用于存储当前节点的父节点的引用parent:document,select:function(selectorStr){varselectors=selectorStr.split("");//分隔字符串f

javascript Base类 包含基本的方法 scripttype="text/javascript"functionBase(){}//根抽象类Base.toBase=function(){//将一个对象转化成Base类的实例的方法returnnewBase();}Base.inherit=function(parent){//用于继承Base

标签: js继承的方法

本文链接地址:https://www.jiuchutong.com/biancheng/386480.html 转载请保留说明!

上一篇:JavaScript 继承详解(二)(javascript中继承)

下一篇:JavaScript 继承详解(四)(js中的继承)

  • 增值税税率是怎么规定的
  • 加计扣除产生的滞纳金
  • 发票作废了清单一样怎么重新使用
  • 没有发票可以先报销吗
  • 销售补差怎么做分析
  • 存货清查的结果
  • 公司做帐成本发票怎么开
  • 资源税代扣代缴怎么操作
  • 预提费用 会计准则
  • 合同副本和正本区别
  • 公益捐赠税前扣除凭证
  • 长期待摊费用当月增加当月摊销吗
  • 小微企业劳务费税率
  • 出口退税信息系统
  • 减税降费新政策解读
  • 公司增资需要什么
  • 房产税征收范围包括商铺吗
  • 为什么负债不等于亏损
  • 公积金贷款利息现在是多少
  • 企业业务招待费标准规定
  • 企业季度所得税可以弥补以前年度亏损吗
  • 发票冲红后是否可以重开
  • 代扣代缴增值税怎么做账
  • mac系列电脑
  • centos apache配置文件
  • 为什么入账价值不包括增值税
  • 专利权的期限是指专利权的实际有效期限
  • win10蓝牙无法连接,有解决方法吗
  • 车辆购置税相关知识
  • 修改gradle版本
  • 没有以前年度损益调整属于哪类科目
  • 圣安德鲁斯市
  • 增值税发票可以作废重新开吗
  • 出口退税款的账务怎么做
  • setdo指令
  • 一般纳税人怎么申请纳税
  • 网上变更财务负责人
  • 记账凭证摘要怎么填写
  • 利息补缴税款加收利息计算
  • 中药和中药饮片有区别吗
  • 工厂加工外包
  • sql2005服务无法启动sql安装方法
  • 加班餐费和误餐费的区别
  • 认缴意思
  • 无偿借贷什么意思
  • 小规模收入怎么算
  • 收到季度房租需要分摊吗
  • 股权转让中土地要否缴纳增值税
  • 产品检验费怎样计算
  • 购入固定资产的现金流量项目
  • 企业自建厂房需要有资质吗
  • 筹建期间取得的利息收入 企业所得税
  • 应纳税额与应纳所得额
  • 滞纳金的收取依据
  • 管理费用中的水电费怎么记账
  • 发票备注栏填写内容
  • 捐赠利得的会计科目
  • 暂估入账后续处理
  • sql取两个时间的间隔天数
  • vista win
  • win8cp
  • win10装360安全卫士
  • 苹果mac怎样
  • win8鼠标设置在哪
  • 如何查看windows使用痕迹
  • opengl绘制坐标轴
  • unity的vector3
  • js选择框全选
  • es6十大特性
  • 教你用纸折一只会跳的小兔子,非常好玩,小朋友都喜欢
  • unity动画教程
  • [置顶] Deniz Saypinar
  • 安卓开源组件
  • python 字符串
  • android toolbar menu
  • 电子税务局领取纸质发票的步骤
  • 划拨土地评估价
  • 印花税计征周期
  • 江苏税务局电子
  • 煤矸石占地需要哪些手续
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设