1、原型对象
在JavaScript中，每个构造器在加载后都会自动生成一个对象，我们把这个对象就称之为原型对象。
2、构造器与原型对象的关系
Person构造器与Person原型对象在内存中表现为相互独立，互不影响。但是在Person构造器中存在一个prototype属性指向Person原型对象，同时在Person原型对象中也存在一个属性指向Person构造器。
3、原型对象的作用
当我们在Person构造器的实例对象中引用一个不存在的属性或方法，系统会自动到Person构造器的原型对象中去寻找该属性。
4、如何证明prototype与constructor属性是互相指向关系
<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
</head>
<body>
<script>
//定义一个Preson构造器
function Preson(){}
//通过person构造器实例化p1对象
var p1 = new Preson();
alert(p1.constructor.prototype.constructor.prototype.constructor);
</script>
</body>
</html>
5、原型对象的实际应用
在实际项目开发中，我们经常会使用别人编写的一些现成的框架或对象，如果我们发现其不存在某些属性，那么如何解决呢？
答：可以使用原型对象扩展属性
1）为原型对象添加属性
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
</head>
<body>
<script>
//定义一个Preson构造器
function Preson(){}
//通过person构造器实例化p1对象
var p1 = new Preson();
p1.name = ‘lisi‘;
p1.age = 22;
Preson.prototype.email = ‘[email protected]‘;
alert(p1.email); //p1对象访问了一个不存在的email属性
</script>
</body>
</html>
2）为原型对象添加成员方法
<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
</head>
<body>
<script>
//定义一个Preson构造器
function Person(){}
//通过person构造器实例化p1对象
var p1 = new Person();
p1.name = ‘lisi‘;
p1.age = 22;
//为Person原型对象定义speak成员方法
Person.prototype.speak = function(){
alert(this.name+’—-‘+this.age);
}
p1.speak(); //调用p1对象的不存在的speak成员方法
</script>
</body>
</html>
6、探究原型对象从何而来
原型对象在创建过程中，会自动执行以下代码：
构造器.prototype = new Object();
说明：当我们通过Person构造器的实例化对象p1访问一个不存在的属性或方法时，系统会自动到Person构造器的原型对象中去寻找，又由于所有的原型对象都是Object类的实例，原型对象会自动继承Object类中的所有属性和方法，我们可以得出结论：
p1对象会自动继承Object构造器中的所有属性和方法。
p1.属性à原型对象.属性 = new Object();所以可以得出
p1对象会自动继承Object构造器中的所有属性和方法。
我们把这种继承关系就称之为：原型继承
证明：
<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
</head>
<body>
<script>
//定义一个Preson构造器
function Person(){}
//通过person构造器实例化p1对象
var p1 = new Person();
p1.name = ‘lisi‘;
p1.age = 22;
alert(p1.hasOwnProperty(‘name’));
</script>
</body>
</html>
7、原型链
当我们访问一个不存在的属性或方法时，系统会向上一级构造器的原型对象中去寻找，如找不到，则继续向上一级原型对象中去寻找，我们把这种链式查询关系，就称之为原型链。
证明：
<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
</head>
<body>
<script>
//定义一个Preson构造器
function Person(){}
//通过person构造器实例化p1对象
var p1 = new Person();
p1.name = ‘lisi‘;
//为person原型对象定义一个age属性
Person.prototype.age = 23;
//为obj原型对象定义一个email属性
Object.prototype.email = ‘[email protected]‘;
alert(p1.age);
alert(p1.email);
</script>
</body>
</html>
时间： 2024-08-10 15:03:58