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); //这种方式只会继承原型链上的函数/属性,而构造函数内部的函数和属性不会被继承
相关文章推荐
- 经常使用的js小方法
- js-数据转换
- 理解js原型和原型链
- document.body和document.body的区别和兼容性&&js自定义弹框的方法
- js中将两个日期字符串相减 获得天数
- Play FrameWork JSON操作小结
- 合并排序 js版本
- 新手学JavaScript(三)----超酷消息警告框插件(SweetAlert)
- Web基础系列三、JavaScript(页面行为)
- JavaScript函数补完:sort()排序
- js/javascript中判断对象类型
- angular js中service
- js javascript:void(0) 真正含义
- fastJSON使用
- 动态加载JS脚本到HTML
- js003-基本概念
- js002-在HTML中使用JavaScript
- js001-JavaScript简介
- alibaba的fastjson
- js中的String.format