JS中的四大继承方案

类的多态:重载和重写

  • JAVA中重载:函数名相同,但是传参类型、数量不同或者返回值不一样,这相当与把一个函数重载了 (JS中没有类似于后台语言中的重载机制:JS中的重载只的是同一个方法,根据传参不同,实现不同的业务逻辑)
  • 重写:子类重写父类上的方法

继承:子类继承父类中的属性和方法(JS中的继承机制和其它后台语言是不一样的,有自己的独特处理方式)

一、原型继承 (B子类 => A父类)

原型继承:子类的原型指向父类的一个实例

	/* function A() {
		this.x = 100;
	}
	A.prototype.getX = function getX() {
		console.log(this.x);
	};

	function B() {
		this.y = 200;
	}
	B.prototype.sum=function(){}
	B.prototype = new A;
	B.prototype.getY = function getY() {
		console.log(this.y);
	};
	let b = new B; */

在这里插入图片描述

二、CALL继承

CALL继承:把父类当做普通函数执行,让其执行的时候,方法中的this变为子类的实例即可
【特点】
1.只能继承父类中的私有属性(继承的私有属性赋值给子类实例的私有属性),而且是类似拷贝过来一份,而不是链式查找
2.因为只是把父类当做普通的方法执行,所以父类原型上的公有属性方法无法被继承过来

	*/
	/* function A() {
		this.x = 100;
	}
	A.prototype.getX = function getX() {
		console.log(this.x);
	};

	function B() {
		//CALL继承
		A.call(this);  //=>this.x = 100;  b.x=100;
		this.y = 200;
	}
	B.prototype.getY = function getY() {
		console.log(this.y);
	};
	let b = new B;
	console.log(b); */

三、寄生组合继承

寄生组合继承:CALL继承+变异版的原型继承共同完成的

  • CALL继承实现:私有到私有

  • 原型继承实现:公有到公有

    */
    /* function A() {
    	this.x = 100;
    }
    A.prototype.getX = function getX() {
    	console.log(this.x);
    };
    
    function B() {
    	A.call(this);
    	this.y = 200;
    }
    //=>Object.create(OBJ) 创建一个空对象,让其__proto__指向OBJ(把OBJ作为空对象的原型)
    B.prototype = Object.create(A.prototype);
    B.prototype.constructor = B;
    B.prototype.getY = function getY() {
    	console.log(this.y);
    };
    let b = new B;
    console.log(b); */
    

四、ES6 class继承

        class A {
			constructor() {
				this.x = 100;
			}
			getX() {
				console.log(this.x);
			}
		}
		//=>extends继承和寄生组合继承基本类似
		class B extends A {
			constructor() {
				super(100); //=>一但使用extends实现继承,只要自己写了constructor,就必须写super  <=> A.call(this,100)
				this.y = 200;
			}
			getY() {
				console.log(this.y);
			}
		}
		let b = new B; */

		/*
		 * ES6创建类用class 
		 */
		/* class A {
			constructor() {
				this.x = 1000;
			}
			//=>这样和构造函数中的this.xxx=xxx没啥区别,设置的是私有属性(ES7)
			num = 100;
			//=>设置到A.prototype上的方法
			getX() {
				console.log(this.x);
			}
			//=>把A当做普通对象设置的属性和方法
			static n = 200;
			static getN() {}
		}
		console.log(new A); */

真实项目中使用继承的地方
1.REACT创建类组件
2.自己写插件或者类库的时候

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值