JavaScript面向对象之继承

时间:2022-08-10 19:51:35

---恢复内容开始---

近段时间研究了一下JavaScript的面向对象思想,总结了一下继承,希望能对大家有所帮助.接下来我想以实际的示例来给大家讲解一下继承,继承一般有两种方式,一种是对象冒充,一种是原型链,接下来在代码中都会讲到,同时通过画图来说明原型链的原理,在讲解时也可以加深自己的印象,如何我理解有的话还希望大家能够指出了,大家互相学习一起进步。好了话不多说,现在开始:

 

首先我们来创建一个函数名为person的函数,给函数的原型对象设置两个属性hello,height,代码如下:

 

function person(name,age){

    this.name=name;

    thia.age=age;

}

person.weight='50kg';

person.prototype.hello=function(){console.log("my name is"+this.name+";")};

person.prototype.Height='180cm';

 

第一个类我们已经创建好后,我们就将第一个person类当做父类,为它创建一个子类函数 student,代码如下:

 

function student(name,age,score){

     person.call(this,name,age);

     this.score=score;

}

在这里我们使用了对象冒充的方法来继承person的name,age两个属性, 接下来我们来使用原型的方式将person的原型属性也继承下去:

 

//student.prototype=new person("lcp","18");

student.prototype=Object.create(person.prototype);

student.prototype.constructor=student;

student.prototype.hi=function(){console.log("my name is "+this.name+",my score is "+this.score+";")};

 

在上面代码中我们使用了Object.create(person.prototype)方法 创建了一个原型指向参数对象的空对象,然后赋值给子类原型,这样就达到了类似与Java中的继承一样的效果,同时还为子类原型对象添加了一个hi()方法,接下来来调用一下:

 

var stu1=new student("lcp","18","99");

stu1    //结果wei: student{name:"lcp",age:"18",score:"99"}

stu1.hello(); // 结果为 :my name is lcp;

stu1.hi();  // 结果为 :my name is lcp,my score is 99 ;

 

由此可以看出对象stu1具有person的变量和方法,得到了很好的继承;

下面是我根据对上面的代码理解画的一个原型链继承图解:

 

 

JavaScript面向对象之继承

在图中:

      对象stu1 是通过new方法获取的对象,所以stu1对象的原型以指针的方式指向student方法的prototype属性,在stu1对象中可以通过修改__proto__属性对student方法的prototype对象进行新增属性,但是不可修改和删除,当要进行修改时,js会在stu1对象中创建一个与你要修改的属性名相同的属性,然后赋值,也就是说子类不可修改父类原型链中的属性值,但可以为它新增属性;根据原型链一直到达顶端就是Object的原型,所以每个对象中都会有一些看不到的方法可以调用,比如:tostring(),valueof().....等等,原因就是因为原型链顶端为Object的原型!

 

---恢复内容结束---