<html>
<head>
<script type="text/javascript">
//函数的prototype属性
//每一个函数都包含了一个prototype(原型)属性,这个属性构成了javascript面向对象的核心基础
//构造函数:new操作符用来生成一个新的对象.new后面必须要跟上一个函数,也就是我们常说的构造函数.
function Person(name,sex) {
this.name = name;
this.sex = sex;
}
function test1()
{
var per=new Person("latty","male");
alert("name:"+per.name+",_sex:"+per.sex);
}
//工作步骤如下：
//1.开始创建了一个函数(不是方法,只是一个普通的函数),这里this关键字表示调用该方法的对象
//通过对象调用"方法"的时候,this关键字会指向该对象(不使用对象直接调用该函数则this指向整个的script域,或者函数所在的域
//2.我们使用new操作符时,javascript会先创建一个空的对象,然后这个对象被new后面的方法(函数)的this关键字引用!然后在方法中
//通过操作this,就给这个新创建的对象相应的赋予了属性
//prototype(原型)--
//在javascript中,每个对象都有一个prototype属性,这个属性指向了一个prototype对象.
//用new来创建一个对象的过程,当创建了空对象后,new会接着操作刚生成的这个对象的prototype属性.
//每个方法都有一个prototype属性(因为方法本身也是对象),new操作符生成的新对象的prototype属性值和构造方法的prototype属性值是一致的.
//构造方法的prototype属性指向了一个prototype对象,这个prototype对象初始只有一个属性constructor,而这个constructor属性又指向了prototype属性所在的方
//法
//当用构造函数创建一个新的对象时,它会获取构造函数的prototype属性所指向的prototype对象的所有属性.对构造函数对应的prototype对象
//所做的任何操作都会反应到它所生成的对象身上,所有的这些对象共享构造函数对应的prototype对象的属性(包括方法
function test2()
{
Person.prototype.age=12; //为prototype属性对应的prototype对象的属性赋值
Person.prototype.print=function()//添加方法
{
alert(this.name+"_"+this.sex+"_"+this.age);
};
var p1 = new Person("name1","male");
var p2 = new Person("name2","male");
p1.print(); //name1_male_12
p2.print(); //name2_male_12
Person.prototype.age = 18; //改变prototype对象的属性值,注意是操作构造函数的prototype属性
p1.print(); //name1_male_18
p2.print(); //name2_male_18
}
//当我们new了一个对象之后,这个对象就会获得构造函数的prototype属性(包括函数和变量),
//可以认为是构造函数(类)继承了它的prototype属性对应的prototype对象的函数和变量
function test3()
{
Person.prototype.age = 12; //为Person类的prototype属性对应的prototype对象的属性赋值,
//相当于为Person类的父类添加属性
Person.prototype.print = function() { //为Person类的父类添加方法
alert(this.name+"_"+this.sex+"_"+this.age);
};
var p1 = new Person("name1","male"); //p1的age属性继承子Person类的父类(即prototype对象)
var p2 = new Person("name2","male");
p1.print(); //name1_male_12
p2.print(); //name2_male_12
p1.age = 34; //改变p1实例的age属性
p1.print(); //name1_male_34
p2.print(); //name2_male_12
Person.prototype.age = 22; //改变Person类的超类的age属性
p1.print(); //name1_male_34(p1的age属性并没有随着prototype属性的改变而改变)
p2.print(); //name2_male_22(p2的age属性发生了改变)
delete p1.age //删除子类与父类同名的属性，从父类那里继承过来的属性就被暴露出来了！
p1.print(); //name1_male_12！！！！！！！
p2.print(); //name2_male_12
p1.print = function() { //改变p1对象的print方法
alert("i am p1");
}
p1.print(); //i am p1(p1的方法发生了改变)
p2.print(); //name2_male_22(p2的方法并没有改变)
Person.prototype.print = function() { //改变Person超类的print方法
alert("new print method!");
}
p1.print(); //i am p1(p1的print方法仍旧是自己的方法)
p2.print(); //new print method!(p2的print方法已经改变
}
//由上面可以看出prototype属性在javascript中模拟了父类(超类)的角色
//当我们对这些实例对象的属性和方法重新赋值或定义后,那么实例对象的属性或方法就不再指向类的prototype属性中定义的属性和方法
//在javascript中,所有的方法都有一个call方法和apply方法.这两个方法可以模拟对象调用方法.它的第一个参数是对象,后面的
//参数表示对象调用这个方法时的参数
function test4()
{
var o = new Object(); //空对象
alert(o.name + "_" + o.sex); //undefined_undefined
Person.call(o,"sdcyst",1); //相当于调用:o.Person("sdcyst",1)
alert(o.name + "_" + o.sex); //sdcyst_1
Person.apply(o,["name",0]);//apply方法作用同call,不同之处在于传递参数的形式是用数组来传递
alert(o.name + "_" + o.sex); //name_0
//实例变量和实例方法都是通过实例对象加"."操作符然后跟上属性名或方法名来访问的
//这样就可以直接用类名加"."操作符然后跟上属性名或方法名来访问.
}
</script>
</head>
<body>
<input type="button" value="test1" onclick="test1();"/><br/>
<input type="button" value="test2" onclick="test2();"/><br/>
<input type="button" value="test3" onclick="test3();"/><br/>
<input type="button" value="test4" onclick="test4();"/><br/>
</body>
</html>
分享到：
相关推荐
在提供的资源中，《代码之美》PDF文件可能包含了关于编程实践和代码风格的指导，而《Javascript面向对象编程》PPT可能更具体地阐述了JavaScript OOP的细节和示例。学习这些材料将有助于深入理解JavaScript的面向对象...
JavaScript面向对象编程指南
JavaScript作为一门浏览器语言的核心思想；面向对象编程的基础知识及其在... 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性，展示如何构建强健的、可维护的、功能强大的应用程序及程序库
JavaScript是一种广泛...通过深入学习这本《JavaScript面向对象编程指南（第2版）》，开发者不仅能掌握JavaScript的面向对象编程基础，还能了解到实际项目中如何有效地运用这些知识，提升编程技巧和解决问题的能力。
总而言之，学习现代JavaScript面向对象编程，有助于开发者在认识这门语言演化的基础上，运用面向对象的设计和编程模式来构建更加健壮和可维护的JavaScript应用程序。同时，测试和调试是保证代码质量不可或缺的环节，...
JavaScript面向对象编程指南是完整的扫描版...
JavaScript面向对象编程.pdf
下面将详细探讨JavaScript面向对象编程的基本原理、特性以及实际应用。 1. **类与对象** - 在JavaScript中，对象是键值对的集合，可以通过字面量语法或构造函数创建。例如： ```javascript const person = { ...
面向对象编程在JavaScript中的实现主要基于以下三个概念：构造函数、原型和实例化。构造函数是一个特殊类型的函数，用于创建和初始化一个新对象。当你定义一个构造函数时，实际上是在定义一个对象类型。例如： ```...
javascript面向对象编程培训教程PPT
面向对象编程的基础知识及其在JavaScript中的运用；数据类型、操作符以及流程控制语句；函数、闭包、对象和原型等概念，以代码重用为目的的继承模式；BOM、DOM、浏览器事件、AJAX和JSON；如何实现JavaScript中缺失的...
### JavaScript面向对象编程详解 #### 一、引言 JavaScript作为一种广泛使用的脚本语言，在Web开发领域占据着举足轻重的地位。尽管JavaScript本质上是一种基于原型的语言，但它也支持面向对象编程的一些特性，使得...