脚本宝典收集整理的这篇文章主要介绍了对于JavaScript继承你到底了解多少,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
关于继承,你到底了解多少,什么样的继承是最最优的,让我们一起来学习一些关于继承的那些知识点,带你了解他们的实现过程,以及他们的优缺点
先来了解他们的关系有助于对继承更好的理解
核⼼:将⽗类实例作为⼦类原型
代码实现过程:
function Parent(name){ this.name = name || 'xt', this.arr = [1] } function Son(age){ this.age = age } Parent.PRototyPE.say = function() { //将需要复⽤、共享的⽅法定义在⽗类原型上 console.LOG('hello'); } Son.prototype = new Parent() let s1 = new Son(18) let s2 = new Son(19) console.log(s1.say() === s2.say()); //true console.log(s1.name,s1.age); //xt 18 console.log(s2.name,s2.age); //xt 19 s1.arr.push(2) console.log(s1.arr,s2.arr); // [ 1, 2 ] [ 1, 2 ]
优点:
实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性。(新实例不会继承父类实例的属性!)
缺点:
核心:借⽤⽗类的构造函数来增强⼦类实例,等于是复制⽗类的实例属性给⼦类
代码实现:
function Parent(name) { this.name = name; this.arr = [1], this.say = function() { console.log('hello') } } function Son(name, age) { Parent.call(this, name) // 拷⻉了⽗类的实例属性和⽅法 this.age = age } let s1 = new Son('小谭', 18) let s2 = new Son('小明', 19) console.log(s1.say === s2.say) //false ⽅法不能复⽤ ⽅法是独⽴,不是共享的 console.log(s1.name, s1.age); //小谭 18 console.log(s2.name, s2.age); //小明 19 s1.arr.push(2) console.log(s1.arr, s2.arr); // [ 1, 2 ] [ 1 ]
优点:
缺点:
核心:用一个函数包装一个对象,然后返回这个函数的调用,这个函数就变成了个可以随意增添属性的实例或对象
function Parent(name) { this.name = 'xt'; this.arr = [1] } function object(obj){ function F(){} F.prototype = obj; return new F(); } let s1 = new Parent(object) s1.name = '小明' s1.arr.push(2) let s2 = new Parent(object) console.log(s1.name,s2.name); // 小明 xt console.log(s1.arr, s2.arr); //[ 1, 2 ] [ 1 ]
缺点:
核心:在原型式继承的基础上,增强对象,返回构造函数
function Parent(name) { this.name = 'xt'; this.arr = [1] } function object(obj){ function F(){} F.prototype = obj; return new F(); } let Son = new Parent() function addobject(obj){ VAR add = object(obj) add.name = '小白' return add } var s1 = addobject(Son) console.log(s1.name); //小白
缺点:
核心:通过调⽤⽗类构造函数,继承⽗类的属性并保留传参的优点;然后通过将⽗类实例作为⼦类原型,实现函数复⽤。
代码实现:
function Parent(name) { this.name = name; this.arr = [1] } Parent.prototype.say = function () { console.log('hello') } function Son(name, age) { Parent.call(this, name) // 二次 this.age = age } Parent.prototype = new Son() // 一次 let s1 = new Son('小谭', 18) let s2 = new Son('小明', 19) console.log(s1.say === s2.say) // true console.log(s1.name, s1.age); //小谭 18 console.log(s2.name, s2.age); //小明 19 s1.arr.push(2) console.log(s1.arr, s2.arr); // [ 1, 2 ] [ 1 ] 不共享⽗类的引⽤属性,
优点:
缺点:
核心:结合借用构造函数传递参数和寄生模式实现继承
function Parent(name){ this.name = name || 'xt', this.arr = [1] } function Son(name,age){ Parent.call(this,name) // 核⼼ this.age = age } Parent.prototype.say = function() { console.log('hello'); } Son.prototype = Object.create(Parent.prototype) // 核心 通过创建中间对象,⼦类原型和⽗类原型,就会隔离开。 Son.prototype.constructor = Son let p1 = new Parent() let s1 = new Son("小红",18) let s2 = new Son("小黑",19) console.log(p1.constructor); //[Function: Parent] console.log(s1.constructor); // [Function: Son] console.log(s1.say() === s2.say()); //true console.log(s1.name,s1.age); // 小红 18 console.log(s2.name,s2.age); //小黑 19 s1.arr.push(2) console.log(s1.arr,s2.arr); // [ 1, 2 ] [ 1, 2 ]
寄生式组合继承可以算是引用类型继承的最佳继承
到此这篇关于JS继承的文章就介绍到这了,更多相关JS继承的理解内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的对于JavaScript继承你到底了解多少全部内容,希望文章能够帮你解决对于JavaScript继承你到底了解多少所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。