面向对象的Javascript - 通过原型(Prototype)实现继承

ゝ一纸荒年。 2021-12-05 15:51 262阅读 0赞

### Prototype的使用方式 ###

--------------------

Prototype(原型)是Javascript中实现对象继承的基础方式，使用方式为 \[function\].prototype = \[object1\]

\[function\]可认为相当于type/class，这样可以使该类型的所有对象继承\[object1\]中所有Public的属性和方法。在这里public的意思是使用了this.xxx。

先看以下例子

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

**Staff.prototype = new Person();**

var s1 = new Staff();
    console.log(s1.sex);   //==> Male  
    s1.speek();           //==> Unknown is speeking

\* 注: console.log的结果可以在浏览器开发人员工具/Firebug中的Console(控制台)中查看

通过指定Staff.prototype = new Person(), Staff类型的对象s1获得了Person的属性和方法。

### Prototype的原理及实现方式 ###

--------------------

绝大多数的javascript对象都有原型对象，这些原型对象的应用形成一条“原型链”，链的尽头是Object.prototype。当调用对象的某属性或方法时，js引擎现在当前对象中查找，找不到的话就会查找其原型对象，如此上溯直到到达Object.prototype。我们所熟知的toString,valueOf等方法正是定义在Object.prototype中，因此所有js对象都通过继承获得这些方法。

在Chrome和Firefox里，原型对象可以通过对象的属性"\_\_proto\_\_"访问，该属性实际上指向对应类型的”prototype”属性，即\[object\].\_\_proto\_\_ == \[function\].prototype。

在未指定继承状态下，每一个对象都具有一个默认的\_\_proto\_\_对象，而该\_\_proto\_\_的上一级原型对象为Object.prototype.

![2011121618260321.png][]

当指定Staff继承自Person之后，\_\_proto\_\_属性会指向personObj，原型链也会随之变化

![2011121618261471.png][]

### 支持带参数的构造函数 ###

--------------------

在第一点的代码例子中，考虑构造函数带参数的情况。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

发现通过new Staff(…)无法对fullName和sex赋值，因为在指定继承关系的时候并没有把参数传进Person的构造函数中。要解决此问题需要在Staff中将参数传进Person，答案就是改变\_\_prop\_\_属性。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

**this.\_\_proto\_\_ = new Person(fullName, sex);**

}else{                //For IE

**Person.call(this,fullName, sex);**

}
    this.id = id || 1001;
    this.title = title || "Developer";
    }
    Staff.prototype = new Person();
    var s1 = new Staff(99, "Manager","Eva", "Female");
    console.log(s1.fullName);   //==> Eva

IE不支持\_\_prop\_\_属性，可以使用call/apply方法，该方法将带参数地调用Person()方法，并且将this作为Person()方法的当前对象。

这种做法所有浏览器都支持，所以通常直接使用call/apply即可，上述例子只是为说明\_\_proto\_\_属性的作用。

转载于:https://www.cnblogs.com/hiteddy/archive/2011/12/16/Object\_Oriented\_javascript\_prototype\_inheritance.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211205/9aa172214d1f4beca9be2535d35b33ef.png
[2011121618260321.png]: /images/20211205/1b08da0e505c4877943078cc1c049a45.png
[2011121618261471.png]: /images/20211205/c8ef5249c8564e2db2031f4e5980be24.png