JavaScript 实现继承的几种方法

﹏ヽ暗。殇╰゛Y 2024-04-18 09:07 65阅读 0赞

** 1、原型链继承**

**核心：** 将父类的实例作为子类的原型

**缺点：** 父类新增原型方法/原型属性，子类都能访问到，父类一变其它的都变了

function Person (name) {
                this.name = name;
            };
    
            Person.prototype.getName = function () {    //对原型进行扩展
                return this.name;
            };
    
            function Parent (age) {
                this.age = age;
            };
    
            Parent.prototype = new Person('老明');   //这一句是关键 //通过构造器函数创建出一个新对象，把老对象的东西都拿过                  
                  来。
    
            Parent.prototype.getAge = function () {
                return this.age;
            };
    
    //        Parent.prototype.getName = function () {   //可以重写从父类继承来的方法,会优先调用自己的。
    //            console.log(222);
    //        };
    
            var result = new Parent(22);
            console.log(result.getName());  //老明　　//调用了从Person原型中继承来的方法(继承到了当前对象的原型中)　　
            console.log(result.getAge());   //22 　　//调用了从Parent原型中扩展来的方法

### 2、构造继承 ###

基本思想
    借用构造函数的基本思想就是利用call或者apply把父类中通过this指定的属性和方法复制（借用）到子类创建的实例中。
    因为this对象是在运行时基于函数的执行环境绑定的。也就是说，在全局中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。
    call、apply 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
    
    所以，这个借用构造函数就是，new对象的时候(new创建的时候，this指向创建的这个实例)，创建了一个新的实例对象，
    并且执行Parent里面的代码，而Parent里面用call调用了Person，也就是说把this指向改成了指向新的实例，
    所以就会把Person里面的this相关属性和方法赋值到新的实例上，而不是赋值到Person上面,
    所以所有实例中就拥有了父类定义的这些this的属性和方法。
    
    因为属性是绑定到this上面的，所以调用的时候才赋到相应的实例中，各个实例的值就不会互相影响了。

**核心：**使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

**缺点：** 方法都在构造函数中定义， 只能继承父类的实例属性和方法，不能继承原型属性/方法，无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

function Person (name) {
                this.name = name;
                this.friends = ['小李','小红'];
                this.getName = function () {
                    return this.name;
                }
            };
    
    //        Person.prototype.geSex = function () {    //对原型进行扩展的方法就无法复用了
    //            console.log("男");
    //        };
    
            function Parent = (age) {
                Person.call(this,'老明');　　//这一句是核心关键
                //这样就会在新parent对象上执行Person构造函数中定义的所有对象初始化代码，
                // 结果parent的每个实例都会具有自己的friends属性的副本
                this.age = age;
            };
    
            var result = new Parent(23);
            console.log(result.name);　　　　//老明
            console.log(result.friends);　　//["小李", "小红"]
    　　　　 console.log(result.getName());　　//老明
    　　　　 console.log(result.age);　　　　//23
    　　　　 console.log(result.getSex());　　//这个会报错，调用不到父原型上面扩展的方法

### 3、组合继承 ###

组合继承（所有的实例都能拥有自己的属性，并且可以使用相同的方法，组合继承避免了原型链和借用构造函数的缺陷，结合了两个的优点，是最常用的继承方式）

**核心：**通过调用父类构造，继承父类的属性并保留传参的优点，**然后再**通过将父类实例作为子类原型，实现函数复用

**缺点：**调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

function Person  (name) {
                 this.name = name;
                 this.friends = ['小李','小红'];
             };
    
             Person.prototype.getName = function () {
                 return this.name;
             };
    
            function Parent (age) {
                Person.call(this,'老明');　　//这一步很关键
                this.age = age;
            };
    
            Parent.prototype = new Person('老明');　　//这一步也很关键
            var result = new Parent(24);
            console.log(result.name);　　　　//老明
            result.friends.push("小智");　　//
            console.log(result.friends);　　//['小李','小红','小智']
            console.log(result.getName());　　//老明
            console.log(result.age);　　　　//24
    
            var result1 = new Parent(25);   //通过借用构造函数都有自己的属性，通过原型享用公共的方法
            console.log(result1.name);　　//老明
            console.log(result1.friends);　　//['小李','小红']

### 4、寄生组合继承 ###

**核心：**通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

**缺点：**堪称完美，但实现较为复杂

function Person(name) {
                this.name = name;
                this.friends = ['小李','小红'];
            }
    
            Person.prototype.getName = function () {
                return this.name;
            };
    
            function Parent(age) {
                Person.call(this,"老明");
                this.age = age;
            }
    
            (function () {
                var Super = function () {};     // 创建一个没有实例方法的类
                Super.prototype = Person.prototype;
                Parent.prototype = new Super();     //将实例作为子类的原型
            })();
    
            var result = new Parent(23);
            console.log(result.name);
            console.log(result.friends);
            console.log(result.getName());
            console.log(result.age);

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript 实现继承的几种方法

* 1、原型链继承** **核心：** 将父类的实例作为子类的原型 **缺点：** 父类新增原型方法/原型属性，子类都能访问到，父类一变其它的都变了 fun...

﹏ヽ暗。殇╰゛Y/ 2024年04月18日 09:07/ 0 赞/ 66 阅读

相关 Javascript中的几种继承？如何实现继承？

在 JavaScript 内, 继承是面向对象变成中一个重要的开发思想, 核心就是让 A 对象使用 B 对象的属性和方法. 说白了, 就是为了资源整合, 让我们的代码复用性更高

末蓝、/ 2024年03月25日 06:08/ 0 赞/ 46 阅读

相关 JavaScript实现继承的几种方法

JavaScript实现继承的几种方法原型链继承 prototype原型相当于一个对象的父类，所有实例都会共享原型上的属性和方法。 constructor构造

你的名字/ 2023年03月13日 02:11/ 0 赞/ 22 阅读

相关 JavaScript继承的几种方法

文章目录继承 1. 什么是继承例子: 面向对象的特性:封装,继承,多态 2. JavaScr

小咪咪/ 2023年01月13日 13:59/ 0 赞/ 134 阅读

相关 javascript 实现下载的几种方法

我们在项目开发过程中，经常会遇到下载功能；基于我使用过的方法做了一个总结，然后写下这篇文章作为记录！一、使用 a 标签（get请求） a标签是最简单的方法，只需要把文

绝地灬酷狼/ 2023年01月01日 03:59/ 0 赞/ 151 阅读

相关 JavaScript继承的几种方式解析

(一).对象冒充概念:新的类冒充旧的类(旧的类必须采用构造函数的方式) 示例代码: //父类 function people(name,age)\{ this.n

短命女/ 2022年09月17日 12:23/ 0 赞/ 161 阅读

相关 Javascript中的几种继承方式比较

开篇 > 从’严格’意义上说，javascript并不是一门真正的面向对象语言。这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c\之类的强

太过爱你忘了你带给我的痛/ 2022年07月31日 16:16/ 0 赞/ 171 阅读

相关 JavaScript中的几种继承方式

JavaScript中的几种继承方式: 一:原型链让原型对象等于另一个类型的实例.此时,原型对象包含一个指向另一个原型的指针,相应地,另一个原型中也包含着指

痛定思痛。/ 2022年07月10日 04:22/ 0 赞/ 186 阅读

相关 JS实现继承的几种方式

前言 JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。 JS继承的实现方式既然要实现继承，那么首先我们得有一

墨蓝/ 2022年06月17日 07:50/ 0 赞/ 262 阅读

相关 JS实现继承的几种方式

前言 JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。既然要实现继承，那么首先我们得有一个父类，代码如下：

你的名字/ 2021年01月27日 16:07/ 0 赞/ 758 阅读