主页 > 前端 > javascript >
来源:未知 时间:2016-03-23 09:18 作者:xxadmin 阅读:次
[导读] 开篇 从严格意义上说,javascript并不是一门真正的面向对象语言。这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默...
开篇 为何需要利用javascript实现继承 从一个简单的需求开始 function Person (name, age) { this.name = name; this.age = age; } Person.prototype.say = function(){ console.log('hello, my name is ' + this.name); }; function Man() { //my own properties } 下面介绍几种主流的继承方式。 1.原型链继承 function Person (name, age) { this.name = name; this.age = age; } Person.prototype.say = function(){ console.log('hello, my name is ' + this.name); }; function Man() { } Man.prototype = new Person('pursue'); var man1 = new Man(); man1.say(); //hello, my name is pursue var man2 = new Man(); console.log(man1.say === man2.say);//true console.log(man1.name === man2.name);//true 这种继承方式很直接,为了获取Person的所有属性方法(实例上的和原型上的),直接将父类的实例new Person('pursue')赋给了子类的原型,其实子类的实例man1,man2本身是一个完全空的对象,所有的属性和方法都得去原型链上去找,因而找到的属性方法都是同一个。 2.利用构造函数继承 function Person (name, age) { this.name = name; this.age = age; } Person.prototype.say = function(){ console.log('hello, my name is ' + this.name); }; function Man(name, age) { Person.apply(this, arguments); } //Man.prototype = new Person('pursue'); var man1 = new Man('joe'); var man2 = new Man('david'); console.log(man1.name === man2.name);//false man1.say(); //say is not a function 这里子类的在构造函数里利用了apply去调用父类的构造函数,从而达到继承父类属性的效果,比直接利用原型链要好的多,至少每个实例都有自己那一份资源,但是这种办法只能继承父类的实例属性,因而找不到say方法,为了继承父类所有的属性和方法,则就要修改原型链,从而引入了组合继承方式。 3.组合继承 function Person (name, age) { this.name = name; this.age = age; } Person.prototype.say = function(){ console.log('hello, my name is ' + this.name); }; function Man(name, age) { Person.apply(this, arguments); } Man.prototype = new Person(); var man1 = new Man('joe'); var man2 = new Man('david'); console.log(man1.name === man2.name);//false console.log(man1.say === man2.say);//true man1.say(); //hello, my name is joe 需要注意的是man1和man2的实例属性其实是覆盖了原型属性,但是并没要覆盖掉原型上的say方法(因为它们没有),所以这里man1.say === man2.say依然返回true,因而需要十分小心没有覆盖掉的原型属性,因为它是所有实例共有的。 4.寄生组合继承 说实话我真不知道下面的这种形式叫这名字,但是它确实是最流行,最经典的javascript的继承方式。其实,只需要明白原型对象的结构即可: function Person (name, age) { this.name = name; this.age = age; } Person.prototype.say = function(){ console.log('hello, my name is ' + this.name); }; function Man(name, age) { Person.apply(this, arguments); } Man.prototype = Object.create(Person.prototype);//a. Man.prototype.constructor = Man;//b. var man1 = new Man('pursue'); var man2 = new Man('joe'); console.log(man1.say == man2.say); console.log(man1.name == man2.name); 其实寄生组合继承和上面的组合继承区别仅在于构造子类原型对象的方式上(a.和b.),这里用到了Object.creat(obj)方法,该方法会对传入的obj对象进行浅拷贝,类似于: function create(obj){ function T(){}; T.prototype = obj; return new T(); } 因此,a.会将子类的原型对象与父类的原型对象进行很好的连接,而并不像一般的组合继承那样直接对子类的原型进行复制(如Man.prototype = new Person();),这样只是很暴力的在对属性进行覆盖。而寄生组合继承方式则对实例属性和原型属性分别进行了继承,在实现上更加合理。 注意:代码b.并不会改变instanceof的结果,但是对于需要用到construcor的场景,这么做更加严谨。 以上这篇Javascript中的几种继承方式对比分析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com