备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

【面试题】 对象、原型、原型链与继承？这次我懂了!

2024-01-09 31
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【面试题】 对象、原型、原型链与继承？这次我懂了!

给大家推荐一个实用面试题库

1、前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库

前言

  • 原型、原型链、类与继承似乎无时无刻的出现在我们身边,无论你是在面试中亦或是平常学习和工作中都有它的身影。那么这个是又是什么东西呢 ? 我曾通过 avaScript高级程序设计、你不知道的JavaScript、MDN文档以及教学视频。但似乎仍是半知半解,但我依然相信能通过这篇文章能让大家以及我搞懂这玩意到底是什么神仙。js版的哈希表实现

什么是对象?

  • 在ECMAScript中,对象是一组属性无序的集合,对象的每个属性或方法都有一个名称来标识,这个名称映射到一个值,你可以将其想像成一张散列表。

散列表（Hash table，也叫哈希表），是根据键（Key）而直接访问在内存储存位置的数据结构。也就是说，它通过计算出一个键值的函数，将所需查询的数据映射到表中一个位置来让人访问，这加快了查找速度。这个映射函数称做散列函数，存放记录的数组称做散列表。

创建对象

  • 创建自定义对象
// 创建一个Object的新实例,然后在实例上面添加属性和方法
const person = new Object();
person.name = "moment";
person.age = 18;
person.running = function () {
  console.log("我会游泳哦,你会吗");
};
复制代码
  • 对象字面量
const person = {
  running: function () {
    console.log("你会我也会啊");
  },
  name: "moment",
  age: 7,
  dance: function () {
    console.log("我还会跳舞呢");
  },
};
复制代码
  • 两个实例中,每创建一个对象,都要为其创建一个name,age的属性以及running的方法,那么有没有什么方法可以让我们可以减少一些重复的代码呢,答案是有的。我们可以把方法抽取出来定义成一个函数，再给对象赋值。但是......
const running = (info) => {
  console.log(info);
};
const person = new Object();
person.name = "moment";
person.age = 18;
person.running = running;
const object = {
  running,
  name: "moment",
  age: 7,
  dance: function () {
    console.log("我还会跳舞呢");
  },
};
// ,似乎只能封装公共的方法,属性无法动态传值,只能是固定的一个值
person.running("我们大家都会游泳哦"); // 我们大家都会游泳哦
object.running("我们大家都会游泳哦"); // 我们大家都会游泳哦
复制代码

工厂函数

抽象工厂模式（英语：Abstract factory pattern）是一种软件开发设计模式。抽象工厂模式提供了一种方式，可以将一组具有同一主题的单独的工厂封装起来。在正常使用中，客户端程序需要创建抽象工厂的具体实现，然后使用抽象工厂作为接口来创建这一主题的具体对象。客户端程序不需要知道（或关心）它从这些内部的工厂方法中获得对象的具体类型，因为客户端程序仅使用这些对象的通用接口。抽象工厂模式将一组对象的实现细节与他们的一般使用分离开来。

  • 按我个人的理解,工厂模式就像是一个模具,你能根据这个模具去生产产品,你只能改变其外观颜色,但是你不能改变其形状和大小。
function createObject(name, age, info) {
  const obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.running = function () {
    console.log(info);
  };
  return obj;
}
const person = createObject("moment", 18, "我会跑步");
const student = createObject("supper", 16, "我会跑步,我比你还年轻呢");
person.running(); // 我会跑步
student.running(); // 我会跑步,我比你还年轻呢
复制代码
  • 通过工厂模式，我们可以快速创建大量相似对象，没有重复代码。迎面走来走来的又是一个新问题,工厂模式创建的对象属于Object，无法区分对象类型，这也是工厂模式没有广泛使用的原因。

构造函数模式

  • 没有显式地创建对象
  • 属性和方法直接赋值给了this
  • 没有return
function Person(name, age, info) {
  this.name = name;
  this.age = age;
  this.running = function () {
    console.log(info);
  };
}
const person = new Person("moment", 18, "我会跑步");
const student = new Person("supper", 16, "我会跑步,我比你还年轻呢");
person.running(); // 我会跑步
student.running(); // 我会跑步,我比你还年轻呢
复制代码
  • 以上代码实际上执行的是这样的操作
person.name = "moment";
person.age = 18;
person.running = function () {
  console.log("我会跑步");
};
student.name = "moment";
student.age = 16;
student.running = function () {
  console.log("我会跑步,我比你还年轻呢");
};
复制代码
  • 要创建Person实例,应使用new操作符。
  1. 在内存创建一个新对象。
  2. 这个新对象内部的[[Prototype]] (proto)特性被赋值为构造函数的prototype属性, 即 person.proto=Person.prototype。
  3. 构造函数内部的this被赋值为这个新对象(即this指向新对象)。
  4. 执行构造函数内部的代码. 如 person.proto.name='moment'。
  5. 如果构造函数返回非空对象,则返回该对象;否则,返回刚创建的新对象。
  • new的过程可以参考以下代码
function myNew(func, ...args) {
  // 判断方法体
  if (typeof func !== "function") {
    throw "第一个参数必须是方法体";
  }
  // 创建新对象
  // 这个对象的[[prototype]](隐式原型 __proto__)指向 func 这个类的原型对象 prototype
  // 即实例可以访问构造函数原型 obj.constructor === Person
  const object = Object.create(func.prototype);
  // 构造函数内部的this被赋值为这个新对象
  const result = func.apply(object, args);
  // 如果构造函数返回的结果是引用数据类型，则返回运行后的结果
  // 否则返回新创建的 obj
  const isObject = typeof result === "object" && result !== null;
  const isFunction = typeof result === "function";
  return isObject || isFunction ? result : object;
}
复制代码
  • 通过控制台打印不难发现,前面两个对象都是Object的实例,同时也是Person的实例
// instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上
// person和student的隐式原型都指向Person的显式原型;
console.log(person.__proto__ === student.__proto__); //true
console.log(person instanceof Object); //true
console.log(person instanceof Person); //true
console.log(student instanceof Object); //true
console.log(student instanceof Person); //true
// 以上代码的代码实际上执行的该例子
console.log(student.__proto__.__proto__.constructor.prototype === Object.prototype);
console.log(student.__proto__.constructor.prototype === Person.prototype);
复制代码
  • 构造方法虽然有用,但是也存在问题,虽然person和student都有一个方法running,但这两个方法不是同一个Function的实例,指向的内存也各自不同。
console.log(student.running === person.running); //false
复制代码
  • 都是做着同样的事情,但是每个实例都创建出一个方法,这就造成了没必要的内存损耗,那么有没有什么办法可以很好的解决这个问题呢,这时候,原型模式就出现了。

原型模式

  • 每个函数都会创建一个prototype属性,这个属性是一个对象,该对象可以给每个实例共享属性和方法。
  • 我们对之前的代码进行改造。
function Person(name, age) {
  this.name = name;
  this.age = age;
}
// 在这里,把方法running定义在了Person的prototype属性上
// person和student共享同一个原型方法running,指向的是同一快内存空间
Person.prototype.running = function (info) {
  console.log(info);
};
const person = new Person("moment", 18);
const student = new Person("supper", 16);
// 在构造函数中这里输出的是false
console.log(person.running === student.running); //true
person.running("我会跑步"); // 我会跑步
student.running("我会跑步,我比你还年轻呢"); //我会跑步,我比你还年轻呢
复制代码
  • 在前面的new操作符可以知道,person和student的隐式原型等于Perosn的显式原型
  1. 首先person和student现在自己身上查找有没有running方法,没有找到。
  2. 去原型里查找,也就是通过person.__proto__或者student.proto,该方法,由于person.proto=Person.prototype,所以调用person.running()实际上调用的是Person.prototype.running()方法

  • 具体的内存表现形式如下图所示。

  • 通过上图,一下代码的输出就能理解了。
console.log(Person.prototype.constructor === Person); // true
console.log(student.__proto__.constructor === Person); // true
复制代码

原型层级

  • 在讲之前先祭出两张神图

  • 在讲原型之前,我们先来认识一下认识一下Function和Object的关系!
  1. 在JavaScript中,每个JavaScript函数实际上都是一个Function对象。
  2. 在 JavaScript 中，几乎所有的对象都是 Object 类型的实例，它们都会从 Object.prototype 继承属性和方法。
  3. 从原型链上讲,Function继承了Object。
  4. 从构造器上讲,Function构造了Object。
  5. 好了,看到这里,晕了没?
  6. 接下来通过代码的展示,应该能更清楚的说明了上面两张图中的所讲的意思了。
function Person(name, age) {
  this.name = name;
  this.age = age;
}
// 在这里,把方法running定义在了Person的prototype属性上了
Person.prototype.running = function (info) {
  console.log(info);
};
const obj = {};
const person = new Person("moment", 18);
const student = new Person("supper", 16);
console.log(obj.__proto__ === Object.prototype); // true
console.log(Object.constructor === Function); // true
console.log(Function.prototype.__proto__ === Object.prototype); // true
console.log(Function.constructor === Function); // true
console.log(Person.__proto__.constructor.__proto__ === Function.prototype); // true
console.log(student.__proto__.__proto__.constructor.__proto__ === Function.prototype); // true
console.log(Function.constructor.__proto__ === Function.prototype); // true
console.log(Object.constructor === Function.constructor); // true
console.log(Object instanceof Function); // true
console.log(Function instanceof Object); // true
console.log(Function.prototype.__proto__ === Object.prototype); // true
复制代码
  • 原型查找机制,首先在实例上查找,有则返回,没有则往上查找,这时候查找到了原型上了,如果能找到有该属性或方法,则返回,如果仍然没找打,就在Object的原型上查找,找到了则返回,没有就返回undefined或者报错。
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function () {
    console.log("我是在实例身上的");
  };
  this.memory = "我是属于实例的";
}
// 在这里,把方法running定义在了Person的prototype属性上了
Person.prototype.running = function () {
  console.log("我是原型上的方法");
};
Object.prototype.牛逼 = "这是真的";
Person.prototype.memory = "我是属于原型的";
const person = new Person("moment", 18);
console.log(person.name); // 来自实例
console.log(person.memory); // 来自实例
person.sayName(); // 来自实例
person.running(); // 来自原型
console.log(person.牛逼); // 这是真的
console.log(person.六六六); // undefined
复制代码

原型模式的弊端

  • 在继承之前,我们每个类都要给其定义属于它自己的属性和方法,但是如果出现相同的方法,我们都要给他重新定义一遍,这样未免出现过多重复代码。
function Student() {}
function Teacher() {}
Student.prototype.running = function () {
  console.log("学生");
};
Student.prototype.eating = function () {
  console.log("吃");
};
Student.prototype.study = function () {
  console.log("学习");
};
Teacher.prototype.running = function () {
  console.log("老师
};
Teacher.prototype.teach = function () {
  console.log("吃");
};
复制代码

原型链继承

  • 父类的原型直接赋值给子类的原型
  1. 父类和子类共享同一个原型对象,修改了任意一个,另外一个也被修改。
  2. 这是一个错误的做法。
function Student() {}
function Teacher() {}
Teacher.prototype.running = function () {
  console.log("老师");
};
Teacher.prototype.teach = function () {
  console.log("吃");
};
Student.prototype = Teacher.prototype;
const student = new Student();
student.running(); // 老师
student.__proto__.running = function () {
  console.log("我被修改了");
};
const teacher = new Teacher();
teacher.running();// 我被修改了
复制代码
  • 正确的原型链继承
function Student() {}
function Teacher() {}
Teacher.prototype.running = function () {
  console.log("老师");
};
Teacher.prototype.teach = function () {
  console.log("教");
};
const teach = new Teacher();
Student.prototype = teach;
const student = new Student();
student.running = function () {
  console.log("我被修改了");
};
const smallStudent = new Student();
smallStudent.running(); // 老师 继承于Teacher原型
student.running(); // 我被修改了  来自于实例本身
复制代码
  • 通过一张图来展示子类的两个实例和两个构造函数及其对应的原型之间的关系

  • 原型链继承的问题
  1. 在使用原型实现继承时,原型实际上变成了另一个类型的实例。这意味着原先的实例属性和方法摇身一变成了原型属性和方法。
  2. 子类型在实例化时不能给父类型的构造函数传参。

盗用构造函数

  • 通过call或者apply改变this指向
function Teacher(nickname, age, height) {
  this.nickname = nickname;
  this.age = age;
  this.height = height;
}
function Student(nickname, age, height) {
  Teacher.call(this, nickname, age, height);
  this.hobby = ["唱", "跳", "rap"];
}
Teacher.prototype.running = function () {
  console.log("老师");
};
Teacher.prototype.teach = function () {
  console.log("教");
};
const student = new Student("moment", "18", "1米59");
console.log(student.height); // 1米59
console.log(student.hobby); //  ["唱", "跳", "rap"]
复制代码
  • 借用构造函数存在问题
  1. 必须在构造函数中定义方法,因此函数不能重用。
  2. 子类也不能访问父类原型上定义的方法。

组合继承

  • 综合了原型链和盗用构造函数,将两者的优点集中了起来。
function Teacher(nickname, age, height) {
  this.nickname = nickname;
  this.age = age;
  this.height = height;
}
function Student(nickname, age, height) {
  Teacher.call(this, nickname, age, height);
  this.hobby = ["唱", "跳", "rap"];
}
Teacher.prototype.running = function () {
  console.log("老师");
};
Teacher.prototype.teach = function () {
  console.log("教");
};
Student.prototype = new Teacher();
const student = new Student("moment", "18", "1米59");
console.log(student.height); // 1米59
console.log(student.hobby); //  ["唱", "跳", "rap"]
复制代码
  • 组合继承存在的问题 1.父类构造函数至少被调用两次。
    引用类型继承终极解决方案 寄生式组合继承
function inheritPrototype(superType, children) {
  const prototype = Object(superType.prototype); // 创建对象
  prototype.constructor = children; // 增强对象
  children.prototype = prototype; // 赋值对象
}
function Teacher(nickname, age, height) {
  this.nickname = nickname;
}
function Student(nickname) {
  Teacher.call(this, nickname);
  this.hobby = ["唱", "跳", "rap"];
}
inheritPrototype(Student, Teacher);
Teacher.prototype.running = function () {
  console.log("老师会跑步");
};
Student.prototype.running = function () {
  console.log("学生也会跑步");
};
const student = new Student("moment");
student.running(); // 学生也会跑步
console.log(student.hobby); // ['唱', '跳', 'rap']
console.log(student.nickname); // comment
复制代码
  • 这里只调用了一次Teacher构造函数,避免了Student.prototype上不必要也用不到的属性。
  • 原型链仍然保持不变。

给大家推荐一个实用面试题库

1、前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库

文章标签：
前端开发
JavaScript
设计模式
关键词：
面试原型
面试原型链继承
面试对象原型链
前端技术栈
目录
相关文章
前端技术栈
|
4月前
|
存储 JavaScript 前端开发
【面试题】JS的14种去重方法，看看你知道多少（包含数组对象去重）
【面试题】JS的14种去重方法，看看你知道多少（包含数组对象去重）
前端技术栈
56 0
前端技术栈
|
4月前
|
JavaScript 前端开发 Java
【面试题】new 一个对象时，js 做了什么？
【面试题】new 一个对象时，js 做了什么？
前端技术栈
35 0
前端技术栈
|
4月前
|
JavaScript 前端开发
【面试题】最详尽的 JS 原型与原型链终极详解（一）
【面试题】最详尽的 JS 原型与原型链终极详解（一）
前端技术栈
47 0
前端技术栈
|
4月前
|
前端开发 JavaScript
【面试题】原型与原型链 进一步理解~
【面试题】原型与原型链 进一步理解~
前端技术栈
31 1
godspeed_lucip
|
3月前
|
存储 编译器 程序员
近4w字吐血整理！只要你认真看完【C++编程核心知识】分分钟吊打面试官（包含：内存、函数、引用、类与对象、文件操作）
近4w字吐血整理！只要你认真看完【C++编程核心知识】分分钟吊打面试官（包含：内存、函数、引用、类与对象、文件操作）
godspeed_lucip
109 0
极客李华
|
4月前
|
安全 Java 程序员
面试题：什么是对象安全？
面试题：什么是对象安全？
极客李华
12 0
前端技术栈
|
4月前
|
JavaScript 前端开发 Java
【面试常见】JS继承与原型、原型链
【面试常见】JS继承与原型、原型链
前端技术栈
15 0
前端技术栈
|
4月前
|
设计模式 前端开发 JavaScript
【面试题】对象、原型、原型链与继承 ，你了解多少？
【面试题】对象、原型、原型链与继承 ，你了解多少？
前端技术栈
30 0
愿天堂没有BUG（公众号同名）
|
6月前
|
XML 前端开发 数据格式
面试官：有一个 List 对象集合，如何优雅地返回给前端？我懵了
1.业务背景 2.实体类 3.自定义Mapper和xml文件 4.Service层 5.Controller层
愿天堂没有BUG（公众号同名）
30 0
一乐乐
|
6月前
|
存储 算法 安全
面试~jvm(JVM内存结构、类加载、双亲委派机制、对象分配，了解垃圾回收)
面试~jvm(JVM内存结构、类加载、双亲委派机制、对象分配，了解垃圾回收)
一乐乐
53 0

热门文章

最新文章

  • 1
    面试官：Redis如何实现延迟任务？
  • 2
    关于技术面试问题
  • 3
    Python与NoSQL数据库（MongoDB、Redis等）面试问答
  • 4
    Flink常见面试问题(附答案)
  • 5
    答案很详细的MyBatis面试题（含示例代码）
  • 6
    Linux命令Top 100驱动人生! 面试必备
  • 7
    Java入门高频考查基础知识4（字节跳动面试题18题2.5万字参考答案）
  • 8
    面试官：请谈一谈你对OOP的理解？
  • 9
    渗透测试工程师面试题大全
  • 10
    面试官问10W 行级别数据的 Excel 导入如何10秒处理
  • 1
    vue面试题目汇总
    38
  • 2
    首次面试经历（忘指导）当我在简历上写了苍穹外卖，瑞吉外卖时……
    234
  • 3
    【springboot原理篇】Bean的加载方式，面试必看
    52
  • 4
    【Kafka面试演练】那Kafka消费者手动提交、自动提交有什么区别？
    70
  • 5
    【数组相关面试题】LeetCode试题
    17
  • 6
    网安面试指南——（渗透，攻击，防御）
    95
  • 7
    全球AI人才报告：硅谷40万人大裁员，码农地狱级面试12场！
    30
  • 8
    Java开发面试题 | 2023
    56
  • 9
    【怒怼大厂面试官】你先说说知道哪些MySQL的高级特性
    48
  • 10
    LeetCode刷题--- 面试题 01.07. 旋转矩阵（原地旋转+翻转替旋转）
    34

    • 相关课程

    更多
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计

    • 相关电子书

    更多
  • 阿里云技术面试红宝书
  • 超全算法笔试-模拟题精解合集
  • 程序员面试宝典

    • 相关实验场景

    更多
  • 面向对象-1：类的定义
  • 对象和接口-2：常见用法
  • 对象和接口-1：对象类型
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考