谈谈 js 中的继承

最新推荐文章于 2022-05-30 09:48:59 发布

努力让自己幸运

最新推荐文章于 2022-05-30 09:48:59 发布

阅读量151

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_30523685/article/details/94473444

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

继承

ECMAScript 只支持实现继承，并且其继承主要是依靠原型链来实现的。
实现的本质就是重写了原型对象，给它赋值一份新的对象

ES6

class sup {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
    
    toString() {
        return this.x + '' + this.y
    }
}

class Child extends  {
    constructor(x, y, color) {
        super(x, y) //调用父类的constructor(x, y)
        this.color = color
    }
    
    toString() {
        return this.color + ' ' + super.toString() // 调用父类的toString()
    }
}

var c = new Child('1', '2', 'red')

console.log(c.toString())  // red 12

原型链

利用原型链作为继承的主要思想就是：利用原型让一个引用对象去继承另一个引用对象的属性和方法。比如，把 B 的一个实例给了 A 的原型。那么 A 的原型就包含了 B 上面的一些方法和属性。A 的实例也可以使用这些属性和方法。

function Sup(){
	this.pro = true;
}
Sup.prototype.getProValue = function(){
	return this.pro;
}
function SubChild(){
	this.subPro = false;
}
// SubChild 继承 Sup，SubChild 的原型执行Sup的原型，并且如果此行代码写在 下面的方法后面，则下面的方法失效，因为我们这行代码改变了 SubChild 原本的原型指向。
SubChild.prototype = new Sup(); 
SubChild.prototype.getSubChildValue = function(){
	return this.subPro;
}
let child = new SubChild();
child.getProValue();
let p = new Sup();
p.__proto__ === child.__proto__.__proto__ //true

上面的代码中，SubChild 继承 Sup，本质上就是重写了 SubChild 函数的原型对象，把 Sup
的一个实例的赋值给了它，因此 SubChild.prototype 也拥有了 Sup 实例所拥有的属性和方法。后面我们有给它添加了一个新的方法这样就继承了 Sup 的属性和方法之后还拥有了自己的属性和方法。
p.proto === child.proto.proto === true。这句代码表示，SubChild 的原型指向的是 Sup 的原型。
在这里插入图片描述
上面的例子中，我们只把 SubChild.prototype 指向给 Sup 的实例后，并没有把 SubChild.prototype.constructor 指回给 SubChild.prototype。所以此时 SubChild.prototype.constructor 和 SubChild.prototype.proto.constructor 指向的都是 Sup。

SubChild.prototype.constructor = SubChild;

在这里插入图片描述
原型链的问题

原型链中的引用类型数会被所有实例共享。这也是为什么要早构造函数中，而不是在原型对象中定义属性的原因。
在创建子类型时，不能向父类构造函数传递参数，实际上是如何在不影响所有对象实例的情况下，给父类构造函数传递参数。

借用构造函数继承

在子类型构造函数中，使用 apply 和 call 方法来调用父类型构造函数对象。

function Animal(){
    this.species = "动物"
}
//构造函数 Cat 继承 Animal
function Cat(name,color){
    Animal.apply(this,arguments); //这里是重点
    this.name = name;
    this.color = color;
}
var cat1 = new Cat("大花","花色");
cat1.species // "动物"
 
Animal.prototype.constructor === Animal //true
Cat.prototype.constructor === Cat//true

借用构造函数的问题
父类构造函数原型中定义的方法，对于子类型构造函数无法使用，并且所有的方法都在构造函数中，因此函数的复用就无从谈起了。

组合继承(原型链 + 构造函数) -》常用

function Sup(name){
	this.name = name;
	this.colors = ["red","black","green"];
}
Sup.prototype.sayName = function(){
	alert(this.name);
}
function SubChild(name,age){
	Sup.call(this,name); // 这里进行传递参数
	this.age = age;
}
SubChild.prototype = new Sup(); 
SubChild.prototype.getAge = function(){
	alert(this.age);
}
let sub = new SubChild("KK",18)
sub.age;//18
sub.colors.push("blue");//["red","black","green","blue"]
sub.sayName;//KK

let sub2 = new SubChild("KL",29);
sub2.colors; // ["red","black","green"]
sub2.sayName(); // Kl

借用构造函数和原型链组合模式，即能让实例拥有自己的属性有可以使用共同的方法。避免了原型链和借用构造函数单独使用的缺陷。

原型继承(创建一个临时空构造函数继承) - 浅拷贝

function object(proto){
	function F(){}
	F.prototype = proto;
	return new F();
}
let person = {
	name:"KK",
	colors:["red","blue","green"]
}
let aa = object(person)
aa.colors //  ["red", "blue", "green"]
aa.name // KK
aa.name ="LM" 
aa.name // LM

let bb = object(person);
bb.name //KK
bb.name = "OO"
bb.name // OO
bb.colors //["red", "blue", "green"]
bb.colors.push("blank")
bb.colors //["red", "blue", "green","blank"]

aa.colors //["red", "blue", "green","blank"]

在 object() 内部，创建一个临时的空的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个临时函数的一个实例。本质上讲，object()对传入的对象进行了一次浅拷贝。

上面的例子中，把 peroson 对象传入object() 中，以 person 对象为原型，这样返回的新对象就拥有了一个基本数据和引用数据类型。这意味着 person.colors 不仅属于 person 对象还被 aa 和 bb 共享。实际上，这又相当于创建了 perosn 的2个副本。

**新增Object.creat() **
Object.create() 规范了原型式继承。接受2个参数，一个原型对象和 (可选)一个为新对象定义额外属性的对象。在传入 1 个参数时，和object() 功能相同。

Object.create() 第二参数与 Object.defineProperties() 方法的第二个参数格式相同。每个属性都通过自己的描述定义。以这种方式定义的任何属性都会覆盖原型上的同名的属性。

let person = {
	name:"KK",
	colors:["red","blue","green"]
}
let aa = Object.create(person,{
	name:{
		value:"GRE"
	}
})
alert(aa.name); // “GRE”

该模式就像使用原型模式一样，引用类型数据依旧会共享最终的值。只是避免了创建构造函数。

寄生式继承

封装一个继承过的对象，在该函数内在添加一些自己的方法。最后返回一个对象。

function object(proto){
	function F(){}
	F.prototype = proto;
	return new F();
}
function createAn(O){
	let clone = object(O); //创建一个新对象
	clone.sayHi= function(){ //添加自己的方法增强对象
		alert("hi")
	}
	return clone; //返回这个对象
}
let person={
	name:"KK",
	colors:["red","green","blue"]
}
let a = createAn(person)
a.sayHi() // hi
a.colors//["red","green","blue"]

这样返回的新对象，不仅具有 person 的所有属性和方法，还有自己的属性和方法。
例子中的 object() 函数不是必需的，任何能够返回新对象的函数都适用于此模式。

寄生组合模式继承 -》常用

前面说到的组合继承(借用构造函数+原型链) 模式的问题就是在于，无论什么情况下，都会调用 2 次父类型构造函数。一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。子类型最终会包含父类构造函数的全部实例属性。

组合继承模式

function Sup(name){
	this.name = name;
	this.colors = ["red","black","green"];
}
Sup.prototype.sayName = function(){
	alert(this.name);
}
function SubChild(name,age){
	Sup.call(this,name); // 第二次调用
	this.age = age;
}
SubChild.prototype = new Sup();  //第一次调用，创建子类型原型
SubChild.prototype.getAge = function(){
	alert(this.age);
}
let sub = new SubChild("KK",18)

第一次调用 Sup 构造函数得到2个属性，name 和colors，他们都是 Sup 的实例属性。只不过存在于 Sup 的原型中，当调用 SubChild 时，又用调用一次 Sup 构造函数，这一次又在新对象上创建了实例属性 name 和 colors 。于是这 2 个属性就屏蔽了原型中同名的 2 个属性。

寄生组合式继承模式避免了这2次调用
寄生式组合继承思想：不需要为了指定子类型构造函数而调用父类构造函数，我们需要的只是一个父类原型的副本而已。本质上就是寄生式构造函数来继承父类构造函数的原型，然后在将结果指给子类型。

function inheritProto(childPro,supPro){
	var proto = object(supPro.prototype); //创建新对象原型
	proto.constructor = childPro; // 把constructor 指向原本对象
	childPro.prototype = proto; //把新对象原型执行给子类型原型
}

function Sup(name){
	this.name = name;
	this.colors = ["red","black","green"];
}
Sup.prototype.sayName = function(){
	alert(this.name);
}
function SubChild(name,age){
	Sup.call(this,name); // 这里进行传递参数
	this.age = age;
}
inheritProto(SubChild,Sup)
SubChild.prototype.getAge = function(){
	alert(this.age);
}
let sub = new SubChild("KK",18)
sub.age;//18
sub.colors.push("blue");//["red","black","green","blue"]
sub.sayName;//KK

let sub2 = new SubChild("KL",29);
sub2.colors; // ["red","black","green"]
sub2.sayName(); // Kl

此模式只调用了 1 次父类 Sup 函数，并且还能保持原型链不变。