每日五道前端面试题--day11

以下题目来自掘金等其它博客,但是问题的答案都是根据笔者自己的理解做出的。如果你最近想要换工作或者巩固一下自己的前端知识基础,不妨和我一起参与到每日刷题的过程中来,如何?

第11天要刷的面试题如下:

  1. 对于原型和原型链的理解
  2. 如何修改和重写原型对象
  3. 原型链的指向是什么?
  4. 原型链的终点是什么?
  5. 如何获取非原型链上的属性?实现hasOwnProperty方法

附加题: 如果a.b的值为undefined,则可能有几种情况,如何判断?

下面是我自己的理解:

1. 对于原型和原型链的理解

  • 原型:指的是对象的原型,可以通过Object.getProperty(o)或者o.__proto__获得,其值为object类型的;
  • 原型的作用:构成原型链,根据原型设计模式,可以对部分方法和属性进行复用,节省了内存。
  • 原型链:假设Object.getProperty(o)的值为o1, Object.getProperty(o1)的值为o2,以此类推直到Object.getProperty(on)的值为null,那么o1->o2->...->on->null这个对象链条就称之为原型链;
  • 原型链作用:当尝试获取o上的'p'属性的时候,如果o本身没有这个属性,则会继续在o1上尝试,如果找到则将o1.p的值作为o.p的值返回,如果仍然没有找到,则在o2中找,直到null,然后返回undefiend.

2. 如何修改和重写原型对象

  • 对于构造函数P而言,其prototype属性是可写的,所以直接修改此值就可以了
  • 对于P的实例对象p而言,使用Object.setProperty方法修改其原型
  • 对于P而言一般称为原型对象,含义为:【原型】指名为property的属性;【对象】指property属性的值x是一个对象,即typeof x === 'object'
  • 对于p而言一般称为对象原型,含义为:【对象】指p是一个对象,即typeof p === 'object';【原型】指p的__proto__属性
js 复制代码
class P {}
const p = new P();
P.prototype = null;
console.log(Object.getPrototypeOf(p)); // 不是null
P.prototype = Object.getPrototypeOf(p);

3. 原型链的指向是什么?

o的原型链指向下一个原型对象x, x可以通过Object.getProperty(o)或者o.__proto__获得,其中o.__proto__是只读的。

4. 原型链的终点是什么?

虽然可以使用Object.setPrototypeOf指定对象的原型对象,但是指定的新对象必须是typeof x === 'object'类型的;也就是说原型链的终点是null

5. 如何获取非原型链上的属性?实现hasOwnProperty方法

  • 可以使用hasOwnProperty来获取非原型链上的属性;但是这种做法存在风险,因为对象上可能没有hasOwnProperty方法。
js 复制代码
const myHasOwnProperty = (property) => {
    const _stash = Object.getPrototypeOf(this);
    Object.setPrototypeOf(this, null);
    const rst = property in this;
    Object.setPrototypeOf(this, _stash);
    return rst
}

附加题: 如果a.b的值为undefined,则可能有几种情况,如何判断?为什么说使用hasOwnProperty进行判断是不够严谨的

  • 情况1:a上没有b,但是原型链上有b并且值为undefined
  • 情况2:a上有b但是值为undefined
  • 情况3:a上没有b,并且其原型链上也没有b
js 复制代码
function (obj, prop) {
    let _case = 0;
    const _stash = Object.getPrototypeOf(obj);

    const _t1 = prop in obj;
    Object.setPrototypeOf(obj, null);
    const _t2 = prop in obj;
    Object.setPrototypeOf(obj, _stash);

    if (!_t1) {
        _case = 3;
    } else if(_t2){
        _case = 2;
    } else {
        _case = 1;
    }
    return _case;
}
相关推荐
xiaoxue..1 分钟前
React 之 自定义 Hooks
前端·javascript·react.js·面试·前端框架
华仔啊2 分钟前
JavaScript 防抖和节流的区别是什么?如何实现?
前端·javascript
阿拉伯柠檬12 分钟前
文章内容测试
面试
想唱rap35 分钟前
缓冲区的理解和实现
java·服务器·前端·c++·python
勤奋的小米蜂37 分钟前
vscode 自带终端无法正常执行例如npm命令---解决办法
前端·vue.js·vscode·npm
你怎么知道我是队长38 分钟前
C语言---作用域
c语言·开发语言·javascript
玄同76544 分钟前
Python&LLM面试易错点: 函数返回值全览:从「原地操作」到「新对象返回」的系统解析
笔记·python·学习·语言模型·面试·llm·求职招聘
Wpa.wk44 分钟前
接口测试-多层嵌套响应处理-JSONPath使用(Java版)
java·前端·经验分享·python·测试工具·jsonpath
码丁_11744 分钟前
某IT培训班一阶段前端面试题
前端
yyt3630458411 小时前
BEM规范
前端