当前位置: 首页 > news >正文

js的继承

一、原型链继承

将父类的实例作为子类的原型

function Father(){this.name = 'Tony'
}function Son() {}Son.prototype = new Father()let son = new Son();console.log(son.name) // Tony

缺点:

  1. 父类所有的引用类型属性都会被所有子类共享,一个子类修改了属性值就会影响到其他子类。
  2.  子类不能给父类的构造函数传参

 二、构造函数继承

        在子类构造函数中调用父类构造函数并通过call或apply给父类传参、修改this指向。

function Father(name){this.info = {name:name,job:'teacher'}this.sayName(){console.log(this.info.name)}
}function Son (name){Father.call(this,name)
}let s = new Son('Jerry');let s2 = new Son ('Mike');console.log(s.info.name) //Jerryconsole.log(s2.info.name) // Mike

        通过使用call()apply()方法,Parent构造函数在为Child的实例创建的新对象的上下文执行了,就相当于新的Child实例对象上运行了Parent()函数中的所有初始化代码,结果就是每个实例都有自己的info属性。 

 优点:

  1. 可以给父类传参
  2. 父类的引用类型不会被子类共享

缺点:

  1. 子类不能访问父类原型上定义的方法(prototype上挂在的方法) 

三、组合式继承

        组合式继承综合了原型链继承和构造方法继承的优点,通过原型链继承获得父类原型对象上的属性和方法。通过引用父类构造方法达到隔离子类共享属性,给父类传递参数 。

function Father (name) {this.name=name}Father.prototype.sayName=function(){console.log(this.name)
}function Son (name) {Father.call(this,name)
}
Son.prototype = new Father()
//手动挂载构造起,指向自己的构造方法
Son.prototype.constructor = Sonlet s1 = new Son('Mike')s1.sayName() // Mikelet s2 = new Son('Jerry')s2.sayName() //Jerry

 优点:

  1. 父类的方法可以复用
  2. 子类可以向父类传参
  3. 父类构造函数中的引用类型数据不会被共享

四、原型继承

        对参数对象的一种浅复制 ,当Object.create()只有一个参数时与下面代码中的Object()方法相同

let student = {hobbies:['music','football','basketball']
}function Object (o) {function F(){}F.prototype=oreturn new F()
}let s1 = Object(student)
s1.hobbies.push('sing')console.log(s1.hobbies) //['music', 'football', 'basketball', 'sing']
let s2 = Object(student)
s2.hobbies.push('dance')
console.log(s2.hobbies) //['music', 'football', 'basketball', 'sing','dance']

优点:

  1. 父类方法可复用 

缺点:

  1. 父类的引用会被子类共享
  2. 子类不能向父类传参

五、寄生试继承

         寄生式继承是在原型继承基础上的拓展,类似于一个工厂模式,即创建一个用于封装继承的函数,该函数内部对参数对象做了增强。

function Object (person){function F () {}F.prototype = person;return new F()
}function createObject(person){let obj = Object(person)obj.sayHello = function(){console.log('hello')}return obj
}let person = {name:'tony',age:32
}let p1 = createObject(person)p1.sayHello() //hellop1.name //tony

六、寄生式组合继承

        组合式继承有看似完美却有一个缺点,那就是父类的构造函数会被执行两次,一次是父类实例化时,一类是子类实例化时。这样就会造成内存没必要的消耗,寄生式组合继承正是弥补了这个短板,时目前最为理想的继承方式。

function extend(subClass,superClass){var prototype = object(superClass.prototype);//创建对象prototype.constructor = subClass;//增强对象subClass.prototype = prototype;//指定对象
}

七、ES6继承

class supClass {constructor(name) {this.name = name}sayName(){console.log(this.name)}
}class subClass extends supClass{constructor (name) {super(name)this.name = name}
}let sub = new subClass ('subClass')console.log(sub.name)sub.sayName() // subClass

http://www.lryc.cn/news/176378.html

相关文章:

  • HONEYWELLL 05701-A-0325 控制脉冲模块
  • Qt扩展-QCustomPlot 简介及配置
  • python教程:selenium WebDriver 中的几种等待--sleep(),implicitly_wait(),WebDriverWait()
  • 从裸机开始安装操作系统
  • redhat 6.1 测试环境安装 yum
  • WARNING:tensorflow:Your input ran out of data; interrupting training. 解决方法
  • ChunJun(OldNameIsFlinkX)
  • MySQL的时间差函数、日期转换计算函数
  • 【神印王座】悲啸洞穴之物揭晓,圣采儿差点被骗,幸好龙皓晨聪明
  • 性能测试之使用Jemeter对HTTP接口压测
  • Spring面试题13:Spring中ApplicationContext实现有哪些?Bean工厂和Applicationcontext有什么区别
  • Spring 学习(六)代理模式
  • Educational Codeforces Round 155 (Rated for Div. 2) - D Sum of XOR Functions
  • [C++ 网络协议] I/O流分离所带来的半关闭问题
  • 根据文章段落内容自动插入图片php版
  • 在GEHC的第一个sprint记录
  • MFC 绘图
  • 算法 用两个栈实现队列-(栈+队列)
  • Android单编模块报FAILED: ninja: unknown target ‘MODULES-IN-vendor错误解决
  • 地球的某一片红薯地中秋圆《乡村振兴战略下传统村落文化旅游设计》——旅行季许少辉八月新书辉少许想象和世界一样宽广
  • Zookeeper-命令操作
  • eclipse 添加注释
  • Linux网络编程- 网络字节顺序
  • 如何永久关闭WPS任务窗口?
  • Cesium 问题:加载 geojson 数据量大浏览器会崩,使用primitive方式加载
  • C++ Primer----1.5类简介 章节练习
  • 爬楼梯Java(斐波那契数列)
  • Maven项目package为jar包后在window运行报A JNI error has occurred
  • iview 的table表格组件使单元格可编辑和输入
  • 统计的基本概念及抽样分布