位置: 编程技术 - 正文

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

  • 工商年报资产状况纳税总额怎么计算?
  • 小规模纳税人开普票免税
  • 利润和营收哪个更重要
  • 已经勾选确认的发票可以取消认证吗
  • 原材料预付款如何做账
  • 办理外汇账户开户手续
  • 机关单位工会经费的来源包括
  • 养老保险缴纳比例是固定的吗
  • 实收资本叫别人代缴可以不
  • 开具的发票是否为印花税的应税凭证?
  • 企业支付的产品广告费应计入什么账户借方
  • 小规模和一般纳税人的区别
  • 存货盘盈与盘亏
  • 退税详细教程
  • 小规模纳税人补缴增值税
  • 资本公积要交印花税账簿税吗
  • 总公司出货分公司怎么办
  • 期交保费资金占用年限计算公式
  • 房地产企业土地出让金抵减销项税额
  • 新会计准则下的会计科目
  • windows所有应用
  • 股份制企业的特征主要是什么
  • 小规模餐饮业怎样报税减免
  • mac电脑遇到问题而重新启动
  • 纳税调整需要调年度报表嘛
  • PHP:oci_fetch_row()的用法_Oracle函数
  • mce是什么文件格式
  • 金融资产的会计处理方法
  • 犹他州现神秘物体
  • php打包网站并在哪里打开
  • zen+框架
  • 资产负债表中其他流动资产包括哪些科目
  • 货物退回会计分录怎么做
  • 激光器原理及应用
  • vue快速入门与实战开发
  • 结转出口退税分录
  • phpcms官网打不开
  • 一联发票可以开多少钱
  • 回购证券标的
  • 公司月报和季报
  • 企业所得税的营业收入包括营业外收入吗
  • Access数据库文件以什么作为文件后缀名
  • mysql中游标的作用
  • sqlserver游标的使用
  • 一般计税方法预交增值税
  • 用友软件接口
  • 预付卡充值可以退吗
  • 开办费账务处理实操案例
  • 暂估金额为含税金额
  • 融资租赁固定资产的账务处理实例
  • 金税盘忘记清卡了怎么办
  • 存货跌价准备怎么结转成本
  • sql server使用教程
  • fedora内核版本
  • freebsd使用wifi
  • windows 运行
  • win8.1笔记本
  • mac双系统怎么调整磁盘空间
  • linuxvi编辑器的用法
  • win7睡眠唤醒设置密码
  • WIN7系统如何设置开机密码和屏保密码
  • [置顶] 《借.住.情.缘》
  • AndroidAnnotations 自定义控件 ant编译 找不到类
  • Web2.0下XHTML+CSS 设计需要注意的地方小结
  • angularjs1.5
  • 刨根问底造句
  • 关于全局变量和局部变量说法不正确的是
  • js 构建树
  • js获取当前时间
  • jquery增删改查方法
  • js对象用法
  • androidstudio性能检测工具
  • 日本消费税是什么
  • 河南省郑州市巩义市籍贯怎么写
  • 贵州省税务网上缴费平台
  • 打单子的打印机能否打a4的纸
  • 潍坊税务局上班时间表
  • 教育费附加申报表
  • 四川税务法人实名采集
  • 请问报考国家税务局难吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设