此讲通过一道例题来为大家讲解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]);
实现的功能一样.