深入理解javascript原型链和继承(2)

function SuperClass() { this.name = "women"; this.bra = ["a", "b"]; } function SubClass() { this.subname = "your sister"; //将SuperClass的作用域赋予当前构造函数,实现继承 SuperClass.call(this); } var sub1 = new SubClass(); sub1.bra.push("c"); console.log(sub1.bra);//["a","b","c"] var sub2 = new SubClass(); console.log(sub2.bra);//["a","b"]

SuperClass.call(this);这一句话的意思是在SubClass的实例(上下文)环境中调用了SuperClass构造函数的初始化工作,这样每一个实例就会有自己的一份bra属性的副本了,互不产生影响了。
但是,这样的实现方式仍不是完美的,既然引入了构造函数,那么同样我们也面临着上篇中讲到的构造函数存在的问题:如果在构造函数中有方法的定义,那么对于没一个实例都存在一份单独的Function引用,我们的目的其实是想共用这个方法,而且我们在超类型原型中定义的方法,在子类型实例中是无法调用到的:

function SuperClass() { this.name = "women"; this.bra = ["a", "b"]; } SuperClass.prototype.sayWhat = function(){ console.log("hello"); } function SubClass() { this.subname = "your sister"; SuperClass.call(this); } var sub1 = new SubClass(); console.log(sub1.sayWhat());//TypeError: undefined is not a function

如果你看过上篇文章关于原型对象和构造函数的,想必你已经知道解决这个问题的答案了,那就是沿用上篇的套路,使用“组合拳”!

组合式继承

组合式继承就是结合原型链和构造函数的优势,发出各自特长,组合起来实现继承的一种方式,简单来说就是使用原型链继承属性和方法,使用借用构造函数来实现实例属性的继承,这样既解决了实例属性共享的问题,也让超类型的属性和方法得到继承:

function SuperClass() { this.name = "women"; this.bra = ["a", "b"]; } SuperClass.prototype.sayWhat = function(){ console.log("hello"); } function SubClass() { this.subname = "your sister"; SuperClass.call(this); //第二次调用SuperClass } SubClass.prototype = new SuperClass(); //第一次调用SuperClass var sub1 = new SubClass(); console.log(sub1.sayWhat());//hello

组合继承的方式也是实际开发中我们最常用的实现继承的方式,到此已经可以满足你实际开发的需求了,但是人对完美的追求是无止境的,那么,必然会有人对这个模式“吹毛求疵”了:你这个模式调用了两次超类型的构造函数耶!两次耶。。。你造吗,这放大一百倍是多大的性能损失吗?
最有力的反驳莫过于拿出解决方案,好在开发者找到了解决这个问题的最优方案:

寄生组合式继承

在介绍这个继承方式前,我们先了解下寄生构造函数的概念,寄生构造函数类似于前面提到的工厂模式,它的思想是定义一个公共函数,这个函数专门用来处理对象的创建,创建完成后返回这个对象,这个函数很像构造函数,但构造函数是没有返回值的:

function Gf(name,bra){ var obj = new Object(); obj.name = name; obj.bra = bra; obj.sayWhat = function(){ console.log(this.name); } return obj; } var gf1 = new Gf("bingbing","c++"); console.log(gf1.sayWhat());//bingbing

寄生式继承的实现和寄生式构造函数类似,创建一个不依赖于具体类型的“工厂”函数,专门来处理对象的继承过程,然后返回继承后的对象实例,幸运的是这个不需要我们自己实现,道哥(道格拉斯)早已为我们提供了一种实现方式:

function object(obj) { function F() {} F.prototype = obj; return new F(); } var superClass = { name:"bingbing", bra:"c++" } var subClass = object(superClass); console.log(subClass.name);//bingbing

在公共函数中提供了一个简单的构造函数,然后将传进来对象的实例赋予构造函数的原型对象,最后返回该构造函数的实例,很简单,但疗效很好,不是吗?这个方式被后人称为“原型式继承”,而寄生式继承正是在原型式基础上,通过增强对象的自定义属性实现的:

function buildObj(obj){ var o = object(obj); o.sayWhat = function(){ console.log("hello"); } return o; } var superClass = { name:"bingbing", bra:"c++" } var gf = buildObj(superClass); gf.sayWhat();//hello

寄生式继承方式同样面临着原型中函数复用的问题,于是,人们又开始拼起了积木,诞生了——寄生组合式继承,目的是解决在指定子类型原型时调用父类型构造函数的问题,同时,达到函数的最大化复用。基于以上基础实现方式如下:

//参数为两个构造函数 function inheritObj(sub,sup){ //实现实例继承,获取超类型的一个副本 var proto = object(sup.prototype); //重新指定proto实例的constructor属性 proto.constructor = sub; //将创建的对象赋值给子类型的原型 sub.prototype = proto; } function SuperClass() { this.name = "women"; this.bra = ["a", "b"]; } SuperClass.prototype.sayWhat = function() { console.log("hello"); } function SubClass() { this.subname = "your sister"; SuperClass.call(this); } inheritObj(SubClass,SuperClass); var sub1 = new SubClass(); console.log(sub1.sayWhat()); //hello

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjxwpw.html