本文主要和大家分享几种js继承的式分别有原型继承、借用构造函数继承、组合继承、寄生式继承、寄生组合方式继承,希望能帮助到大家。
原型式继承
可以在不必预先定义构造函数的情况下实现继承,其本质是执行给定对象的浅复制。而复制得到的副本还可以得到进一步的改造
function parent(o) { this.username = 'father'; this.array = [1,2,3]}function child() { this.age = 20}child.prototype = new Parent();
登录后复制
缺点:
1. 父类和子类公用原型链上的引用变量。
2. 创建子类实例是无法向父类的构造函数传递参数
借用构造函数继承
借用父类的构造函数来增强子类的实例,就是说,相当于复制一份父类的属性或者方法给子类了
function Parent(name,arr) { this.name = name; this.arr = arr; this.run = function() { console.log('run function') }}function Child(name, arr) { this.age = 20; Parent.call(this,name,arr);}var obj1 = new Child('zhang san', [1,2,3]);var obj2 = new Child('zhang san', [1,2,3]);obj1.arr[0] = 'hello'console.log(obj1.arr[0]); // helloconsole.log(obj2.arr[0]); // 1
登录后复制
优点:
1.解决了子类实例共享父类引用属性的问题
2.创建子类实例时,可以向父类构造函数传递参数
缺点:
1.无法实现复用,每一个子类实例都有一个新的run函数,如果实例的对象多了,内存消耗过大
组合式继承
组合继承避免了原型链和借用构造函数的缺陷,融合它们的优点。
function Parent(name,arr) { this.name = name; this.arr = arr;}Parent.prototype.run = function() { console.log('run function');}function Child(naem,arr) { this.age = '20'; Parent.call(this,name,arr); // 借用构造函数 ==》 核心语句 1》不能复用}Child.prototype = new Parent(); // 原型链 ==》 核心语句 1》父构造函数不能传递参数 2》arr是引用属性,一个改变,互相影响
登录后复制
优点:
1.不存在引用属性共享的问题
2.可传递参数
3.方法可复用
缺点:
子类原型上右一份多余的父类实例的属性
寄生式继承
与原型式继承非常相似,也是基于某个对象或某些信息创建一个对象,然后增强对象,最后返回对象。
function createAnother(original) { var clone = Object.create(original); // clone.sayHi = function() { console.log(Hi) } return clone;var Person = { name: 'Blob', friends: ['Shelby', 'Court', 'Van'];}var anotherPerson = createAnother(person);anotherPerson.sayHi(); // Hi
登录后复制
寄生组合式继承
组合继承是js最常用的继承模式,组合继承最大的问题就是无论在什么情况下,都会调用两次构造函数:一次是在创建子类型原型时,另一次是在子类型构造函数的内部。
function beget(obj){ // 生孩子函数 beget:龙beget龙,凤beget凤。 var F = function(){}; F.prototype = obj; return new F();}function Super(){ // 只在此处声明基本属性和引用属性 this.val = 1; this.arr = [1];}// 在此处声明函数Super.prototype.fun1 = function(){};Super.prototype.fun2 = function(){};//Super.prototype.fun3...function Sub(){ Super.call(this); // 核心 // ...}var proto = beget(Super.prototype); // 核心proto.constructor = Sub; // 核心Sub.prototype = proto; // 核心var sub = new Sub();alert(sub.val);alert(sub.arr);
登录后复制
相关推荐:
细说js继承
js继承的实现代码_javascript技巧
JS继承–原型链继承和类式继承_基础知识
以上就是几种js继承的式分享的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2784967.html