js 实现继承的几种方式

方式1:Call实现

Parent1.call(this);会调用Parent方法，将属性绑定到child1上

function Parent1() {this.name = "parent1";this.f = function () {console.log("parent1");};
}
function Child1() {Parent1.call(this);this.type = "child1";
}let child = new Child1();
child.f();

缺点：无法继承Parent原型上的内容，因为相当于只是改变了一下this指向

方式2:原型链

function Parent2() {this.name = "parent2";this.play = [1, 2, 3];
}
function Child2() {this.type = "child2";
}
Child2.prototype = new Parent2();let child1 = new Child2();
let child2 = new Child2();child1.play.push(4);console.log(child1.play, child2.play);

缺点：多个实例的原型都是指向同一个对象，容易造成污染

方式3：Call+原型链

解决上一步实例属性污染的问题

  function Parent3 () {this.name = 'parent3';this.play = [1, 2, 3];}function Child3() {Parent3.call(this);this.type = 'child3';}Child3.prototype = new Parent3();//把父元素实例通过Call都绑定到自身实例上，实现隔离var s3 = new Child3();var s4 = new Child3();s3.play.push(4);console.log(s3.play, s4.play);

缺点：Child3.prototype = new Parent3(); 会造成多运行一次构造函数

方式4：寄生组合继承

function Parent5() {this.name = "parent5";this.play = [1, 2, 3];
}
function Child5() {Parent5.call(this);this.type = "child5";
}
Child5.prototype = Object.create(Parent5.prototype);
//不加这个会使得child实例的constructor指向Parent5
Child5.prototype.constructor = Child5;console.log(new Child5());

js 实现继承的几种方式相关推荐

(转)js实现继承的5种方式
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式 1.使用对象冒充实现继承(该种实 ...
JavaScript(js)实现继承的几种方式
1.原型链继承核心:将父类的实例做为子类的原型对象 //动物类function Animal(name,sex) {this.name = name || 'Animal';this.sex = s ...
JS 实现继承的 5 种方式
文章目录继承原型链继承原型链继承的优缺点构造继承构造继承的优缺点复制继承复制继承的优缺点组合继承组合继承的优缺点寄生组合继承参考继承继承作为面向对象语言的三大特性之一(继承. ...
面试--js实现继承的几种方式
基于原型的继承 function father() {this.faName = 'father';this.names=['11','22']}father.prototype.getfaName ...
JS 总结之原型继承的几种方式
在之前的总结中,我们详细分析了原型<JS 总结之原型>,原型很大作用用于模拟继承,这一次,我们来聊原型继承的几种方式. function Person (age) {this.age = ...
js中继承的几种用法总结(apply,call,prototype)
本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助一,js中对象继承 js中有三种继承方式 1.js原型(proto ...
继承有几种方式，分别是什么，想要实现继承可以使用哪些方法
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [继承有几种方式 ...
可以实现继承的几种方式
继承的几种方式说起继承,又是一个老生常谈的问题了.今天来讲讲继承的几种方法以及他们的优缺点吧. 源码地址:点击这里一.原型链继承原型链继承:通过原型将一个引用类型继承另一个引用类型的属性和方法. ...
JS数组遍历的几种方式
JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代 ...
Django中Model继承的三种方式
Django中Model继承的三种方式 Django中Model的继承有三种: 1.抽象继承 2.多表继承 3.proxy model(代理model) 1.抽象继承第一种抽象继承,创建一个通用父类 ...

js 实现继承的几种方式

js 实现继承的几种方式相关推荐

最新文章

热门文章