扩展，继承，prototype

最新推荐文章于 2021-02-26 22:48:47 发布

原创最新推荐文章于 2021-02-26 22:48:47 发布 · 407 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#prototype #继承 #扩展 #js

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了JavaScript中的扩展与继承概念，并通过实例演示了如何使用prototype关键字为已实例化的对象添加新方法和属性，以及如何实现继承。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 什么是扩展？什么是继承？

扩展就是基于已有对象修改对象，使其拥有新的方法和属性。

继承就是使用已有的代码块（用对象封装起来的），为自己用

2. 扩展对象

当一个对象已经实例化之后，如果再对其进行修改，可以使用关键词prototype。prototype对象允许迅速的添加方法和属性，然后就可以对于对象的全部实例。

如果给Person添加一个新的方法sayHello( )。

Person.prototype.sayHello = function () {
	alert( this.name + " says hello!!");
}
person2.sayHello();

body内代码实现：

<input type="botton" value="person1.showInfo()" onclick="person1.showInfo()"/>
<input type="botton" value="person2.showInfo()" onclick="person2.showInfo()"/>
<input type="botton" value="person1.sayHello()" onclick="person1.sayHello()"/>
<input type="botton" value="person2.sayHello()" onclick="person2.sayHello()"/>

1. 继承

继承就是指从一种对象类型创建另一种对象类型，新的对象类型继承老的对象类型的属性和方法，还可以可选的添加自己的属性和方法。

好处：

我们可以通过继承先设计出“通用”的对象类型，然后不断继承，再细化它们来得到更特征的类型。

在JavaScript中模拟实现继承的方式也是使用关键字prototype。

因为Object.prototype可以添加新的方法和属性，所以我们可以把已有的构造函数里的全部方法和属性都添加到新的对象里。

代码部分：

<script>
	function Pet () {
		this.animal = "";
		this.name = "";

		this.setAnimal = function ( newAnimal ) {
			this.animal = newAnimal;
		}

		this.setName = function ( newName ) {
			this.name = newName;
		}

	}

	var myCat = new Pet () ;
	myCat.setAnimal("cat");
	myCat.setName("MiMi");

	alert("myCat's name" + ' is ' + myCat.name );

	function Dog() {
		this.breed = "";

		this.setBreed = function ( newBreed ) {
			this.breed = newBreed;
		}

	}

	//Dog 开始继承 Pet  使用关键字:prototype
	 
	Dog.prototype = new Pet();

	var myDog = new Dog();
	myDog.setName("WangWang");
	myDog.setBreed("Greyhound");

	alert(myDog.name  + ' is a ' + myDog.breed);
</script>

3.1扩展JavaScript内置对象

关键字prototype还可以扩展JavaScript内置的对象。如：可以实现String.prototype.backwards 方法，让它返回字符串的逆序结果。

代码块：

<script>
	String.prototype.backwards = function () {
		var out = '';
		for(var i = this.length-1;i >= 0 ; i-- ) {
			out += this.substr(i, 1);
		}
		return out;
	}
</script>

<script>
	var inString = prompt("Enter your test string:");
	document.write(inString.backwards());//字符串倒序输出
</script>