JavaScript的prototype

最新推荐文章于 2025-06-16 18:07:53 发布

原创最新推荐文章于 2025-06-16 18:07:53 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

Web笔记专栏收录该内容

18 篇文章

订阅专栏

本文详细解析了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时候写的练习代码。