原型和原型链（包含面试题）

已于 2024-08-08 09:36:28 修改
阅读量371 收藏 1
点赞数
文章标签： 原型模式
于 2023-11-06 18:43:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_65116989/article/details/134252382
版权

原型和原型链

1、原型

每个函数都有prototype属性，称为原型因为这个属性的值是一个对象，也称为原型对象

作用：

  1. 存放一些属性和方法，提供给这个对象的实例对象所共享和使用
    在这里插入图片描述
    在这里插入图片描述

2、原型链

原型链是一种对象之间通过原型链连接起来的机制，用于实现继承
在这里插入图片描述

在这里插入图片描述

3、面试题

原型：

  • 每个JavaScript对象都有一个原型，它是一个指向另外一个对象的引用
  • 原型对象可以包含属性和方法，这些属性和方法可以被该对象的所有实例所共享

原型链

  • 原型链是一种对象之间通过原型链连接起来的机制，用于实现继承
  • 当我们访问对象的某个属性或者方法时，如果改对象本身没有该属性和方法，则会沿着原型链向上去查找，知道找到该属性为止

就比如，我创建了一个Array的实例对象，然后这个实例对象是有__proto__属性，这个属性指向它的原型对象，也就是Array.prototype，然后Array.prototype也是一个对象也有一个__proto__，指向它的原型对象Object.prototype，就是这种一直链式继承的关系。

xugyw
关注
Javascript原型与原型链由浅入深，让你再不害怕大小厂面试官，满满干货，遇到原型链的题就开心
luolvzhou的博客
12-25 1379
什么是原型？有铁子肯定会霸气回怼，ES6没出class 类的时候，Javascript想要实现面向对象这一层面的数据共享，想要占用的内存更小一点，想要保持自己面向对象特征下的封装，继承，多态，然后提供了原型和原型链来方面实现这一特性。当然，这话是没错的，可是你拿这个东西真正去理解原型和原型链的时候，你又懵了，因为面试官又会问，ES6的class跟原型之间什么关系，有什么共性？然后又答不上来。
面试题讲解(一）---原型链
weixin_45044349的博客
05-29 7307
JS面试题： 框架 js基础知识：1. 原型链 2. 事件循环 3. 执行上下文 第三方库 基础知识 所有的对象都是通过new 函数()创建的，该函数叫做构造函数 函数可以产生对象 所有对象都是靠函数产生的 函数也是一个对象，它是通过new Function创建的 对象赋值给变量后，变量中保存的是地址，地址指向对象所在内存 原型 原型的本质：对象 所有的函数都有原型属性prototype 默认情况下，prototype是一个Object对象 prototype中默认包.
Web前端面试题目JavaScript(作用域，原型。原型链，闭包，封装函数).txt
07-06
前端面试题，包含JavaScript的闭包，作用域，原型，原型链，上下文环境以及DOM,BOM封装函数深度克隆，以及一些常见的·JS问题，试题简单但是容易混淆，作为前端工程师必考题
面试题 - 原型及原型链
bug处理进行时
07-12 1616
一. [[protoType]] 1 - [[prototype]]属性 什么是[[Prototype]]属性 JavaScript中每一个对象都有一个内置的[[prototype]]属性，这个属性指向对其他对象的引用。大多数情况下这个对象的值都不为空。 原型链的尽头 - Object.prototype 当执行 [[Get]] 操作时，如果当前对象没有查找的属性，则会继续向上查找原型链，直到查找到原型链的尽头 Object.prototype，如果依旧没有则返回 undefined 。所以自定义的
深入解析 JavaScript 原型与原型链：从原理到应用
m0_72900140的博客
03-09 1205
每个 JavaScript 对象（除null外）都有一个内部属性，指向它的原型对象。原型对象也是一个普通对象，它包含可以被其他对象共享的属性和方法。通过__proto__（非标准，但广泛支持）或可以访问对象的原型。原型链是由对象的连接起来的链式结构。当访问对象的属性或方法时，如果对象本身没有该属性，JavaScript 会沿着原型链向上查找，直到找到该属性或到达原型链的顶端（null原型：每个对象都有一个，指向它的原型对象。原型链：通过连接起来的链式结构，用于属性查找。继承。
原型和原型链面试题总结
qq_27984747的博客
10-19 3192
原型和原型链
原型和原型链的理解
热门推荐
鸡血博客
09-09 1万+
原型和原型链的理解:(面试题) 原型：每个函数都有 prototype 属性，该属性指向原型对象；使用原型对象的好处是所有对象实例共享它所包含的属性和方法。 原型链：主要解决了继承的问题；每个对象都拥有一个原型对象，通过__proto__ 指针指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向 null。 原型的作用： 1.数据共享 节约内存内存空间 2....
一道面试题详解原型和原型链的基础知识
qq_35895679的博客
07-27 464
1.每一个类（函数）都具备prototype，并且属性值是一个对象 2.对象上天生具备一个属性：constructor，指向类本身 3.每一个对象（普通对象、prototype、实例、函数等）都具备：proto，属性值是当前实例所属类的原型 函数数据类型：普通函数、类（内置类/自定义类）、箭头函数 （都是Function的实例） 对象数据类型：普通对象、数组对象、正则对象、日期对象、实例对象、函数对象（函数也是一个对象，也像普通对象一样，有自己的键值对）、类的prototype也是对象 （都是Ob.
前端常见面试题之js基础(手写深拷贝-原型和原型链-作用域和闭包).md
最新发布
04-08
这份资源聚焦于前端 JavaScript 基础，涵盖变量类型和计算、原型和原型链等核心知识。详细介绍了值类型与引用类型的区别、`typeof` 运算符的使用、`==` 与 `===` 的适用场景、深拷贝的实现、类型转换规则，还阐述了 ...
JavaScript 原型链和继承面试题
木木木森林
10-29 3395
JavaScript 原型链和继承问题 JavaScript 中没有类的概念的，主要通过原型链来实现继承。通常情况下，继承意味着复制操作，然而 JavaScript默认并不会复制对象的属性，相反，JavaScript只是在两个对象之间创建一个关联（原型对象指针），这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确些。 原型 当我们 new 了一个新的对象实例，明明什么都没有做，就直接可以访问 toString 、valueOf 等原生方法。那么这些方法是从哪里来的
【js面试题】js原型，原型链？有什么特点
08-16 862
原型和原型链是 JavaScript 中实现对象继承和属性共享的核心机制。通过原型链，对象可以继承其构造函数的原型对象上的属性和方法。理解原型链对于编写高效且可维护的 JavaScript 代码至关重要。在实际开发中，合理利用原型和原型链可以优化内存使用，实现复杂的继承结构，并且有助于深入理解 JavaScript 的对象模型。
JS必懂的原型和原型链
Web_boom的博客
09-27 478
原型和原型链算是js里的一座大山，比较偏概念性，在面试时是经常出现的，所以闲时可以多拿出来琢磨。鄙人写的也略有浅显，希望能帮到查阅的小伙伴呀。
基础面试题详解原型与原型链
m0_72967249的博客
11-22 467
原型与原型链有什么作用？
原型&原型链【JavaScript基础面试题】
wtswts1232的博客
05-07 527
用通俗易懂的例子讲解什么是原型链，什么是原型对象。
面试官：谈谈你对原型和原型链的理解
Tz
02-19 4573
金三银四的旺季即将拉开序幕，这段时间有朋友陆陆续续去面试，和她们沟通发现，最高频出现问题就是：谈谈你对原型和原型链的理解？ 无形之刃 最为致命。 ——影流之主 一个看似最最最基础的面试题，但是这送分题，回答的不好可能就变成了送命题。接下来就让我们一起来探讨探讨~ 基于原型的语言？ JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个实例对象（ object ）都有一个私有属性（称之为 proto ）指向
JS(原型和原型链）整理的面试题
Rampage_w的博客
09-07 4201
题目1.如何准确判断一个变量是数组类型 使用 instanceof 方法 题目2.写一个原型链继承的例子 实例：封装 DOM 查询 定义构造函数 Elem,属性封装成 id 打印出所有的 html 将所有的 html 变为 hello imooc ,并且点击弹出 ‘clicked’ 链式操作 题目3.描述 new 一个对象的过程 1.创建一个新对象 2.this 指向这个新对象 3....
javascript——原型与原型链
weixin_30448603的博客
07-08 336
一、prototype 在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。 例如： function Person(age) { this.age = age } Person.prototype.name = 'kavin' var person1 = new Person() var person2...
【web前端面试必问2】js原型和原型链的理解（透彻）
m0_56349322的博客
02-17 904
原型 function Fn() {} 1）Fn是一个构造函数，每个构造函数都会自动生成一个prototype属性，指向一个空对象，这个空对象就是原型。每一个实例对象都会从原型继承属性和方法。 2）原型对象中有一个属性constructor，它指向函数对象 console.log(Date.prototype.constructor===Date) function函数有一个prototype属性 ===》 显示原型属性 var fn = new Fn() 这里的fn就是一个...
【JavaScript面试】原型和原型链
qq_40992225的博客
07-24 1151
解释函数.prototype，它本质上是和varobj={}是一样的，由newObject创造的(在js中一切皆对象，它本质上就是一个空对象，空对象都是由newObject创造的即每个函数都有一个prototype属性，它默认指向一个Object空对象前面我们说谁创建了它，那这个对象的隐式原型就指向了创建它的函数的一个显示原型)最终结论每个函数下其实有个prototype属性，prototype的属性值是一个对象，这个对象默认的只有一个叫做constructor的属性，指向这个函数本身。..........
原型和原型链面试题
06-01
好的，你想问的是有关 JavaScript 中原型和原型链的面试题，对吧？ 首先，让我们回顾一下原型和原型链的概念： - 原型（prototype）：每个 JavaScript 对象都有一个原型对象，它是该对象的父对象，也可以理解为该对象的模板。通过原型，对象可以继承父对象的属性和方法。 - 原型链（prototype chain）：由于每个对象都有一个原型对象，因此可以形成一条原型链。如果在当前对象中找不到所需的属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到为止。 下面是一些可能的原型和原型链面试题： 1. JavaScript 中的对象是如何继承属性和方法的？ JavaScript 中的对象通过原型继承属性和方法。每个对象都有一个原型对象，它是该对象的父对象，也可以理解为该对象的模板。通过原型，对象可以继承父对象的属性和方法。如果在当前对象中找不到所需的属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到为止。 2. 什么是原型链？ 由于每个对象都有一个原型对象，因此可以形成一条原型链。原型链是一种继承机制，它通过沿着对象的原型链查找属性和方法，实现了对象之间的继承关系。如果在当前对象中找不到所需的属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到为止。 3. 如何创建一个对象的原型？ 在 JavaScript 中，可以使用 Object.create() 方法创建一个对象的原型。该方法接受一个参数，即新对象的原型对象。例如： ``` var parent = { foo: function() { console.log("hello"); } }; var child = Object.create(parent); ``` 在此示例中，我们创建了一个名为 parent 的对象，它有一个名为 foo 的方法。然后，我们使用 Object.create() 方法创建了一个名为 child 的对象，它的原型对象是 parent。这意味着 child 可以继承 parent 中的所有属性和方法，包括 foo 方法。 4. 对象的 __proto__ 属性和 prototype 属性有什么区别？ 每个 JavaScript 对象都有一个 __proto__ 属性，它指向该对象的原型对象。例如： ``` var parent = { foo: function() {} }; var child = Object.create(parent); console.log(child.__proto__ === parent); // true ``` prototype 属性只存在于函数对象中，它是该函数的原型对象。例如： ``` function Person() {} Person.prototype.foo = function() {}; var p = new Person(); console.log(p.prototype); // undefined console.log(Person.prototype); // { foo: [Function] } ``` 因此，__proto__ 属性和 prototype 属性的作用不同，前者用于继承，后者用于函数对象的原型继承。 5. 如何判断一个对象是否是另一个对象的原型？ 在 JavaScript 中，可以使用 isPrototypeOf() 方法判断一个对象是否是另一个对象的原型。例如： ``` var parent = { foo: function() {} }; var child = Object.create(parent); console.log(parent.isPrototypeOf(child)); // true ``` 在此示例中，我们使用 isPrototypeOf() 方法判断 parent 是否是 child 的原型对象。 6. 如何实现继承？ 在 JavaScript 中，可以使用原型链实现继承。例如，我们可以创建一个名为 Parent 的构造函数，并在其原型对象上定义一些属性和方法： ``` function Parent() { this.name = "parent"; } Parent.prototype.sayHello = function() { console.log("Hello, I'm " + this.name); }; ``` 然后，我们可以创建一个名为 Child 的构造函数，并将其原型对象设置为 Parent 的实例，从而实现继承： ``` function Child() {} Child.prototype = new Parent(); Child.prototype.constructor = Child; var child = new Child(); child.name = "child"; child.sayHello(); // Hello, I'm child ``` 在此示例中，我们创建了一个名为 Child 的构造函数，并将其原型对象设置为 Parent 的实例。这意味着 Child 可以继承 Parent 中的所有属性和方法，包括 sayHello 方法。最后，我们创建了一个名为 child 的 Child 实例，并修改了其 name 属性。调用 child.sayHello() 方法时，将输出 "Hello, I'm child"。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值