mirror of
https://github.com/Estom/notes.git
synced 2026-05-11 11:06:25 +08:00
重新整理JavaScript笔记
This commit is contained in:
93
JavaScript/EcmaScript/18 原型.md
Normal file
93
JavaScript/EcmaScript/18 原型.md
Normal file
@@ -0,0 +1,93 @@
|
||||
在 JavaScript 中,函数是一个包含属性和方法的 Function 类型的对象。而原型(Prototype)就是 Function 类型对象的一个属性。
|
||||
|
||||
在函数定义时就包含了 prototype 属性,它的初始值是一个空对象。在 JavaScript 中并没有定义函数的原型类型,所以原型可以是任何类型。
|
||||
|
||||
原型是用于保存对象的共享属性和方法的,原型的属性和方法并不会影响函数本身的属性和方法。
|
||||
|
||||
```javascript
|
||||
function foo(a,b){
|
||||
return a + b;
|
||||
}
|
||||
console.log( typeof foo.prototype );// object
|
||||
```
|
||||
|
||||
## 获取原型
|
||||
|
||||
通过如下两种方式可以获取对象的原型,从而设置共享的属性和方法:
|
||||
|
||||
- 通过构造函数的 prototype 属性。
|
||||
|
||||
```javascript
|
||||
function Person() {
|
||||
console.log('Person instantiated');
|
||||
}
|
||||
console.log( Person.prototype );
|
||||
```
|
||||
|
||||
- 通过 Object 对象的 getPrototypeOf( obj ) 方法。
|
||||
|
||||
```javascript
|
||||
function Person() {
|
||||
console.log('Person instantiated');
|
||||
}
|
||||
console.log( Object.getPrototypeOf( Person ) );
|
||||
```
|
||||
|
||||
## 原型的属性和方法
|
||||
|
||||
通过如下两种方式可以设置原型的属性和方法:
|
||||
|
||||
- 原型的属性和方法单独进行定义。
|
||||
|
||||
```javascript
|
||||
构造函数.prototype.属性名 = 属性值;
|
||||
|
||||
构造函数.prototype.方法名 = function(){}
|
||||
```
|
||||
|
||||
- 直接为原型定义一个新对象。
|
||||
|
||||
```javascript
|
||||
构造函数.prototype = {
|
||||
属性名 : 属性值,
|
||||
方法名 : function(){}
|
||||
}
|
||||
```
|
||||
|
||||
## 自有属性与原型属性
|
||||
|
||||
- 自有属性: 通过对象的引用添加的属性。其它对象可能无此属性;即使有,也是彼此独立的属性。
|
||||
- 原型属性: 从原型对象中继承来的属性,一旦原型对象中属性值改变,所有继承自该原型的对象属性均改变。
|
||||
|
||||
```javascript
|
||||
function Emp( ename, salary ){
|
||||
this.ename = ename;
|
||||
this.salary = salary;
|
||||
}
|
||||
Emp.prototype = { city : "北京市", dept : "研发部" }
|
||||
var emp1 = new Emp("Mary",3800);
|
||||
var emp2 = new Emp("Tom",3000);
|
||||
```
|
||||
|
||||
上述代码的内存结构图如下:
|
||||
|
||||

|
||||
|
||||
## 检测自有或原型属性
|
||||
|
||||
- 使用 hasOwnPrototype() 方法检测对象是否具有指定的自有属性:
|
||||
|
||||
```javascript
|
||||
function Hero(){}
|
||||
var hero = new Hero();
|
||||
|
||||
console.log( hero.hasOwnPrototype("name") );
|
||||
```
|
||||
|
||||
- 使用 in 关键字检测对象及其原型链中是否具有指定属性:
|
||||
|
||||
```javascript
|
||||
function Hero(){}
|
||||
var hero = new Hero();
|
||||
|
||||
console.log( "name" in hero );
|
||||
Reference in New Issue
Block a user