二、js的原型
1、原型的概念
原型是构造函数在js代码编译阶段，由系统为我们创建出来的一个对象；原型原型可以给系统构造函
数添加相关的方法和属性，这样所有该类型的对象就可以调用这些自定义的方法和属性，也可以用来再创
建自定义对象时，把共有的属性和方法挂载在原型上，已达到节约内存的目的
例如给系统构造函数（数组）添加自定义方法，js代码如下：
<script type="text/javascript">
Array.prototype.sumArr=function(){
var sum=0;
for(var index=0;index<this.length ;index++){
sum+=this[index];
}
return sum;
}
var arr=[1,2,3,4];
var add=arr.sumArr();
console.log(add);
</script>
2、使用原型创建对象
<script type="text/javascript">
//使用原型的形式创建对象，是基于构造函数的
function CreatePerson(name,age){
//在构造函数中添加实例属性，实例方法
//这些实例属性和方法是各个对象之间不同属性方法
this.name=name;
this.age=age;
};
//在函数外部添加原型方法属性
CreatePerson.prototype.sayHi=function(){
alert('hello'+this.name);
};
//注意：一般情况下 我们把属性设置为实例的 把方法设置为原型的
var per1=new CreatePerson('xiaoQuan',18);
console.log(per1);
</script>
3、原型对象与in操作符
in操作符除了在for-in循环中使用外，还可以单独使用，在单独使用时，in操作符用来判断该对象是否
能访问指定的属性、方法，返回值是个布尔类型的值，若该对象能访问指定的属性或方法则返回的是true,
否则返回的是false。
<script type="text/javascript">
function CreatePerson(name,age){
this.name=name;
this.age=age;
};
CreatePerson.prototype.sayHi=function(){
alert('hello'+this.name);
};
var per1=new CreatePerson('xiaoQuan',18);
//判断per1对象能否访问到sayHi这种方法
val bol = 'sayHi' in per1;
console.log(bol);//true
</script>
4、原型对象的hasOwnProperty方法
该方法是用来判断指定的属性或方法是否是是属于实例的，返回值也是一个布尔类型的值，若指定的属
性或方法是属于实例的返回的是true,否则返回的是false。
<script type="text/javascript">
function CreatePerson(name,age){
this.name=name;
this.age=age;
};
CreatePerson.prototype.sayHi=function(){
alert('hello'+this.name);
};
var per1=new CreatePerson('xiaoQuan',18);
//判断sayHi方法是否属于实例中的方法
val bol1 = per1.hasOwnProperty('sayHi');
console.log(bol1);//false
//判断name属性是否属于实例中的属性
var bol2=per1.hasOwnProperty('name');
console.log(bol2);//true
</script>
自定义一个方法用来判断指定的方法和属性是否属于原型中的
第一种方法：
<script type="text/javascript">
function CreatePerson(name,age){
this.name=name;
this.age=age;
};
CreatePerson.prototype.sayHi=function(){
alert('hello'+this.name);
};
var per1=new CreatePerson('xiaoQuan',18);
Object.prototype.isPrototype = function (attr){
if (attr in this) {
if (this.hasOwnProperty(attr)) {
return false;
} else {
return true;
}
} else {
return null;
}
};
var bol = per1.isPrototype('gender');
console.log(bol);//null
</script>
第二种方法：
<script type="text/javascript">
function CreatePerson(name,age){
this.name=name;
this.age=age;
};
CreatePerson.prototype.sayHi=function(){
alert('hello'+this.name);
};
var per1=new CreatePerson('xiaoQuan',18);
Object.prototype.isPrototype = function (attr){
return !this.hasOwnProperty(attr)&&(attr in this);
};
var bol = per1.isPrototype('gender');
console.log(bol);//null
</script>
5、解决字面量对象的归属问题
<script type="text/javascript">
function CreatePerson() = {};
CreatePerson.prototype={
//constructor属性将CreatePerson的prototype指向CreatePerson;
constructor:CreatePerson,
name:'xiaoXuan',
age:18
};
var per=new CreatePerson();
</script>
网友评论