您的位置:首页 > Web前端 > JavaScript

js继承的实现方式

2016-01-18 20:06 597 查看
直接上代码:

//1.对象冒充
function Parent(username){
this.username = username;
this.hello = function(){
console.log("hello, I am "+this.username);
};
}
function Child1(username,password){
//通过以下3行实现将Parent的属性和方法追加到Child中,从而实现继承
//1.this.method是作为一个临时属性,并且指向Parent所指向的对象
//2.执行this.method方法,即执行Parent所指向的对象函数
//3.销毁this.method属性,即此时Child就已经拥有Parent的所有属性和方法
this.method = Parent;
this.method(username);
delete this.method;

this.password = password;
this.pass = function(){
console.log(this.password);
}
}
//测试
var parent1 = new Parent("zhangsan1");
var child1 = new Child1("lisi1","123456");
parent1.hello(); //hello, I am zhangsan1
child1.hello(); //hello, I am lisi1
child1.pass(); //123456
console.log(child1 instanceof(Parent)); //false
console.log("========================");

//2.call方法继承
function Child2 (username,password){
Parent.call(this,username);

this.password = password;
this.pass = function(){
console.log(this.password);
}
}
//测试
var parent2 = new Parent("zhangsan2");
var child2 = new Child2("lisi2","123456");
parent2.hello(); //hello, I am zhangsan2
child2.hello();  //hello, I am lisi2
child2.pass();  //123456
console.log(child2 instanceof(Parent)); //false
console.log("========================");
//3.apply方法继承
function Child3(username,password){
Parent.apply(this,[username]);

this.password = password;
this.pass = function(){
console.log(this.password);
}
}
//测试
var parent3 = new Parent("zhangsan3");
var child3 = new Child2("lisi3","123456");
parent3.hello(); //hello, I am zhangsan3
child3.hello();  //hello, I am lisi3
child3.pass();  //123456
console.log(child3 instanceof(Parent));  //false
console.log("========================");

//4.原型链继承
function Parent4(username){
this.username = username;
}
Parent4.prototype.hello = function(){
console.log("hello, I am "+this.username);
}

function Child4(username,password){
this.username = username;//必须初始化
this.password = password;
}
Child4.prototype = new Parent4();
Child4.prototype.pass = function(){
console.log(this.password);
}

//测试
var parent4 = new Parent4("zhangsan4");
var child4 = new Child4("lisi4","123456");
parent4.hello();  //hello, I am zhangsan4
child4.hello();  //hello, I am lisi4
child4.pass();  //123456
console.log(child4 instanceof(Parent4));  //true
console.log("----");
console.log(parent4.__proto__ === Parent4.prototype); //true
console.log(Parent4.prototype.__proto__ === Object.prototype);  //true
console.log(Object.prototype.__proto__ );  //null
console.log("========================");

//5.混合方式,混合了call,原型链方式
function Parent5(username){
this.username = username;
}
Parent5.prototype.hello = function(){
console.log("hello I am "+this.username);
}

function Child5(username,password){
Parent5.call(this,username);
this.password = password;
}

Child5.prototype = new Parent5();
Child5.prototype.pass = function(){
console.log(this.password);
}

//测试
var parent5 = new Parent5("zhangsan5");
var child5 = new Child5("lisi5","123456");
parent5.hello(); //hello I am zhangsan5
child5.hello();  //hello I am lisi5
child5.pass();  //123456
console.log(child5 instanceof(Parent5));  //true

//6.util.inherits(constructor,superConstructor)继承
function Parent6(username) {
this.username = username;
this.sayHello = function(){
console.log('hello I am ' + this.username);
};
};

Parent6.prototype.showUsername = function(){
console.log(this.username);
}

function Child6(username,password) {
this.username = username;
this.password = password;
}

util.inherits(Child6, Parent6);
//测试
var base = new Parent6('zhangsan6');
base.showUsername();
base.sayHello();
console.log(base);
var child6 = new Child6('lisi6','123456');
child6.showUsername();
//child6.sayHello();
console.log(child6);
//这种方式只会继承原型链上的函数/属性,而构造函数内部的函数和属性不会被继承
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: