`
羽落窗前
  • 浏览: 105886 次
  • 性别: Icon_minigender_2
  • 来自: 厦门
社区版块
存档分类
最新评论

JavaScript的prototype

阅读更多

最近在看一些web开发的知识教程,觉得关于prototype的这段需要记录一下。

 

对于js的每一个object,都有internal property,可以通过obj.proName或者obj['proName']来调用。通过obj.hasOwnProperty('proName')可以检查obj是否有相对于的属性。

 

对于普通的object, property的使用方法如下:

 

 

new person = new Object();
person.name = "unknown";
person.sayName = fuction(){
     alert('The name is '+this.name+'.');
}

//call sayName function
person.sayName(); // The name is unknown.

alert(person.hasOwnProperty('sayName'); // true

alert(typeof person.sayName); // function

 

 

使用这种方法创建出来的object是独立的。如果要用js来进行面向对象的编程,就需要用到prototype.

对于js来说,function是一种特殊的对象,而且好像只有function对象可以调用prototype,来完成类似于面向对象编程的创建类,继承等等。

 

构造方法:

 

var Person = function(name){
     this.name = name;
};

Person.prototype.sayName = function(){
    alert('The name is '+this.name+'.');
};

var mike = new Person('Mike');
mike.sayName(); // The name is Mike.
 

 

这里的mike获得了Person的所有prototype的属性和值。需要注意的是,这时候:

1. 当Person再次添加新的prototype属性,mike也会同时获得这个属性。

 

Person.prototype.age = 'unknown';
Person.prototype.tellAge = function(){
     alert('Age is '+this.age+'.');
};

mike.tellAge(); // Age is unknown.
 

2. 但是,当mike修改了这个属性的值之后,无论Person如何修改,都不会影响到mike的属性。

 

mike.age = 20;
Person.prototype.age = 0;

mike.tellAge();// Age is 20.
 

 

3. 同理,如果mike先添加了一个新的property值,此后Person再添加同名的prototype,不会影响到mike。

 

 

如果说这里的Person相当于一个面向对象里的类的话,那么js里也有类似于子类父类的继承。方法如下:

var Student = function(name){
     this.name = name;
}

Student.prototype = new Person();

var tom = new Student('Tom');
tom.sayName(); // The name is Tom.
 在这里,Person属性变化对tom的影响关系和mike是相同的。

 

附件里的是今天学习prototype时候写的练习代码。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics