javascript中的构造函数和继承

1.第一节

使用工厂模式创建一个构造函数CreatePerson

function CreatePerson(name,sex){//构造函数:用于构造对象 可以说在js里类就是构造函数

//1.原料

var obj=new Object();

//2.加工

obj.name=name;

obj.sex=sex;

obj.showName=function(){

console.log(this.name);

}

obj.showSex=function(){

console.log(this.sex);

}

//3.出厂

return obj;

}

 

var p1=CreatePerson('ryan','boy');//问题1：不是用new构造对象，第二节解决用new构造对象

var p2=CreatePerson('lili','girl');

 

p1.showName();

p1.showSex();

p2.showName();

p2.showSex();

 

console.log(p1.showName==p2.showName);//问题2：每个对象都有一套自己的函数 false

2.第二节

function CreatePerson(name,sex){

//假想的系统内部工作流程

//var this = new Object();省略此语句

this.name=name;//使用this指定构造函数的name属性

this.sex=sex;

this.showName=function(){//使用this指定构造函数的showName属性

console.log(this.name);

}

this.showSex=function(){

console.log(this.sex);

}

//假想的系统内部工作流程

//return this;省略此语句

}

 

var p1=new CreatePerson('ryan','boy');//使用new构造对象或者叫构造实例

var p2=new CreatePerson('lili','girl');

 

p1.showName();

p1.showSex();

p2.showName();

p2.showSex();

 

console.log(p1.showName==p2.showName);//每个对象都有一套自己的函数 false

3.第三节

function CreatePerson(name,sex){ 

//假想的系统内部工作流程

//var this = new Object();

this.name=name;

this.sex=sex;

//假想的系统内部工作流程

//return this;

}

//将showName方法定义到构造方法CreatePerson的prototype上， //这样的好处是，通过构造函数生成的实例所拥有的方法都是指向一个函数的索引，这样可以节省内存


CreatePerson.prototype.showName=function(){//构造函数CreatePerson的prototype原型属性指定另一个对象，即prototype对象

console.log(this.name);

}

CreatePerson.prototype.showSex=function(){

console.log(this.sex);

}

//通过构造函数生成的实例p1和p2所拥有的方法showName和showSex都是指向一个函数的索引，这样可以节省内存


var p1=new CreatePerson('ryan','boy');

var p2=new CreatePerson('lili','girl');

 

p1.showName();

p1.showSex();

p2.showName();

p2.showSex();

 

console.log(p1.showName==p2.showName);//每个对象共用一套函数(原型的函数)

4.第四节

function Person(name,sex){ //构造函数:用于构造对象

 

this.name=name;

this.sex=sex;

this.showName=showName;//不使用原型定义方法：

this.showSex=showSex;

}

function showName(){

console.log(this.name);

}

function showSex(){

console.log(this.sex);

}

//继承

function Worker(name,sex,job){

Person.call(this,name,sex);

this.job=job;

}

for(var i in Person.prototype){

Worker.prototype[i]=Person.prototype[i];

}

Worker.prototype.showJob=function(){

console.log(this.job);

}

 

var p1=new Person('ryan','boy');

var p2=new Person('lili','girl');

var ow1=new Worker('cccc','girl','工程师');

 

p1.showName();

p1.showSex();

p2.showName();

p2.showSex();

ow1.showJob();

 

//p1和p2两个对象共用一个showName函数,这样就可以节省内存

console.log(p1.showName==p2.showName);

console.log(p1.showName==ow1.showName);

 

5.第五节--继承

function Person(name,sex){

//假想的系统内部工作流程

//var this = new Object();

this.name=name;

this.sex=sex;

//假想的系统内部工作流程

//return this;

}

Person.prototype.showName=function(){

console.log(this.name);

}

Person.prototype.showSex=function(){

console.log(this.sex);

}

 

//继承

function Worker(name,sex,job){

//以下的this是new出来的Worker对象

//调用父级的构造函数，为了继承属性

Person.call(this,name,sex);

this.job=job;

};

//原型链 通过原型来继承父级的方法

Worker.prototype=Person.prototype;//问题：两个构造函数其实是同一个

Worker.prototype.showJob=function(){

console.log(this.job);

};

 

var ow1=new Worker('ryan','boy','打杂的');

ow1.showName();

ow1.showSex();

ow1.showJob();

console.log(Person.prototype);

console.log(Person.prototype.showJob);//Person多了showJob方法

6.第六节--继承

//构造函数:用于构造对象 可以说在js里类就是构造函数

function Person(name,sex){

//假想的系统内部工作流程

//var this = new Object();

this.name=name;

this.sex=sex;

//假想的系统内部工作流程

//return this;

}

Person.prototype.showName=function(){

console.log(this.name);

}

Person.prototype.showSex=function(){

console.log(this.sex);

}

 

//继承

function Worker(name,sex,job){

//以下的this是new出来的Worker对象

//构造函数伪装 调用父级的构造函数，为了继承属性

Person.call(this,name,sex);

    //使用Person对象代替this对象(Worker对象)，这样Worker中就有Person的属性和方法了。

    //name,sex两个参数是Person对象的参数

this.job=job;//定义Worker对象自己的属性

};

//原型链 通过原型来继承父级的方法

// Worker.prototype=Person.prototype; 不能用这种引用的方式

for(var i in Person.prototype){//解决第四节中的问题，两个构造函数不相同了。

Worker.prototype[i]=Person.prototype[i];

}

Worker.prototype.showJob=function(){

console.log(this.job);

};

 

var op1=new Person('john','girl');

var ow1=new Worker('ryan','boy','打杂的');

 

op1.showName();

op1.showSex();

//op1.showJob();//已经没有这个方法了。

console.log(Person.prototype);

 

console.log(' ow1:');

ow1.showName();

ow1.showSex();

ow1.showJob();

console.log(Worker.prototype);