类与实例
声明一个类:
/** es5声明一个类**/ function animail(){ this.name = 'name'; }
/** es6声明一个类**/ class animal2{ constructor(){ this.name = "name"; } }
/** 实例化**/ new animal() new animal2()
类与继承
/** 借助构造函数实现继承**/ function parent1(){ this.name = "parent1" } function child1(){ parent1.call(this);//改变上下文,将父级构造函数指向到子级上 this.type='child1' } console.log(new child())
/** 借助原型链实现继承**/ function parent1(){ this.name = "parent1" } function child1(){ this.type='child1' } child1.prototype = new parent1();//作用域由实例本身开始,向原型链上查找属性 console.log(new child1())
缺点:
如果两个实例同时用一个父类的原型,在修改原型链上的属性时,会导致另一个实例的值也会被更改,因为共用的一个父类实例在原型链上
/** 组合方式实现继承**/ function parent1(){ this.name = "parent1" } function child1(){ parent1.call(this)//改变上下文,将父级构造函数指向到子级上 this.type='child1' } child1.prototype = new parent1();//作用域由实例本身开始,向原型链上查找属性 console.log(new child1())
缺点:父级构造函数被执行了2次
/** 组合方式实现继承**/ function parent1(){ this.name = "parent1" } function child1(){ parent1.call(this)//改变上下文,将父级构造函数指向到子级上 this.type='child1' } child1.prototype = parent1.prototype;//将父级原型对象赋值到子上 console.log(new child1())
缺点:child1的constructor指向的是parent,因为parent和child共用一个原型对象
/** 组合方式实现继承**/ function parent1(){ this.name = "parent1" } function child1(){ parent1.call(this)//改变上下文,将父级构造函数指向到子级上 this.type='child1' } child1.prototype = object.create(parent1.prototype);//object.create创建出来的原型对象就是参数(parent1的原型),而且达到了父类和子类原型对象的隔离 child1.prototype.constructor = child1;//将构造函数指向到实例的构造函数 console.log(new child1())
class animal{ //构造函数 constructor(props){ this.name=props.name||'未知'; } eat(){ alert(this.name+"在吃东西..."); } } //class继承 class bird extends animal{ //构造函数 constructor(props){ //调用实现父类的构造函数 super(props); this.type=props.type||"未知"; } fly(){ alert(this.name+"在飞..."); } }
如对本文有疑问, 点击进行留言回复!!
vue源码实战render.js与$nextTick的异步调用
网友评论