js继承的实现方式

直接上代码:

//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);
//这种方式只会继承原型链上的函数/属性,而构造函数内部的函数和属性不会被继承
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值