Js原型 原型链和new一个对象发生的事情（前端面试经典题目）

最新推荐文章于 2024-04-22 03:57:30 发布
最新推荐文章于 2024-04-22 03:57:30 发布
阅读量460 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41867900/article/details/121017031
版权

本文内容：

  1. 原型与原型链的基本概念
  2. new

1. 原型与原型链的基本概念

每个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

准确地说，这些属性和方法定义在对象的构造器函数之上的prototype属性上，而非对象实例本身。其属性值是一个对象，其中包含了该构造函数的所有实例共享的属性和方法。

对象原型

2. new

new constructor[([arguments])]

参数：
constructor：一个指定对象实例的类型的类或函数。
arguments：一个用于被 constructor 调用的参数列表。

new 关键字会进行如下的操作：

  • 创建一个空的简单JavaScript对象（即{}）；
  • 为步骤1新创建的对象添加属性__proto__，将该属性链接至构造函数的原型对象 ；
  • 将步骤1新创建的对象作为this的上下文 ；
  • 如果该函数没有返回对象，则返回this。

new 运算符

参考文章：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes

yggjdle
关注
专栏目录
JS 类的创建继承 与 new原理实现
林夏天的博客
05-03 792
目录 1. 类的创建 工厂模式 构造函数模式 原型模式 组合模式 2. 类的继承 原型链继承 构造继承 实例继承 拷贝继承 组合继承 寄生组合继承 3. new 的原理实现 学习和参考于： JS定义类的六种方式详解 JS实现继承的几种方式 JavaScript深入之创建对象的多种方式以及优缺点 js new一个对象的过程，实现一个简单的new方法 （一）类的创建 1. 工厂模式 fun...
这些js原型及原型链面试题你能做对几道
loveX001的博客
10-02 1771
console . log('我爱唱歌');//我爱唱歌 stu2 . sing();//我爱唱歌 console . log(stu1 . sing === stu2 . sing);//false很明显，stu1 和 stu2 指向的不是一个地方。所以 在构造函数上通过this来添加方法的方式来生成实例，每次生成实例，都是新开辟一个内存空间存方法。这样会导致内存的极大浪费，从而影响性能。公共属性定义到构造函数里面，公共方法我们放到原型对象身上。
原型链继承的例子 和new 一个对象的过程
u013482875的博客
09-05 429
1.原型链继承 function Elem(id){ this.elem = document.getElementById(id) } Elem.prototype.html=function(val){ var elem = this.elem; if(val){ elem.innerHTML=val; return this// 链式...
一道关于创建对象的过程的面试题
jiangying257的博客
11-11 170
考点： 类初始化过程 实例初始化过程 方法的重写 题目如下 下面程序的运行结果？ public class Father{ //非静态类变量显示赋值 private int i = test(); //静态类变量显示赋值 private static int j = method(); //静态代码块 static{ System.out.print("(1)"); } //无参构造器 Father(){ System.out.print("(2)")
js高频面试题：new的过程发生了什么？手写new的实现代码
遇见小美好
01-26 872
今天我们来看一个js高频面试题：new的过程发生了什么？然后可能还会让现场手写new的实现代码。 我们知道，new 运算符可以创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 举例用new创建一个有year, color, model属性的汽车对象Car： function Car(year, color, model) { this.year = year; this.color = color; this.model = model; } const myCar = new Car
【JavaScript面试题】new操作符具体做了什么？
qq_40992225的博客
08-22 494
创建了一个空对象将空对象的原型，指向于构造函数的原型将空对象作为构造函数的上下文（改变this的指向）对构造函数有返回值的处理判断。
2021 前端JavaScript面试经典题目合集.pdf
12-14
前端JavaScript面试经典题目合集 ...本资源汇总了前端JavaScript面试经典题目，涵盖了JavaScript基础、Object.create、instanceof、new操作符、Promise等知识点，为前端开发者提供了一个系统的学习资源。
2024高频前端面试题（含答案）
热门推荐
weixin_44672169的博客
04-22 21万+
一、简单页面 1、CSS选择器样式优先级 2、CSS实现三列布局（左右固定宽度，中间自适应） （1）CSS浮动 第一个float:left，第二个float:right，第三个设置margin-left和margin-right （2）绝对定位法 第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right （3）flex布局 .left{ width:200px; 或者 flex:0 0 200px; } .right{ width:200px;
前端vue经典面试题78道（重点详细简洁）
weixin_59519449的博客
03-21 7万+
1.自我介绍 2分钟，200-300个字，主旨自己基本情况，工作经历，优点，兴趣爱好，职业规划，邀约 2.vue面试题 1.v-show和v-if区别的区别： v-show通过css display控制显示和隐藏，v-if组件真正的渲染和销毁，而不是显示和隐藏，频繁切换状态使用v-show 否则v-if 2.为何v-for要用key 快速查找到节点，减少渲染次数，提升渲染性能 3.描述vue组件声明周期mm 单组件声明周期图 挂载： beforeCreate => created =
前端进阶面试-JS面试题(阿里、字节、腾讯、美团面试高频）
最新发布
2401_84150137的博客
04-22 679
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！年进入阿里一直到现在。**深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
js构造函数创建对象是否加new问题
01-19
今天看到这样一道题： 填写”TO DO”处的内容让下面代码支持a.name = “name1”; b.name = “name2”; function Obj(name){ // TO DO } obj. /* TO DO */ = name2; var a = Obj(name1); var b = new Obj;   问题1:new操作符做了些什么呢？ 创建一个新对象； 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象） ； 执行构造函数中的代码（为这个新对象添加属性） ； 返回新对象。 问题2:不加new操作符直接执行构造函数会发生什呢？ func
每天一个前端小知识11——new对象的过程
每天一个前端小知识~
12-17 272
创建一个空对象，设置它的原型链，改变this指向，判断返回值类型。
js new一个对象的过程，实现一个简单的new方法
weixin_30449239的博客
05-21 1314
对于大部分前端开发者而言，new一个构造函数或类得到对应实例，是非常普遍的操作了。下面的例子中分别通过构造函数与class类实现了一个简单的创建实例的过程。 // ES5构造函数 let Parent = function (name, age) { this.name = name; this.age = age; }; Parent.prototype.s...
JavaScript new一个对象的过程以及自己实现new
weixin_46361785的博客
03-02 520
一. new一个对象的过程 创建一个新的对象 将新对象的原型指向构造函数的原型 构造函数被执行，将执行过程中的this绑定在实例对象 返回该实例对象 二. 自己实现简单的new function Father(name) { this.name = name } function newobj(func, arg) { // 1. 创建一个新的对象 const obj = {} // 2. 将新对象的原型指向构造函数
js语言的原型知识总结（包含new操作符原理，继承实现）
前端笔记
04-15 114
js中的原型和原型链是什么呢？ new 操作到底做了什么呢？ 什么叫构造函数呢？ js代码如何实现类的继承呢？
java 构造函数加new,js构造函数创建对象是否加new问题
weixin_31437187的博客
03-12 148
今天看到这样一道题：填写"TO DO"处的内容让下面代码支持a.name = "name1"; b.name = "name2";function Obj(name){// TO DO}obj. /* TO DO */ = "name2";var a = Obj("name1");var b = new Obj;问题1:new操作符做了些什么呢？创建一个新对象；将构造函数的作用域赋给新对象(因此 ...
JS面试题之创建对象7种方式，原型链，call/apply/bind（一）
小帅的编程笔记
09-10 259
我是傲夫靠斯，欢迎关注我的公众号【前端工程师的自我修养】，每天更新。 今天开始，我将不定期的分享一些面试题，答题不是目的，目的帮助我们一起巩固JS的基础知识，让我们平时写代码的时候多一些选择。今天主要是3道题，是JS中比较基础的，也是面试常问的。 今日题目： 在JS里有几种创建对象的方式，分别是什么？ 什么是原型链？ call、apply和bind有什么区别？ 1. 在JS里有几种创建对象的方式，分别是什么？ Object构造函数 通过这种方式可以创建一个空对象，但现实中不推荐用。 const .
前端面试—new操作符的原理解析
归子莫的博客
09-21 821
前端面试—new操作符的原理解析 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ new实例 JavaScript中new操作符用于创建一个给定构造函数的对象实例 function Person(name, age){ this.name = name; this.age = age; } const res = new Person('Tom', 20) console.log(res) //
JavaScript中 new 一个对象过程详解
明天也要努力的博客
01-31 1万+
要创建 Person 的新实例，必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4个步骤： 创建一个新对象； 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）； 执行构造函数中的代码（为这个新对象添加属性）； 返回新对象; 1. new 操作符 在有上面的基础概念的介绍之后，在加上 new 操作符，我们就能完成传统面向对象的class + new的方式创建对象，在JavaScript中，我们将这类方式成为 Pseudoclassical。 基于上面的例子，我们执行如下
JavaScript原型与原型链实现对象继承详解
"JavaScript 使用原型和原型链实现对象继承的方法详解" 在JavaScript中，对象继承是面向对象编程的重要概念，而原型和原型链是实现这一概念的关键机制。JavaScript的继承并非传统的类继承，而是基于原型的继承。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值