JavaScript原型与原型链

时间:2022-07-28 14:39:14

什么是原型?

原型是js中非常特殊一个对象,当一个函数创建之后,会随之就产生一个原型对象,当通过这个函数的构造函数创建一个具体的对象之后,在这个具体的对象中就会有一个属性指向原型。

下面我们先来一段代码演示下用Prototype原型来创建对象的过程:
//创建一个Person对象,第一种状态
function Person(){

}
//给对象赋值,使用原型来给对象赋值,属性和方法都放在了该对象的原型中,外界无法访问。第二种状态
Person.prototype.id=00;
Person.prototype.name="liyanan";
Person.prototype.age=13;
Person.prototype.sex="女";
Person.prototype.say=function(){
console.log("my id is :"+this.id+",name is :"+this.name+",age is :"+this.age+",sex is :"+this.sex);
}

//创建一个Person对象,第三种状态
var p1=new Person();
p1.say();//返回my id is :00,name is :liyanan,age is :13,sex is :女

//创建一个新的Person对象,并且在自己的内部赋值,第四种状态
var p2=new Person();
p2.id=01;
p2.name="lh";
p2.age=13;

p2.say();//返回my id is :01,name is :lh,age is :13,sex is :女

原型的内存模型图如下:

JavaScript原型与原型链
JavaScript原型与原型链
JavaScript原型与原型链
JavaScript原型与原型链

原型的重写:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function Person() {

}

var p1 = new Person();

Person.prototype.sayHello = function() {
console.log("我的名字是:"+this.name+",我今年"+this.age+"岁了");
}

p1.sayHello();

Person.prototype = {
constructor:Person,//手动指向Person
name : "liyanan",
age : 13,
say : function() {
console.log("我的名字是:"+this.name+",我今年"+this.age+"岁了");
}
}

var p2 = new Person();
console.log(p2.name);//liyanan
p2.name = "lyn";
p2.age = 15;
console.log(p2.name);//lyn
p1.sayHello();//此时找不到name和age,但是代码正确
p2.say();//正确

// p1.say();//错误,因为原型重写了
// p2.sayHello();//错误
</script>
</head>
<body>
</body>
</html>
此时的内存模块图:

JavaScript原型与原型链