JavaScript类继承

和其他功能一样,ECMAScript 实现继承的方式不止一种。这是因为 JavaScript 中的继承机制并不是明确规定的,而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。作为开发者,你有权决定最适用的继承方式

创建的子类将继承超类的所有属性和方法,包括构造函数及方法的实现。记住,所有属性和方法都是公用的,因此子类可直接访问这些方法。子类还可添加超类中没有的新属性和方法,也可以覆盖超类的属性和方法。

继承的方式:

一、对象冒充方式方式一

       /*被继承类*/
	function Animal_1(name) {
		this.name = name;
		this.printName = function () {
			console.log(this.name);
		}
	}
	function Person_1(name,age) {
		this.method1 = Animal_1;
		this.method1(name);
		this.age = age;
		this.printAge = function () {
			console.log(this.age);
		}
	}
	var o1 = new Person_1("ysw",18);
	var o2 = new Animal_1("ysw");
	console.log(o1);
	console.log(o2);
	console.log(o1 instanceof Animal_1);
	console.log(o1 instanceof Person_1);
	console.log(o2 instanceof Animal_1);
	console.log(o2 instanceof Person_1);

二、对象冒充方式方式二

利用call方法和apply方法

	function Animal_2(name) {
		this.name = name;
		this.printName = function () {
			console.log(this.name);
		}
	}
	function Person_2(name,age) {
		Animal_2.call(this,name);
		// Animal_2.apply(this,new Array(name));
		this.age = age;
		this.printAge = function () {
			console.log(this.age);
		}
	}
	o1 = new Person_2("ysw",18);
	o2 = new Animal_2("ysw");
	console.log(o1);
	console.log(o2);
	console.log(o1 instanceof Animal_2);
	console.log(o1 instanceof Person_2);
	console.log(o2 instanceof Animal_2);
	console.log(o2 instanceof Person_2);

三、原型链方式

        /*被继承类*/
	function Animal_3() {
	}
	Animal_3.prototype.name = "ysw";
	Animal_3.prototype.printName = function () {
		console.log(this.name);
	};
	function Person_3() {
	}
	Person_3.prototype = new Animal_3();
	Person_3.prototype.age = 18;
	Person_3.prototype.printAge = function () {
		console.log(this.age);
	};
	o1 = new Person_3();
	o2 = new Animal_3();
	console.log(o1);
	console.log(o2);
	console.log(o1 instanceof Animal_3);
	console.log(o1 instanceof Person_3);
	console.log(o2 instanceof Animal_3);
	console.log(o2 instanceof Person_3);

四、混合方式

        /*被继承类*/
	function Animal_4(name) {
		this.name = name;
	}
	Animal_4.prototype.printName = function () {
		console.log(this.name);
	};
	function Person_4(name,age) {
		Animal_4.call(this,name);
		this.age = age;
	}
	Person_4.prototype = new Animal_4();
	Person_4.prototype.printAge = function () {
		console.log(this.age);
	};
	o1 = new Person_4("晏沈威",22);
	o2 = new Animal_4("晏沈威");
	console.log(o1);
	console.log(o2);
	console.log(o1 instanceof Animal_4);
	console.log(o1 instanceof Person_4);
	console.log(o2 instanceof Animal_4);
	console.log(o2 instanceof Person_4);

五、ES6语法 class extends继承

        /*被继承类*/
	class Animal_5 {
		constructor(name){
			this.name = name;
		}
		printName(){
			console.log(this.name);
		}
	}
	class Person_5 extends Animal_5{
		constructor(name,age){
			super(name);
			this.age = age;
		}
		printAge() {
			console.log(this.age);
		};
	}
	o1 = new Person_5("晏沈威",22);
	o2 = new Animal_5("晏沈威");
	console.log(o1);
	console.log(o2);
	console.log(o1 instanceof Animal_5);
	console.log(o1 instanceof Person_5);
	console.log(o2 instanceof Animal_5);
	console.log(o2 instanceof Person_5);

转自:JavaScript类继承 - wsyjlly - 博客园

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值