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

╰+哭是因爲堅強的太久メ 2023-07-14 10:59 218阅读 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 条评论，218人围观）

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

相关阅读

相关 Python面向对象编程：理解构造函数、属性和继承的问题

在Python的面向对象编程（Object-Oriented Programming, OOP）中，构造函数、属性和继承是核心概念。 1. 构造函数： - 在类定义中，

待我称王封你为后i/ 2025年02月27日 11:54/ 0 赞/ 73 阅读

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

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

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

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

ES6之前没有给我们提供extends继承，我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承 call() function fn(x,y){

旧城等待，/ 2023年07月24日 02:21/ 0 赞/ 133 阅读

相关构造函数的继承

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

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

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

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

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

相关继承的作用域，继承的构造函数，构造函数和拷贝控制

当存在继承关系时，派生类的作用域嵌套在其基类的作用域之内。如果一个名字在派生类的作用域内无法正确解析，则编译器将继续在外层的基类作用域中寻找该名字的定义在编译时进行名字查找

ゝ一纸荒年。/ 2023年05月29日 14:28/ 0 赞/ 23 阅读

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

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

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

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

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

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

相关继承和构造函数笔记

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

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

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

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

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