js怎么实现继承

刺骨的言语ヽ痛彻心扉 2022-11-08 11:53 107阅读 0赞

#### js怎么实现继承 ####

**一、原型链继承**

将父类的实例作为子类的原型，这样根据原型链，子类就可以访问到父类的属性和方法。

function Parent() { 
       this.isShow = true
       this.info = { 
           name: "yhd",
           age: 18,
       };
    }
    
    Parent.prototype.getInfo = function() { 
       console.log(this.info);
       console.log(this.isShow); // true
    }
    
    function Child() { };
    Child.prototype = new Parent();
    
    let Child1 = new Child();
    Child1.info.gender = "男";
    Child1.getInfo();  // {name: "yhd", age: 18, gender: "男"}
    
    let child2 = new Child();
    child2.getInfo();  // {name: "yhd", age: 18, gender: "男"}
    child2.isShow = false
    
    console.log(child2.isShow); // false

**优点：**

> 1、父类方法可以复用

**缺点：**

> 1.  父类的所有`引用属性`（info）会被所有子类共享，更改一个子类的引用属性，其他子类也会受影响
> 2.  子类型实例不能给父类型构造函数传参

**二、构造函数继承**

function Parent() { 
      this.info = { 
        name: "yhd",
        age: 19,
      }
    }
    
    function Child() { 
        Parent.call(this)
    }
    
    let child1 = new Child();
    child1.info.gender = "男";
    console.log(child1.info); // {name: "yhd", age: 19, gender: "男"};
    
    let child2 = new Child();
    console.log(child2.info); // {name: "yhd", age: 19}

通过使用`call()`或`apply()`方法，`Parent`构造函数在为`Child`的实例创建的新对象的上下文执行了，就相当于新的`Child`实例对象上运行了`Parent()`函数中的所有初始化代码，结果就是每个实例都有自己的`info`属性。

相比于原型链继承，构造函数继承可以给父类构造函数传参。

function Parent(name) { 
        this.info = {  name: name };
    }
    function Child(name) { 
        //继承自Parent，并传参
        Parent.call(this, name);
        
         //实例属性
        this.age = 18
    }
    
    let child1 = new Child("yhd");
    console.log(child1.info.name); // "yhd"
    console.log(child1.age); // 18
    
    let child2 = new Child("wxb");
    console.log(child2.info.name); // "wxb"
    console.log(child2.age); // 18

**优点:**

> 1.  可以在子类构造函数中向父类传参数
> 2.  父类的引用属性不会被共享

**缺点：**

> 1.  子类不能访问父类原型上的方法（即不能访问Parent.prototype上定义的方法），因此所有方法属性都写在构造函数中，每次创建实例都会初始化

**三、组合继承**

组合继承综合了原型链继承和构造函数继承，将两者的优点结合了起来。

基本的思路就是使用原型链继承原型上的属性和方法，而通过构造函数继承实例属性，这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性

function Parent(name) { 
       this.name = name
       this.colors = ["red", "blue", "yellow"]
    }
    Parent.prototype.sayName = function () { 
       console.log(this.name);
    }
    
    function Child(name, age) { 
       // 继承父类属性
       Parent.call(this, name)
       this.age = age;
    }
    // 继承父类方法
    Child.prototype = new Parent();
    
    Child.prototype.sayAge = function () { 
       console.log(this.age);
    }
    
    let child1 = new Child("yhd", 19);
    child1.colors.push("pink");
    console.log(child1.colors); // ["red", "blue", "yellow", "pink"]
    child1.sayAge(); // 19
    child1.sayName(); // "yhd"
    
    let child2 = new Child("wxb", 30);
    console.log(child2.colors);  // ["red", "blue", "yellow"]
    child2.sayAge(); // 30
    child2.sayName(); // "wxb"
    
    复制代码

**优点：**

> 1.  父类的方法可以复用
> 2.  可以在Child构造函数中向Parent构造函数中传参
> 3.  父类构造函数中的引用属性不会被共享

发表评论取消回复

表情：

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

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

相关阅读

相关 js怎么实现继承

js怎么实现继承一、原型链继承将父类的实例作为子类的原型，这样根据原型链，子类就可以访问到父类的属性和方法。 function Parent() {

刺骨的言语ヽ痛彻心扉/ 2022年11月08日 11:53/ 0 赞/ 108 阅读

相关 js--继承

每个类有3部分，第一部分是构造函数内的，供实例化对象复制用的第二部分是构造函数外的，直接通过点语法添加，这是供类使用的，实例化对象访问不到第三部分是类的原型中

╰半夏微凉°/ 2022年07月11日 01:47/ 0 赞/ 173 阅读

相关 js继承

1、prototype方式 var BaseClass = function () \{ this.name = "3zfp";

ゞ浴缸里的玫瑰/ 2022年06月09日 04:08/ 0 赞/ 153 阅读

相关 js继承

构造函数的原型继承 function qq(name,age) { this.name = name

你的名字/ 2022年05月11日 01:04/ 0 赞/ 184 阅读

相关 js实现多重继承的例子

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[http://www.w3.org/TR/ht

川长思鸟来/ 2022年03月27日 13:20/ 0 赞/ 230 阅读

相关 JS实现继承 JavaScript

JS实现继承 JavaScript 定义一个父类： // 定义一个动物类 function Animal (name) { // 属性

太过爱你忘了你带给我的痛/ 2022年03月25日 03:11/ 0 赞/ 226 阅读

相关 js继承与实现（总结）

> 之前说要将js继承写完全，好像时间和能力不太允许，所以，将笔记分享给大家，与大家一同学习，一起进步！【转】 [幻天芒][Link 1] ：[https://www.c

秒速五厘米/ 2022年03月16日 08:52/ 0 赞/ 151 阅读

相关 js继承:一网打尽js继承

转载：原地址：[https://mp.weixin.qq.com/s/NkxW367Znl5Hb47\_vv8Eeg][https_mp.weixin.qq.com_s_Nkx

刺骨的言语ヽ痛彻心扉/ 2022年03月12日 07:24/ 0 赞/ 216 阅读

相关 js实现继承的方式

出于对作者的尊重和感谢，原文地址为 [http://javapolo.iteye.com/blog/1996871][http_javapolo.iteye.com_blog_

缺乏、安全感/ 2022年03月06日 11:04/ 0 赞/ 347 阅读

相关 js继承

var animal=function(name){ //构造函数 this.name=name; this.sayhe

拼搏现实的明天。/ 2021年12月22日 02:43/ 0 赞/ 237 阅读