关于JS继承的一道题
偶尔看到一篇字节的面试题,大概意思就是下面:
// A code block
function Animal(name){
this.name = name||'Animal';
}
const Cat = Animal.mybind(null,'cat');
const cat = new Cat();
console.log(cat.name);//cat;
console.log(cat instanceof Cat);//true
console.log(cat instanceof Animal);//true;
这道题主要还是考察对原型和继承的理解,从题目可以看出目标就是通过方法mybind实现一个继承的子类关系。下面分别从Es5和Es6探讨一下。
//es5
Function.prototype.mybind=function(obj,name){
const fn = this;//这个this的指向是引用这个方法的对象,就是下文中Animal;
function newFn(...args){
fn.call(this,...args);//这里的this则是通过new的时候的实例
this.name = name
}
newFn.prototype = new fn();
return newFn;
}
function Animal(name){
this.name = name||'Animal';
}
const Cat = Animal.mybind(null,'cat');
const cat = new Cat();
console.log(cat.name);//cat;
console.log(cat instanceof Cat);//true
console.log(cat instanceof Animal);//true;
从上边的代码我们可以看出用到了构造继承和原型继承两个,构造继承的实例把原型实例屏蔽了。
Function.prototype.mybind=function(obj,name){
// const fn = this;
class newC extends this{
constructor(value){
super(value);
this.name = name ||value;
}
}
return newC;
}
class Animal{
constructor(name){
this.name = name || 'Animal';
}
}
const Cat = Animal.mybind(null,'cat');
const cat = new Cat();
console.log(cat instanceof Cat);
console.log(cat instanceof Animal);
console.log(cat.name);
E6的写法相对简单了许多,不用考虑使用构造函数继承,还是原型继承等等。直接调用类的继承extends就可以了。
还有Object.crate去实现,使用现有的对象来提供新创建的对象的__proto__,如果不清楚__proto__可以去专门了解一下,js在运行上下文的时候,寻找一个属性的时候会沿着作用域链往上一直往上寻找,知道null为止。即子类的__proto__属性总是指向父类。
Function.prototype.mybind=function(obj,name){
// const fn = this;
function newFn(...args){
}
newFn.prototype = Object.create(this.prototype);
newFn.prototype.name = name;
return newFn;
}
function Animal(name){
this.name = name || "Animal";
}
const Cat = Animal.mybind(null,'cat');
const cat = new Cat();
console.log(cat instanceof Cat);
console.log(cat instanceof Animal);
console.log(cat.name);