javascript中的构造函数和继承

时间：2021-05-24 11:16:28

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('\n ow1:');
ow1.showName();
ow1.showSex();
ow1.showJob();
console.log(Worker.prototype);

相关文章