《 JS 继承 》

181 阅读2分钟

基于原型 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  

这样,per1per2 都应用了同一个 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()

本文借鉴了 这里