- 类与实例
①类的声明
②生成实例 - 类与继承
①如何实现继承
②继承的几种方式
类与实例
类的声明
注意，面试的时候不要一开始就讲完美的答案，而是从简单到最优。总结每个的区别优点缺点适用场景。主动问要不要讲下具体的区别？
<script type="text/javascript">
// es5类的声明
function Animal()
{
this.name='name';
}
// es6类的声明
class Animal2{
constructor() {
this.name=name;
}
}
//类的实例化
console.log(new Animal(),new Animal2());
//借助构造函数实现继承
//缺陷:只是实现了部分继承，如果父类的属性都在构造函数里面那就没有问题，
//但如果在外部添加了父类的原型方法,子类是无法访问到的
function Parent1()
{
this.name='parent1';
}
Parent1.prototype.say=function (){};
function Child1()
{
Parent1.call(this);
this.type='child1';
}
console.log(new Child1(),new Child1().say());
//借助原型链实现继承,弥补构造函数实现继承的缺陷
//缺点:引用类型共用地址,若一个实例修改,其他实例引用的对象也被修改了
function Parent2()
{
this.name='parent2';
this.play=[1,2,3];
}
function Child2()
{
this.type='child2';
}
Child2.prototype=new Parent2();
console.log(new Child2());
console.log(new Child2().__proto__===Parent2.prototype);
var s1=new Child2();
var s2=new Child2();
s1.play.push(4);
//组合方式(原型链+构造函数)
//缺点:父级构造函数执行两次
function Parent3()
{
this.name='parent3';
this.play=[1,2,3];
}
function Child3()
{
Parent3.call(this);//执行一次
this.type='child3';
}
Child3.prototype=new Parent3();//执行两次
var s3=new Child3();
var s4=new Child3();
s3.push(4);
console.log(s3.play,s4.play);
//组合继承的优化1
function Parent4()
{
this.name='parent4';
this.play=[1,2,3];
}
function Child4()
{
Parent4.call(this);//执行一次
this.type='child4';
}
Child4.prototype=Parent4.prototype;//执行两次
var s5=new Child4();
var s6=new Child4();
console.log(s5,s6);
console.log(s5 instanceof Child4,s5 instanceof Parent4);//true true
//缺点:无法区分一个子类是由父类实例化还是由继承类实例化
console.log(s5.constructor);//Parent4
//没有自己的constructor,是父类的.所以也无法通过constructor来判断字类具体由哪个类实例化
//组合继承的优化2
function Parent5()
{
this.name='parent5';
this.play=[1,2,3];
}
function Child5()
{
Parent5.call(this);//执行一次
this.type='child5';
}
//达到了父类与子类对象的隔离,此时没有自己的constructor
Child5.prototype=Object.create(Parent5.prototype));//执行两次
//那为什么上面的方法中不能也直接这样写呢,
//因为上面的优化方法指向的是同一个.
//而上面的一条语句则做到了隔离,相当于一个拥有父类原型的副本
Child5.prototype.constructor=Child5;
var s7=new Child5();
console.log(s7 instanceof Child5,s7 instanceof Parent5());
</script>
