夺命雷公狗---javascript NO:28 原型链

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 = ‘123@qq.com';
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 = ‘123@qq.com';
alert(p1.age);
alert(p1.email);
</script>
</body>
</html>

 

posted @ 2015-12-09 10:20  夺命雷公狗  阅读(149)  评论(0)  编辑  收藏  举报