js-原型链继承

2023-06-05 0 459

js-原型链继承

蓝本链承继

function Parent () { this.name = kevin; } Parent.prototype.getName = function () { console.log(this.name); } function Child () { } Child.prototype = new Parent(); var child1 = new Child(); console.log(child1.getName()) // kevin

难题:

1.提及类别的特性被大部份示例共享资源,举个范例:

function Parent () { this.names = [kevin, daisy]; } function Child () { } Child.prototype = new Parent(); var child1 = new Child(); child1.names.push(yayu); console.log(child1.names); // [“kevin”, “daisy”, “yayu”] var child2 = new Child(); console.log(child2.names); // [“kevin”, “daisy”, “yayu”]

2.在建立 Child 的示例时,无法向Parent传参

2.转作缺省(经典之作承继)

function Parent () { this.names = [kevin, daisy]; } function Child () { Parent.call(this); } var child1 = new Child(); child1.names.push(yayu); console.log(child1.names); // [“kevin”, “daisy”, “yayu”] var child2 = new Child(); console.log(child2.names); // [“kevin”, “daisy”]

缺点:

1.避免了提及类别的特性被大部份示例共享资源

2.可以在 Child 中向 Parent 传参

举个范例:

function Parent (name) { this.name = name; } function Child (name) { Parent.call(this, name); } var child1 = new Child(kevin); console.log(child1.name); // kevin var child2 = new Child(daisy); console.log(child2.name); // daisy

缺点:

方法都在缺省中定义,每次建立示例都会建立一遍方法。

3.组合承继

蓝本链继承和经典之作承继双剑合璧。

function Parent (name) { this.name = name; this.colors = [red, blue, green]; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } Child.prototype = new Parent(); Child.prototype.constructor = Child; var child1 = new Child(kevin, 18); child1.colors.push(black); console.log(child1.name); // kevin console.log(child1.age); // 18 console.log(child1.colors); // [“red”, “blue”, “green”, “black”] var child2 = new Child(daisy, 20); console.log(child2.name); // daisy console.log(child2.age); // 20 console.log(child2.colors); // [“red”, “blue”, “green”]

缺点:融合蓝本链承继和缺省的缺点,是 JavaScript 中最常用的承继模式。

4.蓝本式承继

function createObj(o) { function F(){} F.prototype = o; return new F(); }

就是 ES5 Object.create 的模拟实现,将传入的对象作为建立的对象的蓝本。

缺点:

包含提及类别的特性值始终都会共享资源相应的值,这点跟蓝本链承继一样。

var person = { name: kevin, friends: [daisy, kelly] } var person1 = createObj(person); var person2 = createObj(person); person1.name = person1; console.log(person2.name); // kevin person1.firends.push(taylor); console.log(person2.friends); // [“daisy”, “kelly”, “taylor”]

注意:修改person1.name的值,person2.name的值并未发生改变,并不是因为person1和person2有独立的 name 值,而是因为person1.name = person1,给person1添加了 name 值,并非修改了蓝本上的 name 值。

5. 寄生式承继

建立一个仅用于封装承继过程的函数,该函数在内部以某种形式来做增强对象,最后返回对象。

function createObj (o) { var clone = Object.create(o); clone.sayName = function () { console.log(hi); } return clone; }

缺点:跟转作缺省模式一样,每次建立对象都会建立一遍方法。

6. 寄生组合式承继

为了方便大家阅读,在这里重复一下组合承继的代码:

function Parent (name) { this.name = name; this.colors = [red, blue, green]; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } Child.prototype = new Parent(); var child1 = new Child(kevin, 18); console.log(child1)

组合承继最大的缺点是会调用两次父缺省。

一次是设置子类别示例的蓝本的时候:

Child.prototype = new Parent();

一次在建立子类别示例的时候:

var child1 = new Child(kevin, 18);

回想下 new 的模拟实现,其实在这句中,我们会执行:

Parent.call(this, name);

在这里,我们又会调用了一次 Parent 缺省。

所以,在这个范例中,如果我们打印 child1 对象,我们会发现 Child.prototype 和 child1 都有一个特性为colors,特性值为[red, blue, green]。

那么我们该如何精益求精,避免这一次重复调用呢?

如果我们不使用 Child.prototype = new Parent() ,而是间接的让 Child.prototype 访问到 Parent.prototype 呢?

看看如何实现:

function Parent (name) { this.name = name; this.colors = [red, blue, green]; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } // 关键的三步 var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); var child1 = new Child(kevin, 18); console.log(child1);

最后我们封装一下这个承继方法:

function object(o) { function F() {} F.prototype = o; return new F(); } function prototype(child, parent) { var prototype = object(parent.prototype); prototype.constructor = child; child.prototype = prototype; } // 当我们使用的时候: prototype(Child, Parent);

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务