基于原型 prototype 来实现继承
原型,使得类与类之间可以实现继承,多个实例对象可以共享一个方法。
举个示例,当不使用原型概念,多个对象不共用一个方法是会出现什么
// 声明一个构造函数=>person
function Person(name,age){
this.name = name;
this.age = age;
this.sing = function (){
console.log( "喜欢唱,跳,giao");
}
}
// 实例对象 => 初始化
let per1 = new Person("xiao啊giao",20);
let per2 = new Person("cxk",30);
// 我现在有两个实例对象,我想让这两个对象都使用Person中的like方法
per1.like();// 喜欢唱,跳,giao
per2.like();// 喜欢唱,跳,giao
per1.sing === per2.sing // 可以清楚的看到,两个实例对象应用的并不是同一个方法,否则应该返回true才对
false
虽然 per1 和 per2 都使用了 like 方法,但是 per1 与 per2 并没有继承构造函数中的方法,而是单独开辟了一块空间,如果每个实例对象都需要开辟独立空间来使用这个方法。当前在实例对象少的情况下体现不出来,但是一旦实例对象多起来之后,会影响到程序的运行速度.
代码加工,让它基于原型继承
每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。通俗点说就是,实例通过内部指针可以访问到原型对象,原型对象通过constructor指针,又可以找到构造函数。
每创建一个构造函数,该函数就会自动带有一个 prototype 属性。该属性是个指针,指向了一个对象,称之为原型对象(prototype object)。
// 声明一个构造函数=>person
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.sing = function(){
return "我的名字叫" + this.name + "我今年" + this.age + "喜欢唱跳giao" ;
}
let per1 = new Person("xiao啊giao",20);
let per2 = new Person("cxk",30);
per1.sing === per2.sing // 可以清楚的看到,两个实例对象应用的是同一个方法,返回true
true
这样,per1 与 per2 都应用了同一个 sing 方法,也就是说:基于原型实现了继承。
基于 class 继承
先看一下不用 class 继承
function animal(){
this.a=1;
}
animal.prototype.dw=function(){
console.log("动物的原型方法")
}
function Dog(){
this.b=2;
}
Dog.prototype.sy=function(){
console.log("sy")
}
Dog.prototype=new animal()//1.这句话把Dog的原型指向了animal
var hashiqi=new Dog();
hashiqi.dw();//2.Dog的实例对象hashiqi便有了动物的原型方法dw
hashiqi.sy();//3.Dog的实例对象hashiqi便失去了构造函数原有的原型方法sy
console.log(hashiqi.a);//4.Dog的实例对象hashiqi便有了动物的所有属性,如上面的a
console.log(hashiqi.b);//5.Dog的实例对象hashiqi构造函数的属性未失去,如上面的bark
console.dir(hashiqi)
// 很简单通过修改原型指向实现了继承当然还有其他方法比如call和apply
下面用 class 继承实现
class Animal{
constructor(name) {
this.name=name
}
eat(){
console.log(`${this.name}`);
}
}
class Dog extends Animal{
constructor(name,age){
super(name)
//但凡看到extends继承那这句就固定加上super
//相当于es5中Animal.call(this,name)
//super()负责初始化this.相当于ES5中的call和apply方法。
this.name=name
this.age=age
}
say(){
console.log(`${this.name}=>${this.age}`)
}
}
var dog=new Dog("cxk",12);
dog.say()
dog.eat()