分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

js中的6中继承方式

发布时间:2023-09-06 01:46责任编辑:董明明关键词:js

oo语言支持两种继承:接口继承和实现继承,js中函数没有方法签名,所以只支持实现继承

1.原型链继承

实现思想:原型对象也是对象,将原型对象的prototype指向父类的原型(将父对象的实例赋给子对象的原型),即可实现继承

<script type="text/javascript"> ???//原型链实现继承 ???????//父类 ???????function Parents(){ ???????????this.surname=‘王‘; ???????????this.getSurname=function(){ ???????????????console.log(this.surname); ???????????} ???????} ???????//子类 ???????function Child(){ ???????} ???????//将父类的实例赋给子类的原型,实现继承 ???????Child.prototype=new Parents(); ???????var c=new Child(); ???????c.getSurname(); ???</script>

测试结果:

2.借用构造函数继承

实现思想:使用apply或者call()在子类的构造函数中执行父类的构造函数

<script type="text/javascript"> ???//借用构造函数 ???????function Parents(){ ???????????this.surname=‘李‘; ???????????this.getSurname=function(){ ???????????????console.log(this.surname); ???????????} ???????}; ???????function Child(){ ???????????//执行父类的构造函数 ???????????Parents.call(this); ???????}; ???????var c=new Child(); ???????console.log(c);</script>

测试结果:

3.组合继承

实现思想:使用原型链实现对原型属性和方法的继承,而通过构造函数来实现对实例属性的继承

<script type="text/javascript"> ???????//组合继承 ???????function Parents(surname){ ???????????this.surname=‘李‘; ???????} ???????Parents.prototype.getSurname=function(){ ???????????console.log(this.surname); ???????} ???????function Child(age){ ???????????//继承属性 ???????????Parents.call(this); ???????????//自己特有的属性 ???????????this.age=age ???????} ???????//继承方法 ???????Child.prototype=new Parents(); ???????Child.prototype.constructor=Child; ???????Child.prototype.getAge=function(){ ???????????console.log(this.age); ???????} ???????var p=new Parents(); ???????console.log(p) ???????????????var c=new Child(12); ???????console.log(c)</script>

测试结果:

4.原型式继承:

实现思想:通过构建一个函数,参数为父对象,函数内部创建一个新对象,将父对象赋给新对象的原型,然后返回新对象。

<script type="text/javascript"> ???//原型式继承 ???????//方式一 ???????//传入一个对象 ???????// function extend(o){ ???????// ????function F(){}; ???????// ????//将对象o赋给F的原型 ???????// ????F.prototype=o; ???????// ????//返回F对象的实例 ???????// ????return new F(); ???????// } ???????// var parents={ ???????// ????surname:‘李‘, ???????// ????getSurname:function(){console.log(this.surname)} ???????// } ???????// //调用extend函数来实现继承 ???????// var child=extend(parents); ???????// child.getSurname(); ???????//方式二 ???????var parents={ ???????????surname:‘李‘, ???????????getSurname:function(){ ???????????????console.log(this.surname); ???????????} ???????} ???????var child=Object.create(parents); ???????//定义子对象私有属性和方法 ???????child.age=11; ???????child.getAge=function(){ ???????????console.log(this.age); ???????} ???????child.getSurname(); ???????child.getAge();</script>

5.寄生式继承

实现思想:创建一个仅用于封装继承过程的函数,该函数在内部以某种方式(创建子对象私有方法)来增强对象,最后再像真的是它做了所有工作一样返回对象

<script type="text/javascript"> ???//寄生式继承 ???????function create(original){ ???????????//调用函数创建对象 ???????????var clone=Object.create(original); ???????????//以某种方式增强对象(创建子对象私有方法) ???????????clone.sayHi=function(){ ???????????????console.log(‘hello‘); ???????????} ???????????return clone; ???????} ???????var parents={ ???????????surname:‘李‘ ???????} ???????var child=create(parents); ???????console.log(child) ???????child.sayHi();</script>

6.寄生组合式继承

实现思想:通过借用构造函数来继承属性,通过原型链的混成形式来继承方法(使用寄生式继承来继承父类的原型,然后将结果指定给子类的原型)。

<script type="text/javascript"> ???//寄生组合式继承 ???????function inheritProto(parents,child){ ???????????var o=Object.create(parents.prototype); ???????????o.constructor=child; ???????????child.prototype=o; ???????} ???????//父类构造函数 ???????function Parents(surname){ ???????????this.surname=surname; ???????} ???????Parents.prototype.getSurname=function(){ ???????????console.log(this.surname); ???????} ???????//子类构造函数 ???????function Child(surname,age){ ???????????Parents.call(this,surname); ???????????this.age=age; ???????} ???????inheritProto(Parents,Child); ???????Child.prototype.getAge=function(){ ???????????console.log(this.age); ???????}</script>

js中的6中继承方式

原文地址:https://www.cnblogs.com/xingguozhiming/p/8645857.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved