经典的原型链例子。

最新推荐文章于 2022-06-21 16:55:35 发布
最新推荐文章于 2022-06-21 16:55:35 发布
阅读量443 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/minjun0901/article/details/6346397
本文介绍了一种使用JavaScript实现类继承的方法。通过定义一个临时构造函数并将其原型指向父类的原型，子类可以继承父类的所有属性和方法。此外，文章还展示了如何确保子类实例的constructor属性正确指向子类。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 function extend(subClass, superClass) {

             var F = function() {};

F.prototype = superClass.prototype;

subClass.prototype = new F();

subClass.prototype.constructor = subClass;

}

 

 

iLove9ouHenry
关注
一个例子让你明白原型对象和原型链
追
06-12 3万+
开篇 之前对js中的原型链和原型对象有所了解，每当别人问我什么是原型链和原型对象时，我总是用很官方（其实自己不懂）的解释去描述。有一句话说的好：如果你不能把一个很复杂的东西用最简单的话语描述出来，那就说明你没有真正的理解。最近正在读《Javascript高级程序设计》，书中对原型对象和原型链的描述让我受益匪浅，下面仅用一个对比性的例子来说明。 我们经常会这么写 function Perso
原型与原型链
weixin_50756332的博客
01-15 1470
原型链在结构上很像链表，每个对象中都保存着一个地址，指向当前对象的原型，可以层层向上查找，起到继承的效果。原型链是JS实现继承的一种机制。
原型链的实例
weixin_43898497的博客
03-09 207
结合原型链的基本图 谈谈实例 图1 //父类型 function Supper() { this.supProp = 'Supper property' } Supper.prototype.showSupperProp = function () { console.log(this.supProp) } //子类型 function Sub() { this.subProp = 'Sub property' } // 子类型的原型为父类型的
原型链解析，原型链例子
weixin_48205715的博客
02-23 644
先来了解一些概念： 原型（prototype）：是一个对象，作用是共享方法 原型链：在任意对象和Object.prototype之间，存在一条由__proto__进行连接的链，即为原型链 原型链是个抽象的概念，我们通过例子来解析原型链 定义了构造函数Star，构造函数Star的原型对象（Star.prototype）,以及构造函数Star的实例化对象kb 以上三者的关系如下 ①构造函数Star通过prototype指向Star的原型对象prototype ...
1.原型链实例
小漠007的专栏
05-11 560
//构造函数------------     function Shape() {         this.name = "Shape";         this.toString = function() {             return this.name;         }     }     //构造函数------------     funct
经典原型链、继承解析
weixin_33733810的博客
12-27 168
原型 我们知道任何一个函数都存在一个prototype属性，他是个对象，这个对象 我们就叫他原型对象这个原型对象本身也自带两个属性：constructor 和 proto constructor: 这个属性是指向创建此对象的构造函数的引用，构造函数的实例化对象，也可以通过constuctor属性来访问构造它的那个函数_proto_: 这个...
浅谈JS原型对象和原型链
10-22
在例子中，`obj`的原型链是`obj -> f.prototype -> Object.prototype -> null`。 `__proto__`是对象内部的一个指针，指向其构造函数的`prototype`，而`prototype`是构造函数的一个属性。这意味着当我们访问对象的...
详解js中的原型，原型对象，原型链
10-15
在JavaScript中，原型、原型对象和原型链是理解面向对象编程的关键概念。下面将深入解析这三个概念，并通过实例展示它们的工作原理。 首先，**原型**是JavaScript中的一个核心概念，它允许对象之间共享属性和方法。...
JavaScript原型及原型链终极详解
10-23
JavaScript中的原型和原型链是理解JavaScript继承机制的关键概念。在JavaScript中，每个对象都有一个内部属性`__proto__`，它链接到创建该对象的构造函数的原型对象。原型对象通常包含了可以被实例对象共享的方法和...
图解JS原型和原型链实现原理
10-14
JavaScript中的原型和原型链是其继承机制的核心，理解这两者对于深入学习JS至关重要。本文将通过详细的图解和实例代码，帮助你理解这两个概念及其实现原理。 首先，我们需要明白JavaScript的发展背景。JavaScript...
完整原型链详细图解（构造函数、原型、实例化对象）
热门推荐
spicyboiledfish的博客
05-03 1万+
一、首先说一下什么是构造函数： 构造函数：用来在创建对象时初始化对象。特点：构造函数名一般为大写字母开头；与new运算符一起使用来实例化对象。 举例： function Person(){} //Person构造函数 var p=new Person(); //Person构造函数创建对象,也可叫做实例化 二、什么是原型？ 原型：构造函数在实例化对象的过程中，系统自动创建出来与其相关联的一个空的对象。可以由构造函数.prototype来访问到。 举例：在实例
JavaScript原型与原型链以及实例
sinat_27801935的博客
05-20 347
谈到JavaScript的原型链，需要思考的几个问题： 1，什么是原型链？ 2，原型链有什么作用？ 在JavaScript中不像其他语言有类的概念，提到JavaScript，想到的都是函数，函数无非两个用途： 1，像一般函数一样去调用它。 2，作为函数原型的构造函数去new它。JavaScript原型什么是JavaScript原型？ JavaScript每声明一个function
原型链的结构（深入理解原型继承）和举例
gyq04551的博客
06-26 814
Title //1.什么是原型链？ //每个构造函数都有原型对象 //每个对象都会有构造函数 //每个构造函数的原型都是一个对象 //那么这个原型对象也会有构造函数 //那么这个原型对象的构造函数也会有原型对象 //这样就会形成一个链式的结构，称为原型链 //
JavaScript经典面试之一：原型与原型链图解
ngulee的博客
04-21 836
1. 前言 原型与原型链是JavaScript中的核心概念之一，也是初学者的噩梦，同时面试时被问到的概率大概在80%以上！ 通过这个问题，可以考察应聘者对JavaScript基础知识的理解与掌握程度。原型链的知识通过死记硬背是记不住的，就算今天记住，明天准忘了。 但是，当你真正理解原型链的概念之后，你会发现，原型链竟然如此简单，而且很难忘记。 最近两个月都在招人面试，面了有30+，不管对方...
原型链案例
cjx177187的博客
06-21 174
分析：Element( )函数的返回值不是一个引用对象，所以el=element()，并给element函数中增加一个height属性，值为40px 执行以后 用Div创建的对象有Element创建的对象的功能 Div( )函数的返回值不是一个引用对象，所以div1=Div()，并给Div函数中增加一个className属性，值为box div1.value=Div.value=123 div1.innerHtML=Div.innerHtML="hello"div1=Div对象={value:123,inn
原型链（最详细）
imkaifan的博客
05-20 783
都是代码人，用代码交流吧，上代码： 初级原型链： <script> //构造函数 function Person() { }; //实例(每个实例对象都有一个__proto__属性指向原型对象) var zhang = new Person(); //原型对象(每个函数都有一个prototype属性指向原型对象) Person.prototype; // 原型对象又.
原型链图示
落日夕霞的博客
10-22 682
例1：画出 [] 的原型链图？
JavaScript中的原型链举例说明
刘小毅的博客
09-26 632
JavaScript中关于原型链的概念十分重要。原型链，即实例对象与其原型间的关系链。 首先，要理解什么是对象的原型？如何创建对象的原型？ 每个对象都有预设的默认属性prototype，其中包含两个属性constructor和_proto_，其中constructor为该对象的类型，一般情况下为函数构造器，_proto_即可理解为该对象的原型，为Object(构造器).prototype。请看...
javascript原型链简单示例(实现简单的继承)
啊哈前端的专栏
05-07 938
原型链 //javascript中的每个函数中都有一个指向某一对象的prototype属性。 //该函数被new操作符调用时会创建并返回一个对象，并且该对象中会有 // 一个指向其原型对象的秘密链接。通过该秘密链接(在某些环境中，该链接名为_proto_) //我们就可以在新建的对象中调用相关原型对象的方法和属性 //而原型对象自身也具有对象固有的普遍特性，因此本身也包含了
原型链继承的例子
最新发布
03-08
在 JavaScript 中，原型链（Prototype Chain）是实现继承的核心机制。通过将一个对象的 `prototype` 属性指向另一个对象，可以在前者上访问后者的所有属性和方法，从而形成一条由多个对象连接而成的链条——即所谓的“原型链”。下面是一个简单的例子展示如何基于原型链完成基本的对象间继承： ### 简单示例：动物 - 狗 继承关系 #### 定义基础类 'Animal' 首先我们创建了一个名为 `Animal` 的构造函数作为最顶层的基础类: ```javascript function Animal(name) { this.name = name; } ``` 接着为这个构造函数增加一些常用的方法到它的原型 (`prototype`) 上面: ```javascript Animal.prototype.eat = function(food) { console.log(`${this.name} eats ${food}.`); }; ``` 现在所有从 `Animal` 构造出来的实例都将拥有一个共同的行为 —— eating 行为. #### 子类 'Dog' 扩展自 'Animal': 然后定义了特定于狗的功能和特征： ```javascript function Dog(breed, tricks) { // 调用超类 (superclass), 即 Animal 构造函数初始化通用字段 Animal.call(this); // 相当于 super() this.breed = breed; // 设置特有字段 "breed" this.tricks = Array.isArray(tricks)?tricks:[]; } ``` 为了让 Dogs 自动获得 Animals 的能力而不需要重复编写代码片段，则需要建立两者之间的联系: ```javascript // 方法一：直接指定 __proto__ if(typeof Object.setPrototypeOf === 'function') { Object.setPrototypeOf(Dog.prototype, Animal.prototype); }else{ Dog.prototype = new Animal(); } // 方法二：使用 Object.create 来避免执行不必要的构造过程 Dog.prototype = Object.create(Animal.prototype); // 记得恢复 constructor 引用指针以防混乱 Dog.prototype.constructor = Dog; // 添加仅限于 Dog 对象的新特性或覆写现有行为 Dog.prototype.bark = function(){ console.log(`Woof! I'm ${this.name}, a good boy.`); }; // 可选地覆盖父级 eat 函数以提供更具体的表现形式 Dog.prototype.eat = function(food){ if(food == 'bone'){ console.log(`${this.name} loves to chew on bones! Yummy~`); } else { // 若非骨头则沿用原版吃东西动作 Animal.prototype.eat.apply(this,[food]); } }; ``` 最终结果是每一个新产生的 Dog 实体都具备其自身特有的 bark 动作以及改进过的 eat 方法；同时依旧保留着来自顶级父类的基本进食操作。 #### 使用演示 ```javascript var myPet = new Dog('Golden Retriever', ['sit','fetch']); myPet.eat('kibble'); // Golden Retriever eats kibble. myPet.eat('bone'); // Golden Retriever loves to chew on bones! Yummy~ myPet.bark(); // Woof! I'm undefined, a good boy. 注意这里没有传入名字导致name未赋值成undefined // 若要修复上面的问题，在构造函数中传递完整的参数列表即可: var anotherDog = new Dog('Labrador', 'shake',['rollover'],{name:'Max'}); anotherDog.bark(); // 正确输出 Max... ``` 该段落展示了怎样借助原型链来进行跨层次间的资源共享与复用，同时也允许子代对祖先级别的功能做出针对性调整而不影响其他部分。这就是为什么理解好原型链对于精通JavaScript至关重要所在！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值