JS基础-关于原型、原型链的一切

let a = {}
let b = function () { }
console.log(a.prototype) // undefined
console.log(b.prototype) // { constructor: function(){...} }

function outTypeName(data, type) {
    let typeName =  Object.prototype.toString.call(data)
    console.log(typeName)
}
outTypeName(Object) //[object Function]
outTypeName(String) // [object Function]
outTypeName(Number) // [object Function]

function People(name) {
    this.name = name
}
People.prototype.age = 23 // 岁数
// 创建两个实例
let People1 = new People('OBKoro1')
let People2 = new People('扣肉')
People.prototype.age = 24 // 长大了一岁
console.log(People1.age, People2.age) // 24 24

let newObj = new someFn() // 构造调用函数

SubType.prototype = new SuperType();  // 原型继承：SubType继承SuperType
// 挂载SuperType的this和prototype的属性和方法到SubType.prototype上

function foo() { }
const newObj = new foo() // 构造调用foo 返回一个新对象
const newObj__proto__ = Object.getPrototypeOf(newObj) // 获取newObj的原型对象
newObj__proto__ === foo.prototype // true 验证newObj的原型指向foo
const foo__proto__ = Object.getPrototypeOf(foo.prototype) // 获取foo.prototype的原型
foo__proto__ === Object.prototype // true foo.prototype的原型是Object.prototype
``
如果用以前的语法，从`newObj`查找`foo`的原型，是这样的：
```js

**可以用以下三句话来理解原型链**：

1. **每个对象都拥有一个原型对象**: `newObj`的原型是`foo.prototype`。
2. **对象的原型可能也是继承其他原型对象的**: `foo.prototype`也有它的原型`Object.prototype`。
3. **一层一层的，以此类推，这种关系就是原型链**。

### 一个对象是否在另一个对象的原型链上

> 如果一个对象存在另一个对象的原型链上，我们可以说：它们是继承关系。

判断方式有两种，但都是根据构造函数的`prototype`是否在原型链上来判断的：

1. `instanceof `: 用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置

语法：`object instanceof constructor`

```js

2. `isPrototypeOf `：测试一个对象是否存在于另一个对象的原型链上

语法：`prototypeObj.isPrototypeOf(object)`

```js

### 原型链的终点: `Object.prototype`

`Object.prototype`是原型链的终点，所有对象都是从它继承了方法和属性。

**`Object.prototype`没有原型对象**：

```js

下面是两个验证例子，有疑虑的同学多写几个测试用例印证一下。

**字符串原型链的终点**：`Object.prototype`

```js

**函数原型链的终点**:`Object.prototype`

```js

### 原型链用来做什么？

#### 属性查找：
> 如果试图访问对象(实例instance)的某个属性,会首先在对象内部寻找该属性,直至找不到,然后才在该对象的原型(instance.prototype)里去找这个属性，以此类推

我们用一个例子来形象说明一下：

```js

当你访问`test`的某个属性时，浏览器会进行以下查找：

1. 浏览器首先查找`test` 本身
2. 接着查找它的原型对象：`String.prototype`
3. 最后查找`String.prototype`的原型对象：`Object.prototype`
4. 一旦在原型链上找到该属性，就会立即返回该属性，停止查找。
5. 原型链上的原型都没有找到的话，返回`undefiend`

这种查找机制还解释了字符串为何会有自带的方法: `slice`/`split`/`indexOf`等。

准确的说：
* 这些属性和方法是定义在`String`这个全局对象/函数上的。
* 字符串的原型指向了`String`函数的`prototype`。
* 之后通过查找原型链，在String函数的`prototype`中找到这些属性和方法。

#### 拒绝查找原型链： 

`hasOwnProperty`: 指示对象自身属性中是否具有指定的属性

语法：`obj.hasOwnProperty(prop)`

参数: `prop` 要查找的属性

返回值: 用来判断某个对象是否含有指定的属性的`Boolean`。

```js

这个`API`是挂载在`object.prototype`上，所有对象都可以使用，API会忽略掉那些从原型链上继承到的属性。

## 扩展：

### 实例的属性

你知道构造函数的实例对象上有哪些属性吗？这些属性分别挂载在哪个地方？原因是什么？

```js

this.some = '222'

let ccc = 'ccc'

foo.obkoro1 = 'obkoro1'

foo.prototype.a = 'aaa'

上面这道是考察`JS`基础的题，很多人都没说对，原因是没有彻底掌握`this`、`原型链`、`函数`。

#### 想一下再看解析：
#### 想一下再看解析：
#### 想一下再看解析：
#### 想一下再看解析：
#### 想一下再看解析：

1. `this.some`：`foo1`对象的属性

通过构造调用`foo`的`this`指向`foo1`，所以`this.some`挂载在`foo1`对象下。

属性查找: `foo1.some`

 `foo1.some`直接读取`foo1`的属性。

2. `foo1.test`、`foo1.a`：`foo1`对象的原型

根据上文提到的：构造/new调用函数的时候会创建一个新对象(`foo1`)，自动将`foo1`的原型(`Object.getPrototypeOf(foo1)`)指向构造函数的prototype对象。

构造调用会执行函数，所以` foo.prototype.a = 'aaaaa'`也会执行，单就赋值这个层面来说写在`foo`外面和写在`foo`里面是一样的。

属性查找：`foo1.test`、`foo1.a`

* `foo1`本身没有找到,继续查找
* `foo1`的原型`Object.getPrototypeOf(foo1)`上找到了`a`和`test`，返回它们，停止查找。

3. `foo1.obkoro1`和`foo1.koro`：返回undefined

#### 静态属性: `foo.obkoro1`、`foo.koro`

> 函数在JS中是一等公民，它也是一个对象, 用来模拟类。

这两个属性跟`foo1`没有关系，它是对象`foo`上的两个属性(类似函数的:`arguments`/`prototype`/`length`等属性)，称为**静态属性**。

它们只能通过`foo.obkoro1`和`foo.koro`来访问。

#### 原型对象改变，原型链下游获取的值也会改变 

上面那个例子中的`foo1.test`的值是什么？

```js