==详解 ES5 组合继承（构造函数+原型链）==
function Parent(){...} function Child(){ Parent.call(this) // ① } Child.prototype = new Parent() // ②
1. 先记住目的
我们要让：
- Child 实例 继承 Parent 的属性 + 方法
- 这是 ES5 没有 class/extends 时的标准写法
2. 逐句解释
① Parent.call(this)
function Child(){ Parent.call(this) }
- call(this) 把 Parent 里的 this 换成 Child 的实例
- 等于：在创建 Child 时，把 Parent 的属性“复制”一份给自己
- 作用：继承父构造函数里的实例属性
例子：
function Parent() { this.name = "父类" } function Child() { Parent.call(this) } const c = new Child() console.log(c.name) // "父类" 继承到了
--- ② Child.prototype = new Parent()
Child.prototype = new Parent()
- 把 Child 的原型对象，变成 Parent 的一个实例
- 原型链就通了：
Child实例 → Child.prototype → Parent.prototype
- 作用：继承父类原型上的方法
例子：
Parent.prototype.say = function(){ console.log('说话') } const c = new Child() c.say() // 能调用，因为原型链找到了
---
3. 合起来：组合继承 = 最常用的 ES5 继承
- Parent.call(this)
→ 继承实例属性
- Child.prototype = new Parent()
→ 继承原型方法
所以它叫 组合继承：
借用构造函数 + 原型链继承 合在一起。
4. 面试常问缺点
它有个小问题：
- Parent 会被执行两次
1. new Child() 时：Parent.call(this)
2. 挂原型时：new Parent()
后来就有了寄生组合式继承（优化版），但面试先把这个搞懂就稳了。
5. 一句话总结（面试背诵版）
这段代码是 ES5 组合继承：
1. Parent.call(this) 继承父类实例属性；
2. Child.prototype = new Parent() 继承父类原型方法；
3. 结合了借用构造函数和原型链两种方式，是 ES5 最常用继承方案。
===寄生组合继承==
一、最终最优代码（背它）
function Parent() { this.name = 'parent'; } Parent.prototype.say = function () { console.log('hello'); }; function Child() { Parent.call(this); // 继承属性（只调用1次父构造） } // 核心：寄生组合继承关键一句 Child.prototype = Object.create(Parent.prototype); // 修正 constructor Child.prototype.constructor = Child;
---
二、和你之前写法的区别
你之前：
Child.prototype = new Parent();
问题：
- 会调用两次 Parent 构造函数
- 会把 Parent 实例属性挂到原型上，多余、浪费
优化后：
Child.prototype = Object.create(Parent.prototype);
- 只继承原型，不调用 Parent 构造
- 干净、高效、标准
---
三、三句话背会
1. 用 Parent.call(this) 继承实例属性
2. 用 Object.create(Parent.prototype) 继承原型方法
3. 最后修正 constructor 指向
这就是 JS 最标准、最推荐的继承方式。
---
四、我再给你一句超简记忆版
call 拿属性，create 拿原型，constructor 指回去
---
题目1（基础组合继承）
function Parent() { this.name = "父亲"; } Parent.prototype.say = function () { console.log(this.name); }; function Child() { Parent.call(this); this.name = "儿子"; } Child.prototype = new Parent(); Child.prototype.constructor = Child; var child = new Child(); child.say();
问：输出什么？//儿子
执行过程 1. new Child() 2. 里面先跑： Parent.call(this) - 给当前 child 实例设置： this.name = "父亲" 3. 然后跑： this.name = "儿子" - 把上面的 name 覆盖了 4. 调用 child.say() - say 在原型上， this 指向 child - 所以输出： this.name → 儿子 答案：儿子
---
题目2（寄生组合继承 + 箭头函数）
function Parent() { this.age = 40; } Parent.prototype.getAge = () => { console.log(this.age); }; function Child() { Parent.call(this); this.age = 20; } Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Child; var child = new Child(); child.getAge();
问：输出什么？//undefined
关键知识点 箭头函数没有自己的 this 它的 this 是定义时外层作用域的 this，不是调用时的实例。 这里： - 箭头函数写在最外层（全局） - 所以 this = window / 全局对象 - 全局没有 age 属性 答案：undefined 两题核心总结 1. 普通函数： this 指向调用它的对象（实例） 2. 箭头函数： this 指向定义时的外层 this，不绑定实例
===ES6 Class 继承===
题目 1（基础 class + extends）
class Person { constructor() { this.name = "普通人"; } sayName() { console.log(this.name); } } class Student extends Person { constructor() { super(); // 先执行父类的 constructor this.name = "小学生"; // 覆盖掉前面的 name } } const stu = new Student(); stu.sayName();
问：输出什么？//小学生
- extends 就是继承
- super() = 调用父类构造方法
- 先设 name = 普通人，又改成 小学生
- 普通方法 this 指向实例
---
题目 2（super 传参）
class Animal { constructor(type) { this.type = type; } showType() { console.log(this.type); } } class Cat extends Animal { constructor() { super("猫"); // 传给父类构造：type = "猫" } } const cat = new Cat(); cat.showType();
问：输出什么？
- super("猫") 等于调用父类：new Animal("猫")
- 所以实例上 this.type = "猫"
---
超简口诀
- extends：继承
- super()：调用父构造
- 后面赋值会覆盖前面
==JS 继承 · 终极总结==
一、ES5 组合继承（老写法）
function Parent() { this.name = '父'; } Parent.prototype.say = function () {}; function Child() { Parent.call(this); // 继承实例属性 } Child.prototype = new Parent(); // 继承原型方法 Child.prototype.constructor = Child;
二、寄生组合继承（最优 ES5）
function Child() { Parent.call(this); } // 核心：只继承原型，不执行构造 Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Child;
三、ES6 class 继承（最简单）
class Parent {} class Child extends Parent { constructor() { super(); // 必须写！ } }
四、this 必坑
普通函数在原型上
箭头函数在原型上
五、一句话串起所有继承
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。