JS面向对象2

构造函数:
new操作符用来生成一个新的对象.new后面必须要跟上一个函数,也就是我们常说的构造函数.构造函数的工作原理又是怎样的呢?
先看一个例子:

  1. <SPAN style="FONT-SIZE: medium">
  2. function Person(name,sex) {   
  3.     this.name = name;   
  4.     this.sex = sex;   
  5. }   
  6. var per = new Person("sdcyst","male");   
  7. alert("name:"+per.name+"_sex:"+per.sex); //name:sdcyst_sex:male</SPAN>

下面说明一下这个工作的步骤:
开始创建了一个函数(不是方法,只是一个普通的函数),注意用到了this关键字.以前我们提到过this关键字表示调用该方法的对象,也就是说通过对象调用"方法"的时候,this关键字会指向该对象(不使用对象直接调用该函数则this指向整个的script域,或者函数所在的域,在此我们不做详细的讨论).当我们使用new操作符时,javascript会先创建一个空的对象,然后这个对象被new后面的方法(函数)的this关键字引用!然后在方法中通过操作this,就给这个新创建的对象相应的赋予了属性.最后返回这个经过处理的对象.这样上面的例子就很清楚:先创建一个空对象,然后调用Person方法对其进行赋值,最后返回该对象,我们就得到了一个per对象.

prototype(原型)--在这里会反复提到"原型对象"和"原型属性",注意区分这两个概念.在javascript中,每个对象都有一个prototype属性,这个属性指向了一个prototype对象.
上面我们提到了用new来创建一个对象的过程,事实上在这个过程中,当创建了空对象后,new会接着操作刚生成的这个对象的prototype属性.
每个方法都有一个prototype属性(因为方法本身也是对象),new操作符生成的新对象的prototype属性值和构造方法的prototype属性值是一致的.构造方
法的prototype属性指向了一个prototype对象,这个prototype对象初始只有一个属性constructor,而这个constructor属性又指向了prototype属性所在的方
法.

这样,当用构造函数创建一个新的对象时,它会获取构造函数的prototype属性所指向的prototype对象的所有属性.对构造函数对应的prototype对象
所做的任何操作都会反应到它所生成的对象身上,所有的这些对象共享构造函数对应的prototype对象的属性(包括方法).
看个具体的例子吧:

  1. <SPAN style="FONT-SIZE: medium">
  2. function Person(name,sex) {  //构造函数   
  3.     this.name = name;   
  4.     this.sex = sex;   
  5. }   
  6. Person.prototype.age = 12;   //为prototype属性对应的prototype对象的属性赋值   
  7. Person.prototype.print = function() { //添加方法   
  8.     alert(this.name+"_"+this.sex+"_"+this.age);   
  9. };   
  10.   
  11. var p1 = new Person("name1","male");   
  12. var p2 = new Person("name2","male");   
  13. p1.print();  //name1_male_12   
  14. p2.print();  //name2_male_12   
  15.   
  16. Person.prototype.age = 18;  //改变prototype对象的属性值,注意是操作构造函数的prototype属性   
  17. p1.print();  //name1_male_18   
  18. p2.print();  //name2_male_18</SPAN>  

    到目前为止,我们已经模拟出了简单的类的实现,我们有了构造函数,有了类属性,有了类方法,可以创建"实例".
    在下面的文章中,我们就用"类"这个名字来代替构造方法,但是,这仅仅是模拟,并不是真正的面向对象的"类".
    在下一步的介绍之前,我们先来看看改变对象的prototype属性和设置prototype属性的注意事项:
    给出一种不是很恰当的解释,或许有助于我们理解:当我们new了一个对象之后,这个对象就会获得构造函数的prototype属
    性(包括函数和变量),可以认为是构造函数(类)继承了它的prototype属性对应的prototype对象的函数和变量,也就是说,
    prototype对象模拟了一个超类的效果.听着比较拗口,我们直接看个实例吧:

    • <SPAN style="FONT-SIZE: medium">function Person(name,sex) {  //Person类的构造函数   
    •     this.name = name;   
    •     this.sex = sex;   
    • }   
    • 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属性发生了改变)   
    •   
    • 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方法随着超类方法的改变而改变)</SPAN> 

 

 

 

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值