分享web开发知识

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

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

js继承之组合继承(结合原型链继承 和 借用构造函数继承)

发布时间:2023-09-06 02:06责任编辑:赖小花关键词:js

一、回顾借用构造函数继承的缺点

先看我们之前在借用构造函数继承中最后用到的代码:

//父类:人 ???function Person () { ?????this.head = ‘脑袋瓜子‘; ?????this.emotion = [‘喜‘, ‘怒‘, ‘哀‘, ‘乐‘]; //人都有喜怒哀乐 ?????this.eat = function () { ???????console.log(‘吃吃喝喝‘); ?????} ?????this.sleep = function () { ???????console.log(‘睡觉‘); ?????} ?????this.run = function () { ???????console.log(‘快跑‘); ?????} ???} ???//子类:学生,继承了“人”这个类 ???function Student(studentID) { ?????this.studentID = studentID; ?????Person.call(this); ???} ???????//Student.prototype = new Person(); ???var stu1 = new Student(1001); ???console.log(stu1.emotion); //[‘喜‘, ‘怒‘, ‘哀‘, ‘乐‘] ???stu1.emotion.push(‘愁‘); ???console.log(stu1.emotion); //["喜", "怒", "哀", "乐", "愁"] ???????var stu2 = new Student(1002); ???console.log(stu2.emotion); //["喜", "怒", "哀", "乐"]

在这段代码中,我们通过借用构造函数继承,保证了 stu1 和 stu2 都有各自的父类属性副本,从而使得各自 emotion 互不影响。但同时带来的问题是,stu1 和 stu2 都拷贝了 Person 类中的所有属性和方法,而在 Person 类中,像 eat ( ), sleep ( ), run ( ) 这类方法应该是公用的,而不需要添加到每个实例上去,增大内存,尤其是这类方法较多的时候。

二、结合使用两种继承模式

  所以我们想到,是否能把这些方法挂载到父类的原型对象上去,实现方法复用,然后子类通过原型链继承,就能调用这些方法啦?~

//父类:人 ???function Person () { ?????this.head = ‘脑袋瓜子‘; ?????this.emotion = [‘喜‘, ‘怒‘, ‘哀‘, ‘乐‘]; //人都有喜怒哀乐 ???} ???//将 Person 类中需共享的方法放到 prototype 中,实现复用 ???Person.prototype.eat = function () { ?????console.log(‘吃吃喝喝‘); ???} ???Person.prototype.sleep = function () { ?????console.log(‘睡觉‘); ???} ???Person.prototype.run = function () { ?????console.log(‘快跑‘); ???} ???//子类:学生,继承了“人”这个类 ???function Student(studentID) { ?????this.studentID = studentID; ?????Person.call(this); ???} ???????Student.prototype = new Person(); ?//此时 Student.prototype 中的 constructor 被重写了,会导致 stu1.constructor === Person ???Student.prototype.constructor = Student; ?//将 Student 原型对象的 constructor 指针重新指向 Student 本身 ???var stu1 = new Student(1001); ???console.log(stu1.emotion); //[‘喜‘, ‘怒‘, ‘哀‘, ‘乐‘] ???stu1.emotion.push(‘愁‘); ???console.log(stu1.emotion); //["喜", "怒", "哀", "乐", "愁"] ???????var stu2 = new Student(1002); ???console.log(stu2.emotion); //["喜", "怒", "哀", "乐"] ???stu1.eat(); //吃吃喝喝 ???stu2.run(); //快跑 ???console.log(stu1.constructor); ?//Student

首先,我们将 Person 类中需要复用的方法提取到 Person.prototype 中,然后设置 Student 的原型对象为 Person 类的一个实例,这样 stu1 就能访问到 Person 原型对象上的属性和方法了。其次,为保证 stu1 和 stu2 拥有各自的父类属性副本,我们在 Student 构造函数中,还是使用了 Person.call ( this ) 方法。如此,结合原型链继承和借用构造函数继承,就完美地解决了之前这二者各自表现出来的缺点。

js继承之组合继承(结合原型链继承 和 借用构造函数继承)

原文地址:https://www.cnblogs.com/ymh2013/p/9392398.html

知识推荐

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