JavaScript——实现伪继承的三种方式

JavaScript提供了三种伪继承的方式，分别是prototype实现伪继承、构造器实现伪继承、call()和apply()实现伪继承，这里介绍一下这三种方法。

1.prototype实现伪继承

JavaScript类的prototype属性代表了该类的原型对象，在默认情况下，JavaScript类的prototype属性值是一个Object类，将JavaScript类的prototype设为父类实例，可实现JavaScript语言的继承。

下面看一段代码：

<script type="text/javascript">
	// 定义一个Person类
	function Person(name, age)
	{
		this.name = name;
		this.age = age;
	}
	// 使用prototype为Person类添加sayHello方法
	Person.prototype.sayHello = function()
	{
		console.log(this.name + "向您打招呼！");
	}
	var per = new Person("Searchin", 22);  
	per.sayHello(); // 输出：Searchin向您打招呼！
	// 定义一个Student类
	function Student(grade){
		 this.grade = grade;
	}
	// 将Student的prototype设为Person对象
	Student.prototype = new Person("未命名" , 0);
	// 使用prototype为Student类添加intro方法
	Student.prototype.intro = function(){  
		console.log("%s是个学生，读%d年级" , this.name, this.grade);
	}
	var stu = new Student(5);
	stu.name = "饭卡丘";//动态增加了一个属性name
	console.log(stu instanceof Student); // 输出true
	console.log(stu instanceof Person); // 输出true
	stu.sayHello(); // 输出：饭卡丘向您打招呼！ 
	stu.intro(); //输出：饭卡丘是个学生，读5年级
</script>

上面程序中定义了一个Person类，然后使用prototype属性为Person类定义了一个sayHello()方法。接下来又定义了一个Student类，并将该类的prototype属性设置为Peroson对象，这就表明Student的原型是Person对象，也就相当于设置Student继承了Person，这样Student就会得到Person类的属性和方法。

2.构造器实现伪继承

先看一段代码：

<script type="text/javascript">
	// 定义一个Person类
	function Person(name, age)
	{
		this.name = name;
		this.age = age;
		// 为Person类定义sayHello方法
		this.sayHello = function()
		{
			console.log(this.name + "向您打招呼！");
		}
	}
	var per = new Person("Searchin", 22);
	per.sayHello(); // 输出：Searchin向您打招呼！
	// 定义Student类
	function Student(name, age, grade)
	{
		// 定义一个实例属性引用Person类
		this.inherit_temp = Person;
		// 调用Person类的构造器
		this.inherit_temp(name, age);
		this.grade = grade;
	}
	// 使用prototype为Student类添加intro方法
	Student.prototype.intro = function(){  
		console.log("%s是个学生，读%d年级" , this.name, this.grade);
	}
	var stu = new Student("饭卡丘", 34, 5);
	console.log(stu instanceof Student); // 输出true
	console.log(stu instanceof Person); // 伪继承，所以输出false
	stu.sayHello(); // 输出：饭卡丘向您打招呼！
	stu.intro(); //输出：饭卡丘是个学生，读5年级
</script>

上面的程序先定义了一个Person类，并为Person类定义了实例属性和方法。接下来程序有定义了一个Student类，Student类将Person直接给Student的inherit_temp属性，并以this为调用者，调用了Person的构造器，这样Person构造器中的this就全部换成了当前的Student，这样就可以将Person类中定义的实例属性、方法都一直到Student类中，即实现伪继承。

3.使用apply或者call实现伪继承

前面实现伪继承的方式的关键在于子类构造器需要以this作为调用者来调用父类构造器，这样父类构造器的this就会变成代表子类，子类就可以得到原父类定义的实例属性和方法，因此这种伪继承完全可以用apply和call来实现。只要在使用apply或call调用时指定this作为调用者就好啦。

下面演示一下：

<script type="text/javascript">
	// 定义一个Person类
	function Person(name, age)
	{
		this.name = name;
		this.age = age;
		// 为Person类定义sayHello方法
		this.sayHello = function()
		{
			console.log(this.name + "向您打招呼！");
		}
	}
	var per = new Person("Searchin", 22);
	per.sayHello(); // 输出：Searchin向您打招呼！
	// 定义Student类
	function Student(name, age, grade)
	{
		Person.call(this, name, age);
//		Person.apply(this, [name, age]);
		this.grade = grade;
	}
	// 使用prototype为Student类添加intro方法
	Student.prototype.intro = function(){  
		console.log("%s是个学生，读%d年级" , this.name, this.grade);
	}
	var stu = new Student("饭卡丘", 34, 5);
	console.log(stu instanceof Student); // 输出true
	console.log(stu instanceof Person); // 伪继承，所以输出false
	stu.sayHello(); // 输出：饭卡丘向您打招呼！
	stu.intro(); //输出：饭卡丘是个学生，读5年级
</script>

上面的程序用this作为调用者调用Person的构造器，这种方式既可以用call实现也可以用apply实现。

好啦，以上就是js中三种实现伪继承的方式，有疑问的话欢迎大家留言评论，大家一起学习呀。

JavaScript——实现伪继承的三种方式

猜你喜欢