1、js原型讲解
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
/**
* 原型是js中非常特殊一个对象，当一个函数创建之后，会随之就产生一个原型对象
* 当通过这个函数的构造函数创建了一个具体的对象之后，在这个具体的对象中
* 就会有一个属性指向原型
*/
//第一种状态
function Person(){
}
//第二种状态
Person.prototype.name = "Leon";
Person.prototype.age = 23;
Person.prototype.say = function() {
alert(this.name+","+this.age);
}
//第三中状态，创建了一个对象之后会有一个_prop_的属性指向原型
//在使用时如果在对象内部没有找到属性会去原型中找，_prop_属性是隐藏的
var p1 = new Person();
//p1.say();
//以下方法可以检测出p1是否有_prop_指向Person的原型
//alert(Person.prototype.isPrototypeOf(p1));
//第四种状态
var p2 = new Person();
//是在自己的空间中定义了一个属性，不会替换原型中的属性
p2.name = "Ada";
//p2.say();
//p1.say();
// //检测某个对象是否是某个函数的原型
// alert(Person.prototype.isPrototypeOf(p2));
// //检测某个对象的constructor
// alert(p1.constructor==Person);
// //检测某个属性是否是自己的属性
// alert(p1.hasOwnProperty("name"));//false，p1自己的空间中没有值
// alert(p2.hasOwnProperty("name"));//true,p2在自己的空间中设置了name属性
//delete p2.name;
//p2.say();
//alert(p2.hasOwnProperty("name"));//由于已经删除了，所以是false
//检测某个对象在原型或者自己中是否包含有某个属性，通过in检测
//alert("name" in p1);//true
//alert("name" in p2);//true
//alert("address" in p1);//在原型和自己的空间中都没有，false
alert(hasPrototypeProperty(p1,"name"));//true
alert(hasPrototypeProperty(p2,"name"));//false
/**
* 可以通过如下方法检测某个属性是否在原型中存在
*/
function hasPrototypeProperty(obj,prop) {
return ((!obj.hasOwnProperty(prop))&&(prop in obj))
}
</script>
</head>
<body>
</body>
</html>
以下是内存模型图
2、使用json格式创建原型
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
/**
* 原型是js中非常特殊一个对象，当一个函数创建之后，会随之就产生一个原型对象
* 当通过这个函数的构造函数创建了一个具体的对象之后，在这个具体的对象中
* 就会有一个属性指向原型
*/
//第一种状态
function Person(){
}
/**
*使用如下方式来编写代码，当属性和方法特别多时，编写起来不是很方便，可以通过json的格式
* 来编写
*/
// Person.prototype.name = "Leon";
// Person.prototype.age = 23;
// Person.prototype.say = function() {
// alert(this.name+","+this.age);
// }
/**
* 以下方式将会重写原型
* 由于原型重写，而且没有通过Person.prototype来指定
* 此时的constructor不会再指向Person而是指向Object
* 如果constructor真的比较重要，可以在json中说明原型的指向
*/
Person.prototype = {
constructor:Person,//手动指定constructor
name:"Leon",
age:23,
say:function() {
alert(this.name+","+this.age);
}
}
var p1 = new Person();
p1.say();
alert(p1.constructor==Person);
</script>
</head>
<body>
</body>
</html>
3、使用json创建的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
/**
* 原型是js中非常特殊一个对象，当一个函数创建之后，会随之就产生一个原型对象
* 当通过这个函数的构造函数创建了一个具体的对象之后，在这个具体的对象中
* 就会有一个属性指向原型
*/
//第一种状态
function Person(){
}
var p1 = new Person();
Person.prototype.sayHi = function() {
alert(this.name+":hi");
}
/**
*如果把重写放置在new Person之后，注意内存模型,原型重写的问题
*/
Person.prototype = {
constructor:Person,//手动指定constructor
name:"Leon",
age:23,
say:function() {
alert(this.name+","+this.age);
}
}
p1.sayHi();//不会报错，但是没有this.name
var p2 = new Person();
//p2.sayHi();//此时p2没有sayHi,所以就会报错
p2.say();
p1.say(); //此时p1没有say方法,所以就会报错：Uncaught TypeError: undefined is not a function
</script>
</head>
<body>
</body>
</html>
4、原型创建对象所带来的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
/**
*基于原型的创建虽然可以有效的完成封装，但是依然有一些问题
* 1、无法通过构造函数来设置属性值
* 2、当属性中有引用类型变量是，可能存在变量值重复
*/
function Person(){
}
Person.prototype = {
constructor:Person,
name:"Leon",
age:30,
friends:["Ada","Chris"],
say:function() {
alert(this.name+"["+this.friends+"]");
}
}
var p1 = new Person();
p1.name = "John";
p1.say();//john[ada,chris]
//会在原型中找friends,所以Mike是在原型中增加的
p1.friends.push("Mike");//为p1增加了一个朋友
var p2 = new Person();
//此时原型中就多了一个Mike,这就是原型所带来的第二个问题
p2.say();//leon ada chris mike
</script>
</head>
<body>
</body>
</html>
5、通过组合构造函数和原型来实现对象的创建，来解决原型所带来的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
/**
* 为了解决原型所带来的问题，此处需要通过组合构造函数和原型来实现对象的创建
* 将属性在构造函数中定义，将方法在原型中定义
* 这种有效集合了两者的优点，是目前最为常用的一种方式
*/
function Person(name,age,friends){
//属性在构造函数中定义
this.name = name;
this.age = age;
this.friends = friends;
}
Person.prototype = {
constructor:Person,
//方法在原型中定义
say:function() {
alert(this.name+"["+this.friends+"]");
}
}
//此时所以的属性都是保存在自己的空间中的
var p1 = new Person("Leon",23,["Ada","Chris"]);
p1.name = "John";
p1.friends.push("Mike");//为p1增加了一个朋友
p1.say();
var p2 = new Person("Ada",33,["Leon"]);
p2.say();//leon
</script>
</head>
<body>
</body>
</html>
6、动态页面原型
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
/**
* 为了让定义的方式更加符合java的需求，就把定义方法的原型代码放置到Person这个构造函数中
*/
function Person(name,age,friends){
//属性在构造函数中定义
this.name = name;
this.age = age;
this.friends = friends;
//不能使用重写的方式定义
/*Person.prototype = {
constructor:Person,
//方法在原型中定义
say:function() {
alert(this.name+"["+this.friends+"]");
}
}*/
/**
* 判断Person.prototype.say是否存在，如果不存在就表示需要创建
* 当存在之后就不会在创建了
*/
if(!Person.prototype.say) {
Person.prototype.say = function() {
alert(this.name+"["+this.friends+"]");
}
}
}
//此时所以的属性都是保存在自己的空间中的
var p1 = new Person("Leon",23,["Ada","Chris"]);
p1.name = "John";
p1.friends.push("Mike");//为p1增加了一个朋友
p1.say();
var p2 = new Person("Ada",33,["Leon"]);
p2.say();//leon
</script>
</head>
<body>
</body>
</html>
相关推荐
**标题详解：**"Prototype-v1.6.0一个javascript库" Prototype是一个广泛使用的JavaScript库，它的主要目标是简化JavaScript的开发，提供了一系列强大的工具，让JavaScript编程更加高效和便捷。这里的"v1.6.0"指的...
三、Prototype-160-API文档详解 这个压缩包中包含的"Prototype-160-API"文档很可能是Prototype库1.6.0版本的API参考手册，它详细列出了Prototype库的所有方法、属性和类。通过阅读这份文档，开发者可以了解到以下...
《Prototype JavaScript 框架详解：深入学习与实践》 Prototype.js 是一款广泛使用的JavaScript库，它极大地扩展了JavaScript的基本功能，提供了丰富的DOM操作、事件处理、Ajax交互以及对象扩展等工具，使得...
《Prototype JavaScript 框架详解：以 prototype-1.6.0.3 版本为例》 Prototype 是一个广泛使用的JavaScript库，它为浏览器环境提供了许多实用的功能，旨在简化JavaScript编程，提高开发效率。在本文中，我们将深入...
"Prototype 1.4.0" 是一个JavaScript库，它为JavaScript编程提供了许多实用功能，大大简化了DOM操作，事件处理以及对象扩展等任务。这个压缩包“prototype-1.4.0.rar”包含了该库的各个组成部分和相关文档，为开发者...
**Prototype JS 框架详解** Prototype JS 是一个强大的JavaScript库，它为Web开发提供了丰富的功能，提高了开发效率。这个框架的设计目标是简化DOM操作，提供面向对象编程的支持，并引入了一些实用的函数式编程特性...
**JavaScript原型(Prototype)库详解** JavaScript是一种动态类型的编程语言，其灵活性和强大的对象操作能力使其在Web开发中占据重要地位。"Prototype.js"是一个针对JavaScript的开源库，旨在增强和扩展JavaScript的...
**JavaScript原型与Prototype框架详解** 在JavaScript编程中，原型（Prototype）是理解对象继承机制的关键。原型模式是一种设计模式，它允许我们通过扩展一个现有对象来创建新对象，而不是从头开始创建。JavaScript...
**描述:** prototype.js 是一个JavaScript库，主要目的是为了简化JavaScript的开发，提升开发效率。它通过扩展JavaScript的基本对象和类型，提供了丰富的功能，包括类式继承、面向对象编程的支持以及一些实用的DOM...
《井字游戏JavaScript实现详解》 井字游戏（Tic-Tac-Toe）是一种简单而经典的两人对战游戏，玩家通常用X和O代表各自的棋子，在3x3的格子上交替放置，目标是先形成一行、一列或一条对角线上的三个相同棋子。在"tic-...
《Prototype.js 1.6：JavaScript 动态对象增强库的深度解析》 Prototype.js 是一个广泛使用的 JavaScript 库，它为浏览器环境提供了许多实用的功能，尤其是在对象操作和事件处理方面。1.6 版本是该库的一个重要里程...
**《prototype.js中文手册》详解** Prototype.js 是一个开源JavaScript库，由Sam Stephenson于2005年创建，主要用于简化DOM（文档对象模型）操作，增强JavaScript的面向对象编程能力，以及提供实用的函数扩展。它在...
**prototype.js 文件详解** 在JavaScript中，`prototype`是一个核心概念，它关乎对象的继承机制。`prototype.js`是一个开源库，旨在扩展JavaScript的基础功能，尤其是面向对象编程的支持。这个库由Sam Stephenson...
**Prototype.js 1.6 知识点详解** Prototype.js 是一个开源的JavaScript库，它扩展了JavaScript语言，为开发者提供了许多便利的功能，特别是在对象操作、DOM操作和事件处理方面。1.6版本是该库的一个重要里程碑，...
### JS：prototype用法详解 #### 一、概念解析与基本使用 `prototype`是JavaScript中一个非常重要的概念，尤其自IE4及其后续版本引入以来，成为开发人员扩展内置对象功能的强大工具。`prototype`主要服务于面向...
《prototype.js框架详解》 Prototype.js 是一个广泛使用的JavaScript库，它为JavaScript语言引入了许多实用的功能，极大地简化了JavaScript的开发工作。这个框架的核心在于它提供了面向对象编程的支持，以及一系列...
【HTML游戏原型开发详解】 "Coursework-prototype-game"是一个基于HTML的游戏原型，它展示了学习者在课程中应用HTML技术创建交互式游戏的初步成果。HTML（HyperText Markup Language）是构建网页的基础语言，用于...
JavaScript中的`prototype`属性是面向对象编程的关键特性之一，它关联了函数（特别是构造函数）与实例之间的继承关系。每个函数都有一个`prototype`属性，这个属性是一个对象，包含了所有实例共享的方法和属性。当...
Prototype JavaScript 框架是早期Web开发中广泛使用的库，特别是在AJAX应用中。这个框架由Sam Stephenson创建...而`prototype-1.6.0.3.js`文件则是实际的库文件，包含所有Prototype的功能实现，可以直接在项目中引用。