前端面试——什么是原型和原型链

背景

最近看到了很有意思的东西,原型和原型链

我们首先看看MDN怎么讲:继承与原型链 - JavaScript | MDN

不过文档里面也没有给出原型的定义???

不过里面提到原型链,是指对象层层向上寻找原型形成的路径就叫做原型链

后面我参考了一些文章,在这里做一下总结:

参考(超赞):前端面试必考——原型及原型链(涵实例+话术)

我自己的定义:

原型: 每个函数创建好之后,都会添加一个prototype属性,这个就是原型!!!主要用来给实例提供公共属性和方法的。

每个函数都有一个prototype属性,指向其原型

每个引用类型都有一个__proto__属性,指向其构造函数的prototype属性

原型链:就是在代码执行过程中寻找变量,一层一层向上层原型遍历寻找匹配对象形成的这样一条链条

一些结论:

1.对于一个引用类型(对象,数组,函数),我们通常会使用__proto__或者[[prototype]]来表示其原型,为了统一标准,官方推荐使用[[prototype]]来表示其原型,并使用专属的方法来修改原型

2.一个构造函数实例化的对象去寻找变量,先从第一层属性开始找,找不到再从原型上去匹配属性,还找不到再网上找原型,直到找到原型为Object.prototype(在往上就是null)

3.原型主要用来定义公共的属性和方法,利用继承来使得代码简洁

4.原型含有一个constructor引用,指向其构造函数。所以你可以在浏览器中点击prototype之后点击constructor............,这样一直点下去,不过我很好奇,这样为什么不炸???

5.构造函数实例化之后再设置该构造函数的原型只会对实例的原型生效,而不会对该实例本身生效

6.如果父类属性和子类属性有对应的引用属性,那么子类实例对引用属性的修改,会影响到父类实例的对应属性(这个我还没试过)

其他参考:

js 原型链的个人理解记录_沿着原型链一直往上找能找到什么-CSDN博客

JS-原型(prototype),原型链是不是无限套娃?_javascript的原型的原型属于套娃么-CSDN博客

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
原型链是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
发出的红包

打赏作者

JSU_曾是此间年少

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值