js如何实现继承？六种继承模式

最新推荐文章于 2023-03-29 11:18:46 发布
最新推荐文章于 2023-03-29 11:18:46 发布
阅读量204 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HZ___ZH/article/details/110405824
版权

知识重温：

  • 每个构造函数都有一个原型对象，原型有一个属性（constructor）指回构造函数，而实例有一个内部指针_proto_（[[Prototype]]） 指向原型。实例与构造函数的原型之间有直接关系，实例与构造函数之间没有。
  • 原型链的基本思想：上面如果原型是另一个类型的实例呢？意味着这个原型本身有一个内部指针指向另一个原型，相应的另一个原型也有一个指针（constructor）指向另一个构造函数。这样就在实例和原型之间构造了一条原型链.原型链还有一环，所有引用类型都继承Object，任何函数的默认原型都是一个Object实例，这就意味着这个实例有一个内部指针指向object.prototype.
    在这里插入图片描述

一.原型链继承

基本思路：通过原型继承多个引用类型的属性和方法。
缺点：
1.原型中包含的引用值会在所有实例间共享
2.子例在实例化时不能给父类型的构造函数传递参数。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <button id="btn">按钮</button>
    <script>


        function SuperType() {
            this.property = true;
        }
        SuperType.prototype.getSuperValue = function () {
            return this.property;
        }
        function SubType() {
            this.subproperty = false;
        }
        //继承 SuperType
最低0.47元/天 解锁文章
Y or Z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js之继承 ==== js设计模式
WLIULIANBO的博客
12-07 106
js之继承 前言 继承在js中占有非常重要的地位，那么在js中有很多中继承的方式，不过每一种继承方式都有优缺点。下面就列举几种继承的方式。 实现继承首先需要一个父类，在js中实际上是没有类的概念，在es6中class虽然很像类，但实际上只是es5上语法糖而已 function People(name){ //属性 this.name = name || 'Annie' //实例方法 this.sleep=function(){ console.log(this.name + '正
JS 设计模式--继承
青春的小白
09-01 495
js继承有好多种实现形式，下面来讲一下基于类的继承function person (name,age) { this.name = name; this.age = age; this.like= []; } person.prototype.say = function () { console.log(this.name + " , " +
js对象的几种设计模式与继承
qq_37400096的博客
11-03 177
1.工厂模式 function createPerson(name,age,job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); } return o; } //创建一个对象 var person1 = creat...
JavaScript中实现继承的两种设计模式
weixin_43750480的博客
03-06 665
1.第一种就是通过面向对象的方式实现继承 这种风格是比较常见而且比较常用的 // ***面向对象设计模式*** // Foo构造函数 function Foo(who) { this.me = who; } // 在Foo的原型中添加identify方法 Foo.prototype.identify = function() { return "I am " + this.me; }; ...
js对象继承的5种方法和JS的5种设计模式
CC酱写前端的博客
07-13 376
JS继承与设计模式
JS实现面向对象继承的5种方式分析
10-18
JavaScript是一种基于原型的动态类型语言，它没有像Java或C++那样的传统类继承机制，而是通过其他方式实现了面向对象的继承。在JavaScript中，有多种实现面向对象继承的方法，包括对象冒充、`call`/`apply`方法、...
利用javascript中的call实现继承
10-31
JavaScript是一种动态类型的语言，它没有像Java或C++那样的传统类继承机制，而是采用原型链（prototype chain）和函数作为构造器的模式实现继承。在JavaScript中，`call`和`apply`方法是两种非常重要的函数调用方式...
重新理解JavaScript的六种继承方式
11-28
以下是JavaScript的六种继承方式中的两种主要方式：类式继承（构造函数）和原型继承的详细解析。 ### 类式继承（构造函数） 在JavaScript中，并没有真正的类概念，但可以通过构造函数来模拟类的行为。当使用`new`...
JavaScript实现继承的4种方法总结
12-11
以下是对四种常见JavaScript继承方式的详细解释： 1. 原型链继承 原型链继承是JavaScript中最基本的继承模式，它依赖于原型（prototype）和`__proto__`属性。在给定的代码中，创建了一个Base构造函数，然后将Sub...
JS继承中的本地属性与继承属性
sunxing007的专栏
05-18 4029
<br />本地属性与继承属性<br />对象通过隐式Prototype链能够实现属性和方法的继承，但prototype也是一个普通对象，就是说它是一个普通的实例化的对象，而不是纯粹抽象的数据结构描述。所以就有了这个本地属性与继承属性的问题。<br /> 首先看一下设置对象属性时的处理过程。JS定义了一组attribute，用来描述对象的属性property，以表明属性property是否可以在JavaScript代码中设值、被for in枚举等。<br /> obj.propName=value的赋值
js常见的六种继承方式
最新发布
weixin_46369590的博客
03-29 894
然后，createObject函数通过增强新对象的方式，在新对象上添加了sayName方法，从而实现继承和增强。然后，将子类的原型设置为临时构造函数的实例，从而实现了对父类原型的继承。寄生组合式继承是指通过借用构造函数来继承实例属性，然后通过将原型设置为一个继承父类原型的实例来继承父类原型上的属性和方法。这种方式的缺点是所有新对象的实例属性都会共享obj对象的属性，导致无法实现真正意义上的继承。原型式继承是指通过使用一个已有的对象作为新对象的原型来创建新对象，从而实现继承。，从而创建了一个新的对象，并将。
JS继承的四种方式
echomsy的博客
09-01 273
继承是面向对象语言中的一个最为人津津乐道的概念。许多面向对象语言都支持继承，JS没有明确的继承机制，而是通过模拟实现的。由于JS语言的灵活性，有下列几种方式可以实现继承： 1. 使用对象冒充实现继承 // 父构造函数 function Parent(name, age) { this.name = name; this.age = age; this.say = function() { console.log("my name is " + this.name +
es5 7种继承方式
Lee_taotao的博客
11-27 2079
继承ES5 继承1、原型链继承2、借用构造函数继承3、组合继承原型式继承寄生式继承寄生式组合继承ES6 class继承class继承 ES5 继承 // 定义一个父类 function Parent(name) { // 属性 this.name = name || 'parent' this.friends = ['xiaoli', 'red', 'blue'] // 实例方法 this.say = function() { console.log(this.name + '
盗用构造函数继承
Kobeloveu
07-31 272
盗用构造函数继承（对象伪装或经典继承），个人觉得的盗用构造函数继承这个名字更语义化，听到这个名字就能想到。子类构造函数调用父类构造函数，利用函数在特定上下文中执行的特性，去创建一个对象实例 主要使用call或者apply方法以先创建的对象为上下文执行构造函数。 优点：解决了子类构造函数可以向父类构造函数传参的问题 缺点：子类不能访问父类的原型，同样也不能访问父类的方法 使用call方法，让父类构造函数在子类构造函数中执行，更像创建对象的工厂模式，是直接在子类构造函数中，创建一个新的对象以this承接上
js对象的三种继承方式
Just for use
06-23 7197
一，js中对象继承 js中有三种继承方式 1.js原型（prototype）实现继承 复制代码 代码如下:           function Person(name,age){           this.name=name;           this.age=age;       }       Person.prototype.sayHello=f
promise捕获错误方式？用 try catch 可以捕获吗？
HZ___ZH的博客
08-30 3532
捕获错误方式 rejected catch 全局捕获示例：unhandledrejection window.addEventListener('unhandledrejection', function(event) { // the event object has two special properties: alert(event.promise); // [object Promise] - the promise that generated the error alert(e
js拖拽功能的实现
HZ___ZH的博客
08-25 2043
如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。 1.onmousedown：鼠标按下事件 2.onmousemove:鼠标移动事件 3.onmouseup:鼠标抬起事件 拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化；元素的移动就是style.position的top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。 拖拽状态 = 0鼠标在元素上按下的时候
Fetch 请求的超时设置与终止请求
HZ___ZH的博客
08-30 1382
要求 fetch 请求,3秒超时输出超时,不管成功与否,成功输出成功,失败输出失败。 考察实现：Fetch 请求的超时设置与终止请求 解决 在使用XMLHttpRequest可以设置请求超时时间，可是转用Fetch后，超时时间设置不见了,在网络不可靠的情况下，超时设置往往很有用 ES6以后Promise 出现解决地狱回调等不优雅的代码风格。个人理解这个更像是一个生产者和消费者的关系，查看 Promise文档，有以下两个方法 Promise.race([promise1,promise2]) 传入多个Prom
js手写题
HZ___ZH的博客
01-16 770
new 创建一个空对象 让构造函数中的this指向新对象 设置新对象的proto属性指向构造函数的原型对象 判断构造函数的返回值类型，如果是值类型，则返回新对象。如果是引用类型，就返回这个引用类型的对象。 function newObject(){ //创建一个空对象 let obj = {}; // 排除第一个构造函数参数 Constructor = [].shift.call(arguments); //设置新对象的proto属性指向构造函数的原型对象 obj._proto_ = Con
JavaScript培训：封装、继承与多态
这篇JS培训材料涵盖了JavaScript的核心概念，包括TDD（测试驱动开发）、对象封装、继承和多态等。同时，它还强调了编程原则和实践，如SOLID、KISS、DRY和YAGNI，并提到了一些编程工具和库的使用。 1. **TDD（测试...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值