JS的继承和使用方法

此讲通过一道例题来为大家讲解JS的继承和使用方法

题目要求:

定义一个动物类，包含动物性别、动物年龄属性,以及一个说明基本信息的方法;
定义一个狗类并继承动物类，自己包含狗种类属性，以及一个狗吠的方法;
创建一条哈士奇，说明狗的基本信息并完成狗吠；
定义一个猫类并继承动物类，自己包含猫种类属性，以及一个猫叫的方法;
创建一条波斯猫，说明猫的基本信息并完成猫叫

代码示例如下:

function Animal(sex,age)
{
	this.sex=sex;
	this.age=age;
}
Animal.prototype.instruction=function()
	{
		console.log(this.sex+' 我属于动物界,这是我的性别');
	}
function Dog(sex,age,zhong,bark)
{
	Animal.call(this,sex,age);
	this.zhong=zhong;
	this.bark=bark;
}
Dog.prototype=new Animal();
Dog.prototype.info=function()
	{
		console.log(this.zhong+' 我是哈士奇');
		console.log(this.age+' 我的年龄');
		console.log(this.bark+' 我的叫声');
		console.log('==================');
	}
function Cat(sex,age,zhong,bark)
{
	Animal.call(this,sex,age);
	this.zhong=zhong;
	this.bark=bark;
}
Cat.prototype=new Animal();
Cat.prototype.info=function()
	{
		console.log(this.zhong+' 我是CAT');
		console.log(this.age+' 我的年龄');
		console.log(this.bark+' 我的叫声');
	}
var haha=new Dog('male',13,'haha','wangwang');
haha.instruction();
haha.info();
var bosi=new Cat('female',30,'bosi','maiomiao');
bosi.instruction();
bosi.info();

运行结果如下:

male 我属于动物界,这是我的性别
 haha 我是哈士奇
 13 我的年龄
 wangwang 我的叫声
 ==================
 female 我属于动物界,这是我的性别
 bosi 我是CAT
 30 我的年龄
 maiomiao 我的叫声

首先我们来讲一下这段代码:

Animal.prototype.instruction=function()
	{
		console.log(this.sex+' 我属于动物界,这是我的性别');
	}

在JS所有的类当中都有一个prototype属性,如果为JS类的prototype属性增加属

性、方法,则可以看作是对原有类的扩展.我们可以理解为:增加了prototype属性的

类继承了原有的类——这就是JS提供的一种伟继承机制.

此处通过Animal.prototype.instruction=function()为Animal函数动态增加了一个

instruction方法,同时instruction方法又继承了来自Animal函数的

类属性:this.sex=sex;和this.age=age;

其次我们再来看一下这段代码:`

Dog.prototype=new Animal();

JS类的prototype属性代表了该类的原型对象,如果将该类的prototype属性设为父

亲实例,可实现JS语言的继承.次处的Dog 实例就继承了来自Animal的instruction方
法.

最后我们再来看一下这段:

Animal.call(this,sex,age);

在Dog 和Cat实例中使用call方法来调用Animal函数,使得Dog 和Cat实例可以使用

Animal的this.sex=sex;和this.age=age;的实例属性,是用call方法来调用父亲函数

也是JS中的一种伪继承的实现方法.

此句代码可以改为:Animal.apply(this,[sex,age]);

实现的功能一样.