JavaScript中的原型链和继承使用场景是什么样子呀?

[ohMyGod_123]

求大神详细的说一下JS中的原型链和继承应该如何去应用，在什么样的场景下会用到原型链和继承这些东西，面试了好几家公司，每次技术面试官问有关这方面的题，总是答不上来．求大神支招呀！

[丰云]

平常工作中，真用不上 一般在进行js对象封装时，可能用得到，可以让你的对象结构更为清晰，代码更为简洁，便于阅读和维护。 不过现在前端也在模块化、组件化，封装也成了常态，熟悉原型链和继承，可能也是必须的吧。 不管怎么说，熟悉这个，说明对js工作原理理解较为深入，可以用于评估一个人的js水平。

[麦草CMS]

es5和es5以前的javascript版本原型链和原型可以用来实现继承吧，es6+有了class语法糖和继承的概念，我真不知道原型链干什么，也许指定原型链可以缩短对象的属性和方法的原型链查找过程，优化性能，要不然引用对象的一个未定义属性会一直顺着原型链查找到Object上。
继承的使用场景吗，我认为，当一个项目要针对不同的场景如用户设备类型（是手机还是PC还是平板）写出多个版本就能用上继承。把一些多版本公用的属性和方法放在一个父类里，然后其他版本继承父类就有了父类的属性和方法，然后在子类中写子类独有的属性和方法。这样一来代码做到了复用，提高了开发效率，结构也更清新。

[ohMyGod_123]

引用 2 楼 麦草CMS的回复:

es5和es5以前的javascript版本原型链和原型可以用来实现继承吧，es6+有了class语法糖和继承的概念，我真不知道原型链干什么，也许指定原型链可以缩短对象的属性和方法的原型链查找过程，优化性能，要不然引用对象的一个未定义属性会一直顺着原型链查找到Object上。
继承的使用场景吗，我认为，当一个项目要针对不同的场景如用户设备类型（是手机还是PC还是平板）写出多个版本就能用上继承。把一些多版本公用的属性和方法放在一个父类里，然后其他版本继承父类就有了父类的属性和方法，然后在子类中写子类独有的属性和方法。这样一来代码做到了复用，提高了开发效率，结构也更清新。

我现在是理解那些简单的基本概念，但是在平常的工作中，真的不知道去如何应用原型链相关的东西，实在是简直了，不过，我看你不但理解的很到位，而且还很会应用，佩服佩服！

[麦草CMS]

引用 3 楼 qq_35770417 的回复:

[quote=引用 2 楼 麦草CMS的回复:]es5和es5以前的javascript版本原型链和原型可以用来实现继承吧，es6+有了class语法糖和继承的概念，我真不知道原型链干什么，也许指定原型链可以缩短对象的属性和方法的原型链查找过程，优化性能，要不然引用对象的一个未定义属性会一直顺着原型链查找到Object上。
继承的使用场景吗，我认为，当一个项目要针对不同的场景如用户设备类型（是手机还是PC还是平板）写出多个版本就能用上继承。把一些多版本公用的属性和方法放在一个父类里，然后其他版本继承父类就有了父类的属性和方法，然后在子类中写子类独有的属性和方法。这样一来代码做到了复用，提高了开发效率，结构也更清新。

我现在是理解那些简单的基本概念，但是在平常的工作中，真的不知道去如何应用原型链相关的东西，实在是简直了，不过，我看你不但理解的很到位，而且还很会应用，佩服佩服！[/quote]
要理解es6-的原型链和继承，以及原型链和继承的关系。因为es6-没有类和继承的概念。js实现继承本质是把js中的对象构造函数在自己的脑中抽象成一个类，然后使用构造函数的protptype属性封装出一个类（另一个构造函数），使之完美(因为js中人们总结出的实现继承有不少，各有瑕疵)继承前一构造函数的所有属性和方法。因为构造函数能new出一个具体的对象实例，这就在js中实现了现代化的面向对象和继承。你要理解点。
1.现代化的面向对象的基本理论，如java的面向对象的基本概念。
2.js中prototype的由来和作用。记住是弄懂，弄透。
3.理解了前面两点，我想你对js中各种实现继承的优劣性能轻松理解。这也就是第三点。

后语：有了es6，真有必要掌握es6-的原型链和实现继承吗？

以上只是个人见解。

[麦草CMS]

因为es6-没有类和继承的概念。js实现继承本质是把js中的对象构造函数在自己的脑中抽象成一个类，然后使用构造函数的protptype属性封装出一个类（另一个构造函数），使之完美(因为js中人们总结出的实现继承有不少，各有瑕疵)继承前一构造函数的所有属性和方法。因为构造函数能new出一个具体的对象实例，这就在js中实现了现代化的面向对象和继承。要理解es6-的原型链和继承，以及原型链和继承的关系。你要理解3点。
1.现代化的面向对象的基本理论，如java的面向对象的基本概念。
2.js中prototype的由来和作用。记住是弄懂，弄透。
3.理解了前面两点，我想你对js中各种实现继承的优劣性能轻松理解。这也就是第三点。

后语：有了es6，真有必要掌握es6-的原型链和实现继承吗？

以上只是个人见解。

[小佩琦的猪乔治�]

引用 5 楼 麦草CMS 的回复:

因为es6-没有类和继承的概念。js实现继承本质是把js中的对象构造函数在自己的脑中抽象成一个类，然后使用构造函数的protptype属性封装出一个类（另一个构造函数），使之完美(因为js中人们总结出的实现继承有不少，各有瑕疵)继承前一构造函数的所有属性和方法。因为构造函数能new出一个具体的对象实例，这就在js中实现了现代化的面向对象和继承。要理解es6-的原型链和继承，以及原型链和继承的关系。你要理解3点。 1.现代化的面向对象的基本理论，如java的面向对象的基本概念。 2.js中prototype的由来和作用。记住是弄懂，弄透。 3.理解了前面两点，我想你对js中各种实现继承的优劣性能轻松理解。这也就是第三点。 后语：有了es6，真有必要掌握es6-的原型链和实现继承吗？ 以上只是个人见解。

有必要吗？ 必要 首先。ES6的出现并不是颠覆了以往的prototype的继承方式，它只是以往继承方法的封装，一种语法糖。对于喜欢学习底层技术的细心小伙伴们可能就会去看过ES6通过babel编译后的代码 eg：

// ES6
class A extends B {}
console.log(new A)

下面是通过babel后得到的ES5

// ES6 => babel => ES5
"use strict";

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };
  return _setPrototypeOf(o, p);
}

var A =
  /*#__PURE__*/
  function (_B) {
    _inherits(A, _B);
    function A() {
      return _getPrototypeOf(A).apply(this, arguments);
    }
    return A;
  }(B);
console.log(new A());

底层基础决定上层建筑~