位置: 编程技术 - 正文

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中的继承)

  • 净利润是指税前利润
  • 处置投资性房地产对损益的影响
  • 小规模企业所得税计算
  • 预计净残值的计算公式为
  • 增值税减免税款怎么算
  • 企业所得税清算备案日和结束日怎么填
  • 政府单位临聘人员辞退
  • 核定征收的固定资产包括
  • 房屋租赁收入如何征税?
  • 商业承兑汇票托收凭证怎么做分录
  • 成本未取得发票
  • 社保基数超过工资
  • 出售办公用房要交什么税
  • 企业工会经费不足,可以向企业拨款吗
  • 30万的装修工程利润一般是多少
  • 自有房产墙面出租,需要缴纳房产税吗?
  • 物流企业的大宗商品仓储用地是什么意思
  • 个人偶然所得捐赠扣除标准
  • 承兑跨省是不是不能用
  • 解除租赁合同可以退押金吗
  • 坏账准备增加记什么方
  • 华为手机麦克风在哪里
  • 电脑蓝屏代码0x0000003B
  • 企业从政府取得的经济资源均应当
  • php不同用户登录不同页面
  • 押金收不回的会计分录
  • 其他应付款的会计分录怎么写
  • lnmgr.exe是什么
  • smart制作
  • 威尼斯海滩滑板场
  • 企业清算时
  • 增值税专用发票查询系统官方网站
  • php函数的定义和调用
  • 结转制造费用用什么科目
  • 个人简历html网页代码含效果图
  • 从零开始文章
  • 2手房价格
  • uniapp支付宝支付开发
  • 单位没有残疾人申报怎么申报
  • 银行同业利率
  • python怎么设置窗口界面
  • 农产品购进时的会计分录
  • 电子发票会自动上传吗
  • 季度利润表是累计数吗
  • 股权转让所得如何申报个税
  • 年末已经结账了怎么入账
  • 一般纳税人认定标准
  • 会计账簿有哪些作用
  • 待处理财产损溢借方是增还是减
  • 运费发票没到可以先计提吗
  • 应交税费科目怎么调整
  • 对外支付3万美元怎么算
  • 企业支付宝扣费
  • 增值税结转到本年利润吗
  • 记账凭证的基本要素包括哪些
  • 商业零售企业商品进销差价
  • 消费税的科目设置在哪里
  • 主键自增长的数据如何导入
  • mysql允许字段为空
  • mysql安装教程5.5安装好了在哪使用
  • mysql 5.7.33安装
  • kvm虚拟机是什么
  • gwservice进程
  • ubuntu 8.04.1 LTS 下的cpu温度监控软件lm-sensors
  • xp显示文件后缀怎么设置
  • linux卸载安装
  • 登录ip怎么查位置
  • 3d动态锁屏壁纸下载
  • 点击滑块是什么意思
  • android aidl binder
  • nodejs中间层的作用有哪些
  • js asc
  • android installer apk
  • javascript的理解
  • 东莞税务申报日期
  • 北京朝阳区地税服务大厅
  • 亦庄地税局税务局营业大厅
  • 普通发票冲红怎么报税
  • 江苏地税每月社保多少钱
  • 财政部国家税务总局2021年40号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设