前端面试：原型和原型链

已于 2023-05-31 17:18:21 修改
阅读量225 收藏
点赞数 1
文章标签： 原型模式
于 2023-05-30 10:03:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43592064/article/details/130932096
版权

什么是原型对象

 

每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型对象，每一个对象都会从原型"继承"属性。

函数的原型和对象的原型 

  • 每个函数都有一个prototype属性，该属性指向函数的原型
  • 每个对象都有一个__proto__属性，该属性指向对象的原型

什么是原型链

当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。这条查找的路径就叫原型链 

如何顺着原型链查找

啃火龙果的兔子
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【web前端面试必问2】js原型和原型链的理解（透彻）
m0_56349322的博客
02-17 824
原型 function Fn() {} 1）Fn是一个构造函数，每个构造函数都会自动生成一个prototype属性，指向一个空对象，这个空对象就是原型。每一个实例对象都会从原型继承属性和方法。 2）原型对象中有一个属性constructor，它指向函数对象 console.log(Date.prototype.constructor===Date) function函数有一个prototype属性 ===》 显示原型属性 var fn = new Fn() 这里的fn就是一个...
Web前端面试题目JavaScript(作用域，原型。原型链，闭包，封装函数).txt
07-06
前端面试题，包含JavaScript的闭包，作用域，原型，原型链，上下文环境以及DOM,BOM封装函数深度克隆，以及一些常见的·JS问题，试题简单但是容易混淆，作为前端工程师必考题
原型与原型链详解
CKT0816的博客
03-10 219
前言 与大部分面向对象语言不同，ES6之前中并没有引入类（class）的概念，JavaScript并非通过类而是直接通过构造函数来创建实例。在介绍原型和原型链之前，我们有必要先复习一下构造函数的知识。 一、构造函数 构造函数模式的目的就是为了创建一个自定义类，并且创建这个类的实例。构造函数模式中拥有了类和实例的概念，并且实例和实例之间是相互独立的，即实例识别。 构造函数就是一个普通的函数，创建方式...
前端面试必考——原型及原型链（涵实例+话术）
最新发布
XIAO_A_fighting的博客
05-22 869
原型：所有的引用类型都有一个__proto__（隐式原型）属性，它是一个普通的对象、所有的函数都有一个prototype属性（显式原型），是一个普通的对象。所有引用类型的__proto__指向它的构造函数的prototype属性。
web前端面试之——原型与原型链
weixin_44258574的博客
05-26 837
原型与原型链 （一）原型 理解与记忆核心： F.prototype === f.__proto__ ===原型对象（原型） f.constructor === F.prototype.constructor === F === f.__proto__.constructor 解释： 每个函数F（也是对象，js中一切皆对象）在初始化时都拥有一个prototype属性，该属性指向原型对象（即原型） F = new Function(); F = { prototype:{} }; F.prot
原型与原型链详解（带图方便理解）
热门推荐
m0_55734030的博客
11-21 1万+
每一个类（构造函数）都有一个显示原型prototype（本质就是个对象）01 类：是创建对象实例的模板 本质上讲类是个函数 (例如Array object String )001 构造函数 ：用new来执行的函数02 实例:就是由类创建的对象 本质上就是对象例如 [1,2,3] {name : "mumu " } , “abc”以上就是面试经常会问到的内容啦，希望对你们有用哈。
前端面试题之说说什么是原型和原型链
TESJackeyLove1的博客
08-03 62
原型链就是一个实例化的对象身上有proto属性指向它的原型对象，它的原型对象身上也有一个proto属性指向它的原型对象，当实例化对象在访问一个属性的时候，会先在自身找，如果没有找到就去原型对象上找，如果原型对象上没有找到就去原型对象的原型对象上找，一直找到Object的原型对象为止，这样一层一层往上查找的过程就是原型链，使用原型最大的好处就是达到一个数据的共享，可以节省内存。面试官问：请你说说你对原型和原型链的理解。最后小张同学祝大家面试顺利！
原型和原型链的理解
鸡血博客
09-09 1万+
原型和原型链的理解:(面试题) 原型：每个函数都有 prototype 属性，该属性指向原型对象；使用原型对象的好处是所有对象实例共享它所包含的属性和方法。 原型链：主要解决了继承的问题；每个对象都拥有一个原型对象，通过__proto__ 指针指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向 null。 原型的作用： 1.数据共享 节约内存内存空间 2....
2023前端面试八股文.pdf
04-03
在前端面试中，JavaScript 是一个核心话题，对于求职者来说，深入理解其数据类型、类型检测以及特殊值如 null 和 undefined 的区别至关重要。下面我们将详细讨论这些知识点。 首先，JavaScript 有八种数据类型，...
第4章 前端面试技能拼图2 ：前端基础知识 ， 必知必会
03-13
基础语法、变量、数据类型、操作符、流程控制（条件语句、循环）、函数、对象及原型链，以及ES6的新特性（如let、const、箭头函数、Promise等）都是必备知识。 4. DOM（文档对象模型）： DOM是HTML和XML文档的编程...
第5章 前端面试技能拼图3 ：知识深度 - 原理和源码
03-13
这包括但不限于变量作用域、闭包、原型链、异步编程（Promise、async/await）、事件循环和回调队列等核心概念。掌握它们的原理，能帮助你在面试中解释复杂的代码行为，展现你的逻辑思维能力。 其次，浏览器工作原理...
前端面试100题，面试题源代码
03-30
3. **JavaScript**：JavaScript是前端开发的灵魂，面试题可能包括变量、数据类型、作用域、闭包、原型链、异步编程（回调、Promise、async/await）、DOM操作等。 4. **浏览器工作原理**：理解浏览器如何解析HTML、...
第6章 前端面试技能拼图4： 知识广度 - 从前端到全栈
03-13
同时，理解原型链、闭包、作用域、事件循环和异步编程是JS面试的核心内容。 4. **DOM操作**：了解如何通过JavaScript操作DOM，包括添加、删除、查找和修改元素，以及事件处理和性能优化技巧，如事件委托。 5. **...
面试：原型和原型链
Bessicxie的博客
06-27 2401
1.什么是原型 简单来说就是有一个构造函数，当用这个构造函数new 一个实例出来的时候，这个实例的原型就是这个构造函数 function Person(name,age){ this.name=name; this.age=age; } var person=new Person('Bessic',18) js 所有的引用类型都有自己的构造函数 var arr=[]的时候其实就是等于var ...
【前端面试】JS中原型链和class在继承上的区别
Taozi_1379的博客
10-06 780
JS中的class本质上是一个 function类型的对象，这是JS的独特之处。 原型链继承 定义一个父类，本质上是定义父类的构造函数，其对应的Person.prototype会自动被创建； 定义一个子类，通过在子类中用call函数，以子类的身份调用父类的构造函数，实现继承父类的成员变量； 将Student的prototype的原型链__proto__指向Person的prototype； Student.prototype.constructor应该指向Student本身， function Pers
Vue前端面试题总结（三） 原型和原型链详解
Rick_and_mode的博客
09-15 3423
原型和原型链 原型 在JavaScript中有这么一句话万物皆可对象 在声明一个函数跟对象的时候 它在声明的时候就有一个原型对象prototype 这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。 而protortype 的指向是它的隐式原型 proto 举个例子 Person.prototype.constructor == Person; person1.__proto__ == Person.prototype; person1.constructor == Person; 原型
前端面试之原型链那些事（七）
qq_43238599的博客
05-11 366
最近在准备面试，感觉好些东西了解，但是了解的深度有限。自己就总结了几个模块，打算强化一下。如果你感觉我的文章对你有帮助，请点赞。如果感觉有哪些不足之处，可以留言。让我们一同进步，学习！！！ 最后在说明一下，这个系列我会一直写下去。如果，你有什么好的方向，也可以提出来。 创建对象有几种方法 如何判断一个变量是不是数组 原型、构造函数、实例、原型链 instanceof 原理 new 运算符 手写一个Jquery，考虑插件和扩展性 Class的原型本质，怎么理解 原型和原型来年的图示 属性和方法的执行规则 .
面试官：谈谈你对原型和原型链的理解
Tz
02-19 4429
金三银四的旺季即将拉开序幕，这段时间有朋友陆陆续续去面试，和她们沟通发现，最高频出现问题就是：谈谈你对原型和原型链的理解？ 无形之刃 最为致命。 ——影流之主 一个看似最最最基础的面试题，但是这送分题，回答的不好可能就变成了送命题。接下来就让我们一起来探讨探讨~ 基于原型的语言？ JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个实例对象（ object ）都有一个私有属性（称之为 proto ）指向
前端面试题说一下原型链
12-07
原型链是JavaScript中非常重要的一个概念，它是实现继承的主要方法之一。在JavaScript中，每个对象都有一个原型对象，而原型对象也可以有自己的原型对象，这样就形成了一个原型链。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，就会去它的原型对象中查找，如果还没有，就会去原型对象的原型对象中查找，直到找到该属性或方法或者到达原型链的顶端为止。 下面是一个简单的例子，演示了原型链的基本概念： ```javascript function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayHello = function() { console.log("Hello, my name is " + this.name); }; function Student(name, age, grade) { Person.call(this, name, age); this.grade = grade; } Student.prototype = Object.create(Person.prototype); Student.prototype.constructor = Student; Student.prototype.sayGrade = function() { console.log("My grade is " + this.grade); }; var student = new Student("Tom", 18, 3); student.sayHello(); // 输出：Hello, my name is Tom student.sayGrade(); // 输出：My grade is 3 ``` 在上面的例子中，我们定义了一个`Person`构造函数和一个`Student`构造函数，`Student`构造函数继承自`Person`构造函数。我们通过`Object.create`方法将`Student`的原型对象指向`Person`的原型对象，这样就形成了一个原型链。当我们调用`student.sayHello()`方法时，由于`student`对象本身没有`sayHello`方法，就会去它的原型对象`Person.prototype`中查找，找到了该方法并执行。当我们调用`student.sayGrade()`方法时，由于`student`对象本身没有`sayGrade`方法，就会去它的原型对象`Student.prototype`中查找，找到了该方法并执行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值