ECAMscript5构造函数的方法和属性的继承

╰+哭是因爲堅強的太久メ 2023-07-14 10:59 120阅读 0赞

本文需要理解**call（）** 如何运行的，可参考  
[https://blog.csdn.net/weixin\_45969777/article/details/104862846][https_blog.csdn.net_weixin_45969777_article_details_104862846]

--------------------

## js代码： ##

--------------------

function Fn1(uname,age){ 	//父构造函数
        this.uname=uname;		//这里的this指向实例化fn1的对象
        this.age=age;
    }
    Fn1.prototype.sing=function () { 	//Fn1的sing共有方法
        console.log('fn1在唱歌！');
    };
    function Fn2(uname,age,gender){ 		//子构造函数
        this.gender=gender;			//这里的this指向实例化fn2的对象
        Fn1.call(this,uname,age);
        /* *call把fn1的this指向改为fn2的实例化对象 *所以fn2的实例化对象可以使用fn1的属性，并且在这里调用了Fn1，而这个调用只是针对属性而不针对方法 */
    }
    Fn2.prototype.dance=function () { 	//Fn2的dance共有方法
        console.log('fn2在跳舞！');
    };
    var s=new Fn2('李明',20,'男');	//实例化对象s
    console.log(s);				//输出：Fn2对象
    s.dance();				//输出：‘fn2在跳舞！’
    s.sing();				//第133行报错

--------------------

## 效果图： ##

--------------------

![在这里插入图片描述][20200314175842514.png]  
我们惊奇的发现这里**Fn2继承了Fn1的属性**，然而并**没有继承Fn1的共有方法**，接下来我们去解决这问题。

Fn2.prototype=new Fn1();
    Fn2.prototype.constructor=Fn2;

以上两行代码就可以实现Fn2继承Fn2的方法和属性了  
效果图 :  
![在这里插入图片描述][20200314180021919.png]  
大功告成！

解释一下为什么：  
**第一行**：new Fn1()；**重新实例化了一个Fn1对象**，与Fn2里面实例化的Fn1是**两个不同的对象**。而又把这**Fn1新的实例化对象赋值给Fn2.prototype**，而Fn1又有 **proto** 对象可以访问到**Fn1的prototype**，如此Fn2就继承到了Fn1的方法。这个方法一个小问题，就是会改变**Fn2.prototype.constructor的指向**，所以需要第二行来 **改回他本身（Fn2）** 即可。  
有个图示，直观一点（**father代表的是Fn1，son代表的是Fn2**）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]

本文只用于个人学习和记录

[https_blog.csdn.net_weixin_45969777_article_details_104862846]: https://blog.csdn.net/weixin_45969777/article/details/104862846
[20200314175842514.png]: /images/20230529/71230f7042f1436cbcdc2f3b5dd1740b.png
[20200314180021919.png]: /images/20230529/bd41aee29d8c473281e29ee3482c8d19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230529/e3dd66dd94f149a78c3bbf7e3ba4c973.png

发表评论取消回复

表情：

评论列表（有 0 条评论，120人围观）

还没有评论，来说两句吧...

相关阅读

相关给Date的构造函数添加属性和方法

let d = Date.prototype; Object.defineProperties(d, { 'year': {

浅浅的花香味﹌/ 2023年08月17日 16:49/ 0 赞/ 111 阅读

相关构造函数的继承

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

秒速五厘米/ 2023年07月15日 20:28/ 0 赞/ 31 阅读

相关 ECAMscript5构造函数的方法和属性的继承

本文需要理解call（）如何运行的，可参考 [https://blog.csdn.net/weixin\_45969777/article/details/1048628

╰+哭是因爲堅強的太久メ/ 2023年07月14日 10:59/ 0 赞/ 121 阅读

相关 9. JavaScript 构造函数和原型、ES5继承

声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址： [2019全新javaScript进阶面向对象ES6][2019_j

╰+攻爆jí腚メ/ 2022年10月08日 11:10/ 0 赞/ 215 阅读

相关 javaScript属性和方法同在构造函数中（包含继承）

将所有属性和方法使用this声明，并放在构造函数中，不使用prototype. 例子： function Animal(name) { this.n

逃离我推掉我的手/ 2022年08月22日 11:30/ 0 赞/ 153 阅读

相关 js 非构造函数的继承 object()方法

$(document).ready(initPage); function initPage() { var Doct

迈不过友情╰/ 2022年07月21日 02:20/ 0 赞/ 219 阅读

相关继承和构造函数笔记

package com.box; public class Box { double width; double height;

骑猪看日落/ 2022年05月17日 13:09/ 0 赞/ 244 阅读

相关 JS 原型继承和属性方法的继承的实现

本博客内容： 1. apply()实现属性和方法继承 2. prototype实现原型的继承 apply()实现属性和方法继承 ![这里写图片描述][70] ![这

小鱼儿/ 2022年05月16日 13:54/ 0 赞/ 220 阅读

相关继承中的构造方法

package text; /继承中的构造方法/ /子类的构造的过程中必须调用其基类的构造方法/ /子类可以在自己的构造方法找个使用super(

深藏阁楼爱情的钟/ 2022年05月12日 08:12/ 0 赞/ 235 阅读

相关 javascript的继承——构造函数继承

构造函数继承方式： Father.call(this, args); 构造函数继承的几个特点： 1. 父类构造函数中的属性和方法都可以被子类继承； 2. 父类原型上的

爱被打了一巴掌/ 2021年12月09日 04:39/ 0 赞/ 435 阅读