专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

Javascript经典面试题-prototype原型链的秘密

ins518 2024-10-05 20:31:39 技术文章 11 ℃ 0 评论

前言

这篇文章记录一道与Object和Function的prototype属性相关的题目,这种题目在很多大型公司面试时经常会被问到,大家务必要好好掌握。

Javascript

题目

这是一道思考输出的代码题,题目的代码如下所示。

题目代码

考察点

这道题考察的是prototype原型链相关的内容,首先我们应该先要知道以下的知识点。

  1. 每个函数对象都有一个prototype属性,在每个函数对象的实例都拥有在prototype上定义的值。

  2. 函数其实也是对象,是由Function通过new操作符构造出来的。

  3. Person.prototype.__proto__===Object.prototype。

在做上面的题目之前,我们先来看看下面的内容,一步步引导大家去理解。

基本问题1

我们来看看下面一部分的代码。

代码1

从第8和第9行代码可以看出,Object和Function都是函数类型的对象。

从第10和第11行代码可以看出,对象类型包括对象字面量和通过Object构造方法生成两种。

从第12,13,14行代码可以看出,函数类型有三种,f1和f2实际也和f3一样是通过Function构造函数生成的。

基本问题2

接下来再看另一段代码。

代码2

在上面的这段代码中,首先在Function的prototype原型链上定义name属性。

通过基本问题1部分的f1,f2,f3,我们可以知道第21行代码实际可以理解为下面的代码。

代码

即person是Function类型对象的实例,因此person就拥有在Function的prototype上定义的name属性。

因此上面的代码输出为‘kingx’。

分析文章的题目

接下来我们可以分析文章开始出的题目。

题目

这道题在Function和Object上分别定义了变量a和变量b,然后定义了一个Person函数对象,通过构造方法生成一个p实例。

最后判断输出p上a和b的值。

第30行代码我们同样可以想起上面基本问题2的内容,实际也可以得到以下内容。

代码

因此对于Person来说,实际相当于Person.a = ‘a’.

接下来看new Person()的那段代码。

代码

上面那段代码表示Person函数通过构造方法生成的实例最终指向的是Object,Person对象的实例会继承自Object的原型链,而不是Function的原型链。

p是通过Person函数的构造方法生成的实例,因此p拥有Object的prototype上定义的b属性,而不会拥有Function的prototype上定义的a属性。

因此本道题的最终答案如下所示。

p.a = undefined

p.b = ‘b’

结束语

今天这篇文章主要讲解了prototype原型链相关的内容,大家可以额外再做几道题,加深自己的理解。

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表