原型继承和 Class 继承 ⾸先先来讲下 class ，其实在 JS 中并不存在类， class 只是语法糖，本质还是函数class Person {} Person instanceof Function // true组合继承function Parent(value) { this.val = value } Parent.prototype.getValue = function() { console.log(this.val) } function Child(value) { Parent.call(this, value) } Child.prototype = new Parent() const child = new Child(1) child.getValue() // 1 child instanceof Parent // true{callout color="#684def"}以上继承的⽅式核⼼是在⼦类的构造函数中通过 Parent.call(this) 继承⽗类的属性，然后改变⼦类的原型为 new Parent() 来继承⽗类的函数。这种继承⽅式优点在于构造函数可以传参，不会与⽗类引⽤属性共享，可以复⽤⽗类的函数，但是也存在⼀个缺点就是在继承⽗类函数的时候调⽤了⽗类构造函数，导致⼦类的原型上多了不需要的⽗类属性，存在内存上的浪费{/callout}寄⽣组合继承{callout color="#4defb9"}这种继承⽅式对组合继承进⾏了优化，组合继承缺点在于继承⽗类函数时调⽤了构造函数，我们只需要优化掉这点就⾏了{/callout}function Parent(value) { this.val = value } Parent.prototype.getValue = function() { console.log(this.val) } function Child(value) { Parent.call(this, value) } Child.prototype = Object.create(Parent.prototype, { constructor: { value: Child, enumerable: false, writable: true, configurable: true } }) const child = new Child(1) child.getValue() // 1 child instanceof Parent // trueclass继承class Parent { constructor(value) { this.val = value } getValue() { console.log(this.val) } } class Child extends Parent { constructor(value) { super(value) this.val = value } } let child = new Child(1) child.getValue() // 1 child instanceof Parent // true

手撸实现 call apply bind 原型函数 {message type="info" content="今天 Joe 老板又给我补课了，他问我call apply bind会用吗，我说会，他又说，把原型函数实现给我写一下，我一下懵逼了，原理，他是来羞辱我的，经过一下午的不懈努力，Joe 老板终于教会了我。"/}实现call{message type="warning" content="call 方法第一个参数是要绑定给this的值，后面传入的是一个参数列表。当第一个参数为null、undefined的时候，默认指向window。"/}{callout color="#f0ad4e"}call传参时，是传入1个或多个参数，所以，需要用...展开{/callout}/* 随便定义一个对象，待会将函数内的this指向指向倒这个对象 */ const obj = { name: '我是需要被绑定改变this指向的对象' } /* 需要改变this指向的函数，没有使用call时，this指向window */ function fn(a, b) { console.log(`This 现在指向 ${this}`); console.log(`传入的 a 是 ${a} ------- b 是 ${b}`); } /* * * 重写call方法 * _this 需要把this改变到哪个目标 * vvhan_com 传递进来的参数 */ Function.prototype.call = function (_this, ...vvhan_com) { /* 创建一个 Symbol call */ const call = Symbol(); /* 给传入的对象 _this 添加call元素为 this(此处this为 fn 函数体) */ _this[call] = this /* 执行 _this对象 中的 call 函数，并传入参数 vvhan_com */ _this[call](...vvhan_com); /* 最后删除 _this对象 中的call元素 */ delete _this[call]; } fn.call(obj, 1,2);实现apply{message type="warning" content="apply接受两个参数，第一个参数是要绑定给this的值，第二个参数是一个参数数组。当第一个参数为null、undefined的时候，默认指向window。"/}{callout color="#f0ad4e"}apply传参时，是传入一个数组，数组里面是参数，所以，不需要用...展开{/callout}/* 随便定义一个对象，待会将函数内的this指向指向倒这个对象 */ const obj = { name: '我是需要被绑定改变this指向的对象' } /* 需要改变this指向的函数，没有使用apply时，this指向window */ function fn(a, b) { console.log(`This 现在指向 ${this}`); console.log(`传入的 a 是 ${a} ------- b 是 ${b}`); } /* * * 重写apply方法 * _this 需要把this改变到哪个目标 * vvhan_com 传递进来的参数 */ Function.prototype.apply = function (_this, vvhan_com) { /* 创建一个 Symbol apply */ const apply = Symbol(); /* 给传入的对象 _this 添加apply元素为 this(此处this为 fn 函数体) */ _this[apply] = this /* 执行 _this对象 中的 apply 函数，并传入参数 vvhan_com */ _this[apply](...vvhan_com); /* 最后删除 _this对象 中的apply元素 */ delete _this[apply]; } fn.apply(obj, [1, 2]);实现bind{message type="warning" content="和call很相似，第一个参数是this的指向，从第二个参数开始是接收的参数列表。区别在于bind方法返回值是函数以及bind接收的参数列表的使用。bind返回值是函数"/}{callout color="#f0ad4e"}因为bind的调用方式，是返回一个新函数，在调用一次，例如：fn.bind(null)(options)，所以需要用到高阶函数{/callout}/* 随便定义一个对象，待会将函数内的this指向指向倒这个对象 */ const obj = { name: '我是需要被绑定改变this指向的对象' } /* 需要改变this指向的函数，没有使用bind时，this指向window */ function fn(a, b) { console.log(`This 现在指向 ${this}`); console.log(`传入的 a 是 ${a} ------- b 是 ${b}`); } /* * * 重写bind方法 * _this 需要把this改变到哪个目标 * vvhan_com 传递进来的参数 */ Function.prototype.bind = function (_this, ...vvhan_com) { /* 创建一个 Symbol bind */ const bind = Symbol(); /* 给传入的对象 _this 添加bind元素为 this(此处this为 fn 函数体) */ _this[bind] = this /* 返回函数 并传入参数 这里使用高阶函数接收参数 */ return function (...vvhan_com_) { /* 判断参数传入点 并执行 */ _this[bind](...vvhan_com_.length > 0 ? vvhan_com_ : vvhan_com); /* 最后删除 _this对象 中的bind元素 */ delete _this[bind]; } } fn.bind(obj, 1, 2); fn.bind(obj)(1, 2);最后总结相同点 {callout color="#f0ad4e"}call、apply、bind的作用都是改变函数运行时this的指向，bind返回对应函数=>便于稍后调用； apply, call则是立即调用。{/callout}区别点 {callout color="#f0ad4e"}apply 和 call 的用法几乎相同, 唯一的差别在于：当函数需要传递多个变量时, apply 传入一个数组作为参数输入, call 则是接受一系列的单独变量。{/callout}