js继承的几种方法和es6继承方法

最新推荐文章于 2022-10-09 16:13:03 发布
最新推荐文章于 2022-10-09 16:13:03 发布
阅读量357 收藏 2
点赞数
分类专栏： Js特性
原文链接：https://www.cnblogs.com/webdragon/p/9787662.html
版权

 一、原型链继

    1.基本思想

    利用原型链来实现继承，超类的一个实例作为子类的原型

    2、具体实现

复制代码

 1 function F() {}
 2 
 3     //原型属性，原型方法：
 4 
 5     F.prototype.name="Lee";
 6 
 7     F.prototype.age=33;
 8 
 9     F.prototype.run=function(){
10 
11         return this.name+" "+this.age+" running";
12 
13     }
14 
15     var f = new F();
16 
17     console.log(f.name);
18 
19     console.log(f.run);

复制代码

 

    3.优缺点

    1）优点

    简单明了，容易实现

    实例是子类的实例，实际上也是父类的一个实例

    父类新增原型方法/原型属性，子类都能访问到

    2）缺点

    所有子类的实例的原型都共享同一个超类实例的属性和方法

    无法实现多继承

    在创建子类的实例时 不能向父类的构造函数传递参数

 

    二、构造函数继承

    1。基本思想

    通过使用call、apply方法可以在新创建的对象上执行构造函数,用父类的构造函数来增加子类的实例

    2、具体实现

  

复制代码

 1  function F() {
 2 
 3         // 属性
 4 
 5         this.name = name || 'dragon';
 6 
 7         // 实例方法
 8 
 9         this.sleep = function(){
10 
11             console.log(this.name + '正在睡觉！');
12 
13         }
14 
15  
16 
17     }
18 
19     function C(name){
20 
21         F.call(this);
22 
23         this.name = name || 'Tom';
24 
25     }
26 
27     var c=new C()
28 
29     console.log(c.name);
30 
31     console.log(c.sleep());

复制代码

 

    3.优缺点

    1）优点

    简单明了，直接继承超类构造函数的属性和方法

    2）缺点

    无法继承原型链上的属性和方法

 

    三、实例继承

    1.基本思想

    为父类实例添加新特性，作为子类实例返回

    具体实现

复制代码

 1  function F() {
 2 
 3         // 属性
 4 
 5         this.name = name || 'Animal';
 6 
 7         // 实例方法
 8 
 9         this.sleep = function(){
10 
11             console.log(this.name + '睡觉');
12 
13         }
14 
15     }
16 
17     function C(name){
18 
19         var instance = new F();
20 
21         instance.name = name || 'Tom';
22 
23         return instance;
24 
25     }
26 
27     var c = new C();
28 
29     console.log(c.name);
30 
31     console.log(c.sleep());

复制代码

 

    特点：

1. 不限制调用方式，不管是new 子类()还是子类(),返回的对象具有相同的效果

    缺点：

1. 实例是父类的实例，不是子类的实例

    2. 不支持多继承

 

    四、组合继承

    1.基本思想

    利用构造继承和原型链组合

    2.具体实现

   

复制代码

 1  function F() {
 2 
 3         // 属性
 4 
 5         this.name = name || 'Animal';
 6 
 7         // 实例方法
 8 
 9         this.sleep = function(){
10 
11             console.log(this.name + '正在睡觉！');
12 
13         }
14 
15     }
16 
17     function C(name){
18 
19         F.call(this);//构造函数继承
20 
21         this.name = name || 'Tom';
22 
23     }
24 
25     C.prototype = new F();//原型继承
26 
27     var q=new C();
28 
29     console.log(q.name);
30 
31     console.log(q.sleep());

复制代码

 

    3.优缺点

    1）优点

    解决了构造继承和原型链继承的两个问题

    2）缺点

     实际上子类上会拥有超类的两份属性，只是子类的属性覆盖了超类的属性

 

    五、原型式继承

    1.基本思想

    采用原型式继承并不需要定义一个类，传入参数obj,生成一个继承obj对象的对象

    2、具体实现

   

复制代码

 1  var obj = {
 2 
 3         name: "qw",
 4 
 5         age: "12",
 6 
 7         ada:"asd"
 8 
 9     }
10 
11  
12 
13     function F(o) {
14 
15         function C() {}
16 
17         C.prototype = o;
18 
19         return new C();
20 
21     }
22 
23     var q= F(obj)
24 
25     console.log(q.name);
26 
27     console.log(q.age);

复制代码

 

    3.优缺点

    1）优点：

     直接通过对象生成一个继承该对象的对象

    2）缺点：

  不是类式继承，而是原型式基础，缺少了类的概念

    六、寄生式继承

    原型式+工厂模式 
 解决了组合继承两次调用构造函数的问题

    1.基本思想

    创建一个仅仅用于封装继承过程的函数，然后在内部以某种方式增强对象，最后返回对象

    2、具体实现

  

复制代码

 1 //临时中转函数
 2 
 3     function obj(o) {
 4 
 5         function F() {}
 6 
 7         F.prototype = o;
 8 
 9         return new F();
10 
11     }
12 
13     //寄生函数
14 
15     function create(o){
16 
17         var q= obj(o);
18 
19         //可以对f进行扩展
20 
21         q.sleep = function(){
22 
23             return this.name+”睡觉”;
24 
25         }
26 
27         return q;
28 
29     }
30 
31     var box = {
32 
33         name: 'Lee',
34 
35         age: 100,
36 
37         family: ['Dad', 'Mom', 'Sister']
38 
39     };
40 
41     var box1 = create(box);
42 
43     alert(box1.name);
44 
45     alert(box1.run());

复制代码

 

    3.优缺点

    1）优点：

    *  原型式继承的一种拓展

    2）缺点：

    *  依旧没有类的概念

 

    七、寄生组合继承

    通过调用构造函数来继承属性，通过原型链混成形式继承方法，与组合继承不同之处在于子类型只继承了超类型原型的一个副本，并未继承其构造函数。因此只需要调用一次超类型构造函数。

1.基本思想

    结合寄生式继承和组合式继承，完美实现不带两份超类属性的继承方式

    2.具体实现

   

复制代码

 1  //临时中转函数
 2 
 3     function obj(o) {
 4 
 5         function F() {}
 6 
 7         F.prototype = o;
 8 
 9         return new F();
10 
11     }
12 
13     //寄生函数
14 
15     function create(box,desk){
16 
17         var q = obj(box.prototype);
18 
19         q.construtor=d;
20 
21         d.prototype=q;
22 
23     }
24 
25     function B(name,age){
26 
27         this.name=name;
28 
29         this.age=age;
30 
31     }
32 
33     B.prototype.run=function(){
34 
35         return this.name + " " + this.age +  " running..."
36 
37     }
38 
39     function D(name,age){
40 
41         Box.call(this,name,age);
42 
43     }

复制代码

 

    //通过寄生组合继承来实现

    

1 create(B,D);//替代D.prototype=new B();
2 
3     var d= new D('Lee',100);
4 
5     alert(d.run());

 

 

    3.优缺点

    1）优点：

    完美实现继承，解决了组合式继承带两份属性的问题

    2）缺点：

     过于繁琐，故不如组合继承

 

 

 

    Es6. 继承

   

复制代码

 1  lass father{
 2 
 3         constructor(name){
 4 
 5             this.name=name
 6 
 7             this.names=[1,2,3]
 8 
 9         }
10 
11         getname(){
12 
13             console.log(this.name);
14 
15         }
16 
17     }
18 
19     class child extends father{
20 
21         constructor(name){
22 
23             super(name);
24 
25         }
26 
27         sayHello(){
28 
29             console.log("sayHello");
30 
31         }
32 
33         static hh(){
34 
35             console.log("hh")
36 
37         }
38 
39     }
40 
41     var cc=new child("juanjuan");
42 
43     cc.sayHello();
44 
45     cc.getname();  //juanjuan
46 
47     child.hh();  //hh
48 
49     cc.names.push("wqwq");
50 
51     var c1=new child("sasasa");
52 
53     console.log(c1.names)  //[1,2,3]
q414620221
关注
专栏目录
js继承es5、es6的7种方式
maggie_live的博客
07-15 324
构造函数、原型对象 1.构造函数 function A(name) { this.name = name; this.arr = [1]; this.say = function(){ console.log('hi') } } 注意： 数组和方法都属于”实例引用属性“，但是数组强调私有、不共享的。方法需要复用、共享； 在构造函数中，一般很少有数组形式的引用属性，大部分情况都是：...
JS继承和原型链，ES6新继承（class，extends，super)
qq_44638443的博客
12-12 774
JS继承和原型链，ES6新继承（class，extends，super)
es6中实现继承的方式
sunlando的博客
10-10 1965
es6中实现继承的方式 1、使用class构造一个父类 class Parent { constructor(name,age){ this.name = name this.age = age } sayName(){ console.log(this.name); } } 2、使用class构造一个子类，并使用extends实现继承，super指向父类的原型对象 class Child ex
JavaScript 中的继承：ES3、ES5 和 ES6
weixin_33755557的博客
12-31 155
选择一种继承方式 JavaScript 是一门动态语言，动态意味着高灵活性，而这尤其可以体现在继承上面。JavaScript 中的继承有很多种实现方式，可以分成下面四类： Mixin 模式，即属性混入，从一个或多个对象中复制属性到新的对象中 方法借用模式，即通过 call 或 apply 实现方法的重用 原型模式，使用 Object.create 方法直接以一个对象为原型创造新的对象 类模式，实...
ES5、ES6的四种继承方法
L863683305的博客
01-27 1162
ES5、ES6的四种继承 众所周知，在ES6之前，前端是不存在类的语法糖，所以不能像其他语言一样，使用extends关键字就搞定继承关系，需要一些额外的方法来实现继承。 一. 原型链继承 function Parent(){ this.name = 'mortal' } Parent.prototype.getName = function(){ console.log(this....
ES6 的继承方式
好川的博客
05-16 1272
方法1： class中的 constructor 属性 在使用new 创建实例化对象的时候 constructor 的 this 属性会 继承到 实例化对象中 方法2： 创建2个class 对象 class 子对象 extends 父对象 既然都要用到了类class，那么先来了解class: class 的本质是 function。 它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。 class Test { constructor(){ this.a
javascript的几种继承方法介绍
11-28
在JavaScript中，主要有以下几种继承方法： 1. **原型链继承** 原型链继承是JavaScript中最基础的继承方式，利用原型对象（`__proto__`或`prototype`）之间的链接实现。每个构造函数都有一个`prototype`属性，这个...
详解js创建对象的几种方法及继承
12-04
考虑在ES中无法创建类（ES6前），开发人员发明了一种函数，用函数来封装以特定接口创建对象的细节。（实现起来是在一个函数内创建好对象，然后把对象返回）。 function createPerson(name,age,job){ var o=new ...
js继承的这6种方式！（上）
10-17
本文将探讨JavaScript中的六种继承方式，首先从最基础的原型链继承和借用构造函数继承开始。 ### 1. 原型链继承 原型链继承是JavaScript中最基础的继承方式，它利用`prototype`属性来实现。当试图访问一个对象的...
JavaScript中的六种继承方式,以及es6中类的继承
cmhahaha的博客
08-04 347
以下分两类介绍六种继承,以及es6中类的继承 第一类 原型链继承 通过原型将一个引用类型继承另一个引用类型的属性和方法 引用类型的值在原型链传递中存在的问题 我们知道js中有值类型和引用类型，其中引用类型包括Object.Array等，引用类型的值有一个特点：在赋值的时候，赋给变量的是它在内存中的地址。换句话说，被赋值完的变量相当于一个指针，这会有什么问题呢？看例子： function A() { this.name = "a" this.color =..
JS中继承的几种方法（包括ES6的）
杜伊沫的博客
04-10 544
ES6 之前 利用call改变this指向实现继承父类的属性 一般都是在子函数中 写入 父类名. call(this) 来实现 call的第一个参数就是你要改变的对象的对象名，后面的就是传参 在Son函数中，我们要继承父类的uname,age,sex这三个属性，但是Father中的this指向Father的对象，Son中的this指向Son的对象，那么如何实现在Father的构造函数中使用S...
js实现继承的几种方式
Me7on_的博客
11-12 182
1.原型链继承 function Father(name) { this.name = name || 'father'; } Father.prototype.printName = function () { console.log(this.name); }; function Son() {} Son.prototype = new Father();
JavaScript es6 五种常见继承方式
最新发布
m0_51622088的博客
10-09 2252
原型继承、构造函数继承、组合继承、寄生组合继承、class继承
笔记：js继承（含es6方法）
一个技术垃圾站
08-02 301
js继承实现方式主要分为es5和es6，先说一下es5的继承方法_(:з」∠)_ 首先es5的继承主要是通过prototype来实现，具体有三种方法 举个栗子：比方说有两个类A和B，问B怎么样继承A 第一种：原型链继承，也就是B.prototype=new A（） 第二种：借用构造函数继承 function B(name,age){ A.call(this,name,age) } 第三种：组合...
ES5和ES6中对于继承的实现方法
99的博客
02-08 6283
在ES5继承的实现非常有趣的，由于没有传统面向对象类的概念，Javascript利用原型链的特性来实现继承，这其中有很多的属性指向和需要注意的地方。 原型链的特点和实现已经在之前的一篇整理说过了，就是通过将子类构造函数的原型作为父类构造函数的实例（sub.prototype=new super），这样就连通了子类-子类原型-父类，原型链的特点就是逐层查找，从子类开始一直往上直到所有对象的原型Ob
js中ES6的继承
素描本里的男子的博客
05-29 2359
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> <script> class Person{ ...
js es6 继承方法
qq_43222248的博客
09-24 484
class A { } class B { } // B 的实例继承 A 的实例 Object.setPrototypeOf(B.prototype, A.prototype); // B 继承 A 的静态属性 Object.setPrototypeOf(B, A); const b = new B();
【JS】中的继承（包括ES6）
m0_48982503的博客
01-11 353
一、原型链继承 1. 基本思想 原型链继承的基本思想是通过原型来继承多个引用类型的属性和方法 实现的基本思路是利用构造函数实例化对象，通过 new 关键字，将构造函数的实例对象作为子类函数的原型对象。 2. 实现方法 // 定义父类函数 function Father() { // 定义父类属性 this.name = 'father' } // 给父类的原型添加方法 Father.prototype.say = function () { console.log(.
JS中的继承（包括ES6里继承）
qq_51882068的博客
01-26 248
 原生 JS 中的类、静态方法、继承 常见的继承方法有原型链继承、对象冒充继承 但两者各有缺点 原型链继承：可以继承构造函数里面以及原型链上面的属性和方法，实例化子类的时候没法给父类传参 对象冒充继承：没法继承原型链上面的属性和方法 类和属性和方法 function Person(name,age) { this.name=name; this.age=age; this.run=function(){ console.log(this.name+'---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值