JavaScript原型

发布日期：2018-09-24 作者：atguigu 1403人浏览

一、引入：为多个对象统一添加属性

首先看下面一段程序

function Person(perName,perAge){

this.perName = perName;

this.perAge = perAge;

this.toString = function(){

return "PersonName="+this.perName+" PersonAge="+this.perAge;

};

}

var per01 = new Person("Tom", 20);

var per02 = new Person("Jerry", 25);

console.log(per01.toString());

console.log(per02.toString());

执行结果：

PersonName=Tom PersonAge=20

PersonName=Jerry PersonAge=25

在这段程序中声明了一个构造器函数Person，使用这个构造器函数创建了两个对象，并在控制台中进行了显示。

现在如果我们需要给每个Person对象都添加一个gender属性，最直接的做法可能是这样：

function Person(perName,perAge,gender){

this.perName = perName;

this.perAge = perAge;

this.gender = gender;

this.toString = function(){

return "PersonName="+this.perName+" PersonAge="+this.perAge+" PersonGender="+this.gender;

};

}

var per01 = new Person("Bob", 20, "male");

var per02 = new Person("Kate", 25, "female");

console.log(per01.toString());

console.log(per02.toString());

执行结果：

PersonName=Bob PersonAge=20 PersonGender=male

PersonName=Kate PersonAge=25 PersonGender=female

可是这样做有一个问题：如果Person这个构造器函数不是我们创建的，我们也不能修改它，还能否添加属性呢？

当然可以，使用JavaScript的原型机制就可以做到。

本教程由尚硅谷教育大数据研究院出品，如需转载请注明来源，欢迎大家关注尚硅谷公众号（atguigu）了解更多。