您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
Ready 发布于2014年08月06日 04:04

原创 JavaScript prototype 属性详解

2227 次浏览 读完需要≈ 12 分钟

内容目录

prototype属性用于返回对象的类的原型。

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,该属性保存着函数的原型对象。prototype属性使我们有能力向原型对象添加属性和方法,并且这些属性和方法是这一类对象所共享的。

JavaScript内置对象prototype属性是只读的,其本身就是一个对象,我们只能够对该对象的属性和方法进行操作,比如添加属性或方法、删除属性和方法,而不能使用另一个对象来替换该对象,哪怕是另外一个原型对象。(这里说的仅仅是JavaScript的内置对象,并不包括自定义的对象)。

所有主流浏览器均支持该属性

语法

object.prototype

这里的object指的是创建对象实例的类,在JavaScript中就是函数本身。

返回值

返回函数(类)的原型对象。

由于所有函数的默认原型都是Object的实例,因此所有的对象都具有Object的属性和方法,例如:toString()valueOf()等。

示例&说明

众所周知,JavaScript中的类都是以函数的形式进行声明的。因为JavaScript中没有其他语言中类似class ClassName{ }形式的类声明,而是把函数当作类来使用,函数名就是类名,函数本身就是类的构造函数,并且可以使用new关键字来创建一个实例对象。

通过这种形式创建的实例对象,它们的属性和方法都是独立存在的,对一个对象的属性和方法进行添加/删除,并不会影响到另一个"同类"对象。

下面我们来看一个具体的例子。

// 在JavaScript中类都是以函数的形式来定义的
function Student(name, age){
	// 类的属性
	this.name = name;
	this.age = age;

	// 类的方法
	this.sayHi = function(){
		document.writeln("大家好,我叫" + this.name + ",今年" + this.age + "岁");
	};
}

// 创建一个Student对象:小明
var xm = new Student("小明", 18);
xm.sayHi(); // 大家好,我叫小明,今年18岁

// 创建一个Student对象:小红
var xh = new Student("小红", 16);
xh.sayHi(); // 大家好,我叫小红,今年16岁

现在我们为对象"小明"添加一个考试的方法exam(),"小红"不会受到影响。

// 为小明添加一个考试的方法
xm.exam = function(){
	document.writeln(this.name + "在考试...");
};

// 调用小明的exam()
xm.exam();
// 调用小红的exam()
// xh.exam(); //将会报错,因为"小红"没有exam()方法

小明和小红的sayHi()方法也不是同一个方法,而是两个毫不相关的方法。我们删除小红的sayHi()方法,也不会对小明产生影响。

// 小红与小明的sayHi()方法不是同一个方法
document.writeln(xm.sayHi == xh.sayHi); // false

// 删除小红的sayHi()方法
delete xh.sayHi;

xm.sayHi(); // 正常输出:大家好,我叫小明,今年18岁

// xh.sayHi(); //将会报错,因为该方法已经被删除

运行代码

同样的,Student的这两个实例对象的属性也是独立存在的。属性独立存在还稍微可以理解,但是连方法都是独立存在的,这样的设计就造成了极大的资源浪费。至于属性,有些时候我们也是希望能够在两个对象内部共享一些属性的。于是JavaScript的设计者布兰登·艾奇(Brendan Eich)就想到在函数中添加一个prototype属性,这个属性用来保存一些供所有"同类"实例对象共享使用的属性和方法。

当我们访问一个实例对象的属性和方法时,JavaScript先查找对象本身是否存在这些属性或方法,如果有就直接返回;如果不具备,就查询创建该对象的类(即函数)的prototype属性中是否存在同名的属性或方法,如果有就返回。由于prototype属性本身就是一个对象(一般称之为原型对象),这看起来就有点像"继承":实例对象"继承"了prototype对象的属性和方法。

现在,我们重新改造Student"类",将sayHi()方法放入prototype属性中,并添加一个共享的count属性,用于保存通过该函数创建的对象的个数。

// 在JavaScript中类都是以函数的形式来定义的
function Student(name, age){
	// 类的属性
	this.name = name;
	this.age = age;

	// prototype上的count属性
	// 如果已存在该属性就+1,没有就声明并赋值为1
	Student.prototype.count && Student.prototype.count++ || ( Student.prototype.count = 1 );

	// prototype上的sayHi()方法
	Student.prototype.sayHi = function(){
		document.writeln("大家好,我叫" + this.name + ",今年" + this.age + "岁");
	};
}

// 创建一个Student对象:小明
var xm = new Student("小明", 18);
xm.sayHi(); // 大家好,我叫小明,今年18岁

// 创建一个Student对象:小红
var xh = new Student("小红", 16);
xh.sayHi(); // 大家好,我叫小红,今年16岁

// 小红与小明的sayHi方法是同一个方法
document.writeln(xm.sayHi == xh.sayHi); // true

// 两个对象的count属性输出一致
document.writeln("xm.count = " + xm.count + "  /  xh.count = " + xh.count); // xm.count = 2 / xh.count = 2

这个时候,我们删除prototype属性上的属性或方法,因为这些属性或方法是共享的,因此所有的实例对象都会受到影响。

// 删除prototype属性上的sayHi()方法
delete Student.prototype.sayHi;

// 将会报错,小明和小红的sayHi()方法均已丢失
// xm.sayHi();
// xh.sayHi();

// 属性也是如此,此处不再举例

此外,我们还可以直接更改自定义类(函数)的prototype属性,我们可以将上面的Student进行如下改造。

//在JavaScript中类都是以函数的形式来定义的
function Student(name, age){
	// 类的属性
	this.name = name;
	this.age = age;

	Student.prototype.count++;
}

// 直接修改prototype属性
Student.prototype = {
	count : 0
	,sayHi : function(){
		document.writeln("大家好,我叫" + this.name + ",今年" + this.age + "岁");			
	}
};

var xm = new Student("小明", 12);
xm.sayHi();
document.writeln(xm.count); // 1

// 无法通过实例对象直接为prototype上的属性赋值
// 这样做只是在当前实例对象上添加了一个同名的属性,并屏蔽了对prototype上同名属性的访问
// 该对象之后访问的count属性属于对象自身的,而不是prototype属性上的
xm.count = xm.count + 1;
document.writeln(xm.count); // 2
document.writeln(Student.prototype.count); // 1

var xh = new Student("小红", 15);
document.writeln(xh.count); // 2

此外,我们也可以通过JavaScript内置对象的prototype属性,为内置对象添加一些属性或方法。

// 为JavaScript内置对象String添加sayHi()方法
String.prototype.sayHi = function(){
	document.writeln("你好," + this);
};

var str = "张三";
str.sayHi(); // 你好,张三
  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论