原型
原型和原型链
<meta charset="UTF-8">
<title>Title</title>
<script>
//构造函数
function Person(name,age){
this.name=name;
this.age=age;
}
//通过原型来添加方法,解决数据共享,节省内存空间
Person.prototype.sayHi=function(){
console.log("您好!");
};
var p1=new Person("小明",20); //实例对象
var p2=new Person("小红",19); //实例对象
console.log(p1.sayHi==p2.sayHi);
//console.dir()可以显示一个对象的所有属性和方法
console.dir(p1);
console.dir(p2);
console.dir(Person);
输出结果:
从输出结果可以看出:
1、写在构造函数中的属性
实例对象中有两个属性,name和age,是通过构造函数来获取的。
构造函数中并没有name和age这两个属性。
2、原型:__proto__或者prototype,都是原型对象。
实例对象中有个属性,__proto__,也是对象,叫原型,但不是标准的属性,是浏览器使用的,在IE8中不支持。
构造函数中有一个属性,prototype,也是对象,叫原型,是标准属性,程序员使用的。
3、原型的作用:共享数据,节省内存空间,因此,不需要共享的数据就写在构造函数里,需要共享的数据就写在原型中。
构造函数、实例对象以及原型之间的关系
1、构造函数可以实例化对象。
2、构造函数中有一个属性叫prototype,是构造函数的原型对象。
3、构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数。
4、实例对象的原型对象(__proto__)指向的是该构造函数的原型对象(prototype)。
5、构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的。
6、实例对象的原型对象(__proto__)和构造函数的原型对象(prototype)指向是相同的
即:console.log(实例对象.__proto__ == 构造函数.prototype); 输出结果为:true。
7、实例对象中的__proto__,是原型,但不是标准的属性,是浏览器使用的,在IE8中不支持。
8、构造函数中的prototype,是原型,是标准属性,程序员使用的。
9、原型链:是一种关系,实例对象和原型对象之间的关系,这种关系是通过原型(__proto__)来联系的。
常规原型对象添加方法的写法
//构造函数
function Student(name,age,sex,score){
this.name=name;
this.age=age;
this.sex=sex;
this.score=score;
}
//原型对象
Student.prototype.height = "180cm";
Student.prototype.weight = "50kg";
Student.prototype.study = function(){
console.log("学无止境");
};
Student.prototype.play = function(){
console.log("打乒乓球");
};
Student.prototype.eat = function(){
console.log("天天在食堂吃饭");
};
//实例化对象,并初始化
var student = new Student("小明",22,"男","100分");
console.dir(student);
console.dir(Student);
简单的原型写法:
这种写法需要手动添加构造器的指向,否则,实例对象和构造函数中都没有constructor属性
//构造函数
function Student(name,age,sex,score){
this.name=name;
this.age=age;
this.sex=sex;
this.score=score;
}
//简单的原型写法
Student.prototype = {
//需要手动修改构造器的指向
constructor:Student,
height : "180cm",
weight : "50kg",
study : function(){
console.log("学无止境");
},
play : function(){
console.log("打乒乓球");
},
eat : function(){
console.log("天天在食堂吃饭");
}
};
//实例化对象,并初始化
var student = new Student("小明",22,"男","100分");
student.study();
console.dir(student);
console.dir(Student);
原型中的方法可以相互访问调用
//构造函数
function Student(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
}
//原型对象添加方法
Student.prototype.study = function(){
console.log("学无止境");
this.play();
};
Student.prototype.play = function(){
console.log("打乒乓球");
this.eat();
};
Student.prototype.eat = function(){
console.log("天天在食堂吃饭");
};
//实例化对象,并初始化
var student = new Student("小明",22,"男");
student.study();
输出结果:
实例对象中使用的属性和方法,先在实例对象中查找,找到了就直接使用,找不到的话,就去实例对象的__proto__属性指向的原型对象prototype中查找,找到了就使用,找不到则报错。
//构造函数
function Student(name,age,sex,score){
this.name=name;
this.age=age;
this.sex=sex;
this.score=score;
}
//原型对象
Student.prototype.weight = "50kg";
Student.prototype.sex= "女";
Student.prototype.study = function(){
console.log("学无止境");
};
//实例化对象,并初始化
var student = new Student("小明",22,"男","100分");
console.log(student.sex);
console.log(student.weight);
为内置对象的原型对象添加方法
例如:为String的原型对象添加一个倒序字符串的方法
String.prototype.myReverse = function(){
var string=[];
for(var i=this.length-1; i>=0; i--){
string[string.length] = this[i];
}
return string.join("");
};
var str="abcdefg";
var s1=str.myReverse();
console.log(s1);
例如:为Array的原型对象添加一个从小到大排序的方法
//从小到大排序
Array.prototype.mySort = function(){
for(var i=0;i<this.length-1;i++){
for(var j=0;j<this.length-1-i;j++)
if(this[j]>this[j+1]){
var temp=this[j];
this[j]=this[j+1];
this[j+1]=temp;
}
}
};
var arr=[12,5,8,3,9,10,16,11,22,17];
arr.mySort();
console.log(arr);
var arr1=["Tom","Jack","An"];
arr1.mySort();
console.log(arr1);
输出结果:
上一篇: div移动 输入框不能输入的问题_javascript技巧
下一篇: 原型与原型链