JS中继承的几种方法（包括ES6的）

最新推荐文章于 2024-06-25 09:08:41 发布
最新推荐文章于 2024-06-25 09:08:41 发布
阅读量544 收藏 3
点赞数 3
文章标签： es6 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36091461/article/details/105443014
版权

ES6 之前
利用call改变this指向实现继承父类的属性
一般都是在子函数中 写入 父类名. call(this) 来实现
call的第一个参数就是你要改变的对象的对象名，后面的就是传参

在这里插入图片描述

在Son函数中，我们要继承父类的uname,age,sex这三个属性，但是Father中的this指向Father的对象，Son中的this指向Son的对象，那么如何实现在Father的构造函数中使用Son对象呢？这时就想到要利用call来改变this指针实现

call的第一个参数是你要改变的this指向的对象名，比如当你创建李四这个对象时，我们想让Father中的this指向李四这个对象，所以就在call的第一个参数写this, 为什么写this？这个是要弄清楚new创建的过程，当你创建李四这个对象时，就会在内存中创建一个空对象，然后this指向这个对象 ，所以call 中this就指向创建的这个空对象，然后在执行Father中属性赋值

注意call后面的参数（uname,age,sex）一定要记得写，如果你不写，就无法进行赋值操作，最后打印出来是undefined

利用原型改实现继承
一般都是通过 子类名.prototype = new 父类名() 来实现

在这里插入图片描述

new Father()之后会创建一个对象，然后这个对象赋值给Son的prototype属性。所以Son会根据prototype的指向找到这个Father创建的对象 ，Father创建的这个对象上面有一个__proto__属性，它指向Father()构造函数的原型， 所以就会实现继承，如下图所示
在这里插入图片描述

有一点需要注意的是，利用原型继承之后，会改变Son的constructor指向，所以我们还需要改变将constructor重新指向Son，

利用call与原型组合继承
这种方法就是将上面两种方法结合起来

ES6之后
利用extends 来实现继承
在子类构造方法名后面写 extends 父类名
将在constructor()函数内写入super(形参名)，注意super要写在所有的this属性前面

在这里插入图片描述

杜沫
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js继承es5、es6的7种方式
maggie_live的博客
07-15 316
构造函数、原型对象 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 755
JS继承和原型链，ES6新继承（class，extends，super)
es6 继承
叨叨不休的日字
07-26 611
1. 关于class的本质 定义一个类 class Person{ constructor(skin,language){ this.skin=skin; this.language=language; } say(){ console.log('I am a Person') } } 由于class本质还是...
详解ES6中的类、对象和类的继承
最新发布
流绪@微梦
06-25 1048
在ES6（ECMAScript 2015）之前，JavaScript 并没有像其他面向对象的编程语言那样的类（class）的概念。相反，它使用了一种基于原型的继承模型来实现面向对象编程。然而，这种模型对于许多开发者来说可能比较难以理解，特别是在与更传统的面向对象语言（如Java或C++）相比较时。为了简化面向对象的编程范式并提供更直观的代码组织方式，ES6引入了类的概念。虽然JavaScript的类实际上是基于原型的继承和构造函数的语法糖，但它提供了一种更加清晰、简洁的方式来定义对象的行为和结构。
es6类的继承，看完还不会我也没办法
leleshuo
10-12 1097
今天来聊聊es6类的继承，上一次关于类的一些写法和特性已经总结的差不多了，所以这次重点就在继承上面了。
ES6 的继承方式
好川的博客
05-16 1265
方法1： class中的 constructor 属性 在使用new 创建实例化对象的时候 constructor 的 this 属性会 继承到 实例化对象中 方法2： 创建2个class 对象 class 子对象 extends 父对象 既然都要用到了类class，那么先来了解class: class 的本质是 function。 它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。 class Test { constructor(){ this.a
JS中ES6继承
qq_37805832的博客
09-11 718
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/jav
javascript的几种继承方法介绍
11-28
在JavaScript中，主要有以下几种继承方法： 1. **原型链继承** 原型链继承是JavaScript中最基础的继承方式，利用原型对象（`__proto__`或`prototype`）之间的链接实现。每个构造函数都有一个`prototype`属性，这个...
Javascript中的几种继承方式对比分析
11-26
虽然JavaScript被许多人认为不是一种传统的面向对象语言，但它的灵活性和强大的继承模式使其在Web开发中扮演着关键角色。在JavaScript中，有多种实现继承的方式，每种都有其优缺点，适用于不同的场景。 首先，我们...
详解js创建对象的几种方法及继承
12-04
考虑在ES中无法创建类（ES6前），开发人员发明了一种函数，用函数来封装以特定接口创建对象的细节。（实现起来是在一个函数内创建好对象，然后把对象返回）。 function createPerson(name,age,job){ var o=new ...
js中ES6的继承
素描本里的男子的博客
05-29 2354
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> <script> class Person{ ...
ES5、ES6的四种继承方法
L863683305的博客
01-27 1152
ES5、ES6的四种继承 众所周知，在ES6之前，前端是不存在类的语法糖，所以不能像其他语言一样，使用extends关键字就搞定继承关系，需要一些额外的方法来实现继承。 一. 原型链继承 function Parent(){ this.name = 'mortal' } Parent.prototype.getName = function(){ console.log(this....
JavaScript es6 五种常见继承方式
m0_51622088的博客
10-09 2242
原型继承、构造函数继承、组合继承、寄生组合继承、class继承
JavaScript-ES6继承
梧桐野老的博客
03-07 391
在子类构造器中调用父类的构造器实例父类 涉及关键字：extends super 案例: // 创建父类 -Prenson class Preson{ constructor(name,age){ this.name = name this.age = 18 } say(){ console.log(this.name,'说话') ..
JS中ES6的继承方法
weixin_42943920的博客
01-01 323
<script> window.onload = function(){ // es6中的继承,就是类和类之间的继承,通过extends和super()方法实现继承 // Person类 class Person { sleep(){ console.log('time to sleep'); } constructor(name){ this.name = nam
js继承的几种方法和es6继承方法
q414620221的专栏
03-04 356
一、原型链继 1.基本思想 利用原型链来实现继承，超类的一个实例作为子类的原型 2、具体实现 1 function F() {} 2 3 //原型属性，原型方法： 4 5 F.prototype.name="Lee"; 6 7 F.prototype.age=33; 8 9 F.prototype.r...
JavaScript中的六种继承方式,以及es6中类的继承
cmhahaha的博客
08-04 344
以下分两类介绍六种继承,以及es6中类的继承 第一类 原型链继承 通过原型将一个引用类型继承另一个引用类型的属性和方法 引用类型的值在原型链传递中存在的问题 我们知道js中有值类型和引用类型，其中引用类型包括Object.Array等，引用类型的值有一个特点：在赋值的时候，赋给变量的是它在内存中的地址。换句话说，被赋值完的变量相当于一个指针，这会有什么问题呢？看例子： function A() { this.name = "a" this.color =..
es6中实现继承的方式
sunlando的博客
10-10 1963
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
ES6继承
katherin_wanzi的博客
07-22 339
继承1.call()方法2.利用父构造函数继承属性3.利用原型对象继承方法 1.call()方法 ES6之前并没有提供extends继承，我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承 call() 调用这个函数，并且修改函数运行时的this指向 fun.call(thisArg, arg1, arg2, …) thisArg为指向的对象，arg1,arg2…为参数 <script> function fn(x, y) { console.lo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值