JavaScript继承详解（三）

最新推荐文章于 2022-08-31 13:16:13 发布
最新推荐文章于 2022-08-31 13:16:13 发布
阅读量419 收藏
点赞数
文章标签： javascript prototype 类 继承

原文来自  博客园 -三生石 JavaScript继承详解（三）

这里只是做资料整理 详情请见原文


在第一章中，我们使用构造函数和原型的方式在JavaScript的世界中实现了类和继承， 但是存在很多问题。这一章我们将会逐一分析这些问题，并给出解决方案。

注：本章中的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", "1234");
console.log(zhang.getName()); // "ZhangSan"

修正constructor的指向错误

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

var zhang = new Employee("ZhangSan", "1234");
console.log(zhang.constructor === Employee); // false
console.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", "1234");
console.log(zhang.constructor === Employee); // true
console.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", "1234");
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", "1234");
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", "1234");
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() {
		// 调用父类的原型函数getName
		return "Employee name: " + this.base.getName.apply(this);
	}
});

var zhang = new Employee("ZhangSan", "1234");
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并且父类原型中存在同名函数name
			if (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", "1234");
console.log(zhang.getName()); // "Employee name: ZhangSan"

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

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

wtmanutd
关注
JavaScript 继承详解（三）
10-29
在JavaScript编程中，继承是面向对象编程的核心概念之一，它允许开发者构建出层级化的对象结构。在JavaScript中实现继承有多种方法，其中构造函数和原型链的方式是较为传统的一种，但在实际应用中存在一些问题和陷阱...
JavaScript 继承详解（一）
10-29
JavaScript 继承详解（一） 在软件开发领域，面向对象编程是一种常见的编程范式，它以类和实例作为核心概念。对于熟悉C++、C#、Java等传统面向对象语言的开发者来说，类用于定义一组共享行为和属性，而实例则是类的...
JavaScript继承详解（五）
weixin_34406796的博客
07-14 127
  文章截图 - 更好的排版   在本章中，我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance。 John Resig作为jQuery的创始人而声名在外。是《Pro JavaScript Techniques》的作者，而且Resig将会在今年秋天推出一本书《JavaScript Secrets》，非常期待。 ...
在Javascript面向对象设计一
u012402926的专栏
10-26 358
在Javascript面向对象设计一——工厂模式 中介绍了使用CreateEmployee()函数创建员工类。ECMAScript中的构造函数可以用来创建特定类型的对象，如Object和Array这样的原生构造函数，在运行时会自动出现在执行环境中，此外也可以创建自定义的构造函数，从而创建自定义对象类型的属性和方法。我们将使用构造函数模式将工厂模式进行改写。 　　function Employee
【创建包：employee，完成如下功能】1． 创建一个员工类(Employee)，其中包括：1） 4个私有属性：员工姓名(name)、员工年龄(age)、员工职位(position)、工资
qq_64001869的博客
08-31 3774
【创建包：employee，完成如下功能】1． 创建一个员工类(Employee)，其中包括：1） 4个私有属性：员工姓名(name)、员工年龄(age)、员工职位(position)、工资
Function Employee Demo
kongkong的专栏
04-22 384
Employee对象 public class Employee { private String id; private String name; private int age; private String hobby; private String address; public Employee() { this....
解析 this.initialize.apply(this, arguments)
weixin_30725315的博客
06-24 264
一、 起因 那天用到prototype.js于是打开看看，才看几行就满头雾水，原因是对js的面向对象不是很熟悉，于是百度+google了一把，最后终于算小有收获，写此纪念一下^_^。 prototype.js代码片段 代码如下:var Class = { create: function() { return function() { this.i...
js语句和函数
ZLIKEQ的博客
06-29 518
1.变量在函数外的声明，并可在脚本的任意位置访问。 A 局部变量 B 全局变量 C 使用var关键字声明的变量 D 使用new关键字得到的对象变量 正确答案：B 答案解析：全局变量在定义之后，所有的地方都可以用。 [单选题] 2.分析下面的JavaScript代码段： function employee(name,code) { this.name="wangli"; this.code="A001"; } newemp=new employee("zhangming",'A002').
包装类
m0_46201220的博客
05-02 236
包装类 创建基本包装类型之后,JS中的基本类型值可以被当作对象来访问。但是undefined，null没有。 var num = new Number(123); var str = new String('abc'); var bol = new Boolean(true); var obj = new Object(); ...
employee
weixin_30314631的博客
11-11 318
function employee(name,age){ //JS里面无论什么类型都是function this.name=name; this.age=age; } employee.prototype={ constructor:employee, sayName:func...
JS 继承(类式 与 原型式)
weixin_34238633的博客
10-12 82
1. /* -- 类式继承 -- *///先声明一个超类 function Person(name) { this.name = name;}//给这个超类的原型对象上添加方法 getName Person.prototype.getName = function() { return this.name;}//实例化这个超var a = new Person('Darren1')co...
经典笔试题-Javascript中，对象person有name属性，写出两种获取name属性的方法
逍遥云恋
11-18 1322
<!--第一种：使用“ . ”来访问对象属性--> Person.name <!--第二种：使用“[]”来访问对象属性--> Person[name]
深刻理解JavaScript基于原型的面向对象
4 the simplicity and beauty
09-10 346
  主题一、原型   一、基于原型的语言的特点   1 只有对象,没有类;对象继承对象,而不是类继承类。   2  “原型对象”是基于原型语言的核心概念。原型对象是新对象的模板，它将自身的属性共享给新对象。一个对象不但可以享有自己创建时和运行时定义的属性，而且可以享有原型对象的属性。   3 除了语言原生的顶级对象，每一个对象都有自己的原型对象，所有对象构成一个树状的层级系统...
ES6学习之对象、类&原型
皮蛋很白的博客
04-26 359
script标签属性 async 当引入的外部脚本无需等待页面解析，又不依赖其他脚本独立运行，使用async异步加载。 defer 当引入的外部脚本无需等待页面，但是以来其他脚本，使用defer将关联的脚本按顺序加载。 ...
继承于原型
zhangting8_的博客
11-08 147
function Employee () { this.name = ""; this.dept = "general"; this.age = 19; } //Employee.prototype.age = 19; function Manager() { Employee.call(this); this.reports = []; } Manager.prototype...
JavaScript组合继承详解与实例
"本文主要探讨JavaScript中的组合继承，包括其概念、优势以及示例代码，同时提到了原型式继承作为补充。" JavaScript是一种基于原型的面向对象编程语言，它的继承机制有着独特的实现方式。组合继承是JavaScript中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值