75 lines
2.3 KiB
Markdown
75 lines
2.3 KiB
Markdown
# 原型链和原型继承
|
||
|
||
在学习原型和原型链之前 我们先来复习一下 通过构造函数来创建对象的方式
|
||
|
||
### 构造函数
|
||
任何函数都可以做为构造函数使用
|
||
构造函数和普通函数的区别主要在于 调用的时候的差异
|
||
|
||
普通函数：
|
||
```
|
||
function create(){
|
||
this.role="admin"
|
||
}
|
||
create()
|
||
|
||
```
|
||
|
||
构造函数：
|
||
|
||
```
|
||
function create(){
|
||
this.role="admin"
|
||
}
|
||
var juese=new create()
|
||
|
||
```
|
||
此处的new 也属于运算符的一种 作用是创建一个用户定义的对象类型或具有构造函数的内置对象的实例
|
||
|
||
* new 操作符的过程
|
||
new 关键字会进行如下的操作：
|
||
|
||
1. 创建一个空的简单JavaScript对象（即{}）；
|
||
|
||
2.链接该对象（设置该对象的constructor）到另一个对象 ；
|
||
3. 将步骤1新创建的对象作为this的上下文 ；
|
||
4. 如果该函数没有返回对象，则返回this。
|
||
|
||
* 分析 ```new foo() ``` 的执行过程
|
||
|
||
1. 一个继承自 Foo.prototype 的新对象被创建。
|
||
2. 使用指定的参数调用构造函数 Foo，并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。
|
||
3.由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）
|
||
|
||
|
||
|
||
接下来我们把上面创建的对象打印一下看看会出现什么结果
|
||
|
||
|
||
|
||
|
||
|
||
然后我们会发现在我们定义的role属性下面多了一个```__proto__``` 属性 这个```__proto__```属性指的就是我们当前对象的原型
|
||
|
||
|
||
|
||
|
||
|
||
|
||
### 原型对象
|
||
无论什么时候，只要创建一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。普通对象没有 prototype，但有``` __proto__``` 属性。
|
||
|
||
```
|
||
function Person() {
|
||
|
||
}
|
||
Person.prototype.name = 'Perty';
|
||
var person = new Person();
|
||
person.name = 'Kevin';
|
||
console.log(person.name) // Kevin
|
||
delete person.name
|
||
console.log(person.name) // Perty
|
||
|
||
```
|
||
|