首页 > 代码库 > js的继承问题
js的继承问题
今天我们来说说继承的问题吧,以前js的继承总是弄的我头疼死了,现在总算是弄明白了啥是继承,先来个简单的例子:
方式一:
function createPerson(name,age)
{
this.name=name;
this.age=age;
this.showName=function()
{
alert(this.name);
}
}
var p1=new createPerson(‘one‘,18);
var p2=new createPerson(‘two‘,20);
alert(p1.showName==p2.showName) //false;
想知道这个地方为啥弹出来的是false吗? 我来解释解释吧
这个地方,var p1=new createPerson(‘one‘,18);的时候 ,就会执行 createPerson这个函数,我们用new createPerson相当于:
function createPerson(name,age)
{
//var this=new Object() //用new createPerson相当于系统替咱们新建了一个对象;
this.name=name;
this.age=age;
this.showName=function()
{
alert(this.name);
}
return this; //用new createPerson相当于系统替咱们返回了这个对象;
}
所以,执行完var p1=new createPerson(‘one‘,18);的时候,就创建了一个p1对象,这个对象上有name和age属性,还有一个showName方法;执行完var p2=new createPerson(‘two‘,20);的时候,就会创建一个p2对象,这个对象也有name和age属性,还有showName方法;虽然执行alert(p1.showName)和alert(p2.showName)的时候,弹出的内容是一样的,但是这里this指的是不同的对象,一个是p1对象,一个是p2对象,p1和p2是不同的2个对象,所以alert(p1.showName==p2.showName) //false;方式二:
function createPerson(name,age)
{
this.name=name;
this.age=age;
}
createPerson.prototype.showName=function()
{
alert(this.name);
}
var p1=new createPerson(‘one‘,18);
var p2=new createPerson(‘two‘,20);
alert(p1.showName==p2.showName) //true;
在这个例子中,用构造函数createPerson添加属性,然后用原型添加方法,当执行alert(p1.showName==p2.showName)这个的时候,由于p1和p2都没有showName方法,所以就去找他们的父级createPerson.prototype.showName,在他们的父级上找到了showName方法,而且p1和p2都是同一个父级,由于p1和p2都继承了父级的showName方法,所以alert(p1.showName==p2.showName) //true;