JavaScript语法函数高级之原型与原型链

一、理解原型对象

1、函数的prototype属性

• 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
• 原型对象中有一个属性constructor, 它指向函数对象

2、操作原型对象

• 可以通过prototype属性找到原型对象，并可以给该对象添加属性和方法(通常是添加方法)
• 作用: 函数的所有实例对象自动拥有原型中的属性(方法)

3、图解

4、代码实例：

<!--所有的构造函数都具有一个显式原型属性prototype
                            属性值为一个原型对象-->
    <!--
        1. 函数的prototype属性(图)
          * 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
          * 原型对象中有一个属性constructor, 它指向函数对象
        2. 给原型对象添加属性(一般都是方法)
          * 作用: 函数的所有实例对象自动拥有原型中的属性(方法)
-->
    <script type="text/javascript">
        // 每个函数都有一个prototype属性, 它默认指向一个对象(即称为: 原型对象)
        console.log(Date.prototype, typeof Date.prototype)

        function fn() {

        }
        console.log(fn.prototype, typeof fn.prototype)

        // 原型对象中有一个属性constructor, 它指向函数对象
        console.log(Date.prototype.constructor === Date)
        console.log(fn.prototype.constructor === fn)

        // 2. 给原型对象添加属性(一般都是方法)
        function F() {

        }
        F.prototype.age = 12 //添加属性
        F.prototype.setAge = function(age) { // 添加方法
                this.age = age
            }
            // 创建函数的实例对象
        var f = new F()
        console.log(f.age)
        f.setAge(23)
        console.log(f.age)
    </script>

二、原型的分类

原型分为显示原型对象和隐式原型对象。

1、 概念

• 每个函数function都有一个prototype，即显式原型
• 每个实例对象都有一个__proto__，可称为隐式原型
• 对象的隐式原型的值为其对应构造函数的显式原型的值

2、图解

3、总结

• 显示原型：所有的（构造）函数都有显示原型({})。
• 隐式原型：所有的实例（对象）都有隐式原型
• 所有的函数都有一个显示原型
• 所有的对象都有一个隐式原型
• 函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象
• 对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值
• 程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)

4、 注意事项：

• Math是一个对象。
• 所有实例对象的隐式原型指向其构造函数的显示原型。
• object的显示原型的隐式原型指向null.
• Function的隐式原型指向自己的显示原型。

5、代码示例：
03_显式原型与隐式原型.html

<!--
    1. 每个函数function都有一个prototype，即显式原型
    2. 每个实例对象都有一个__proto__，可称为隐式原型
    3. 对象的隐式原型的值为其对应构造函数的显式原型的值
    4. 内存结构(图)
    5. 总结:
      * 函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象
      * 对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值
      * 程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)
-->
<script type="text/javascript">
  function Fn() {

  }
  var fn = new Fn()
  console.log(Fn.prototype, fn.__proto__)
  console.log(Fn.prototype===fn.__proto__)

  Fn.prototype.test = function () {
    console.log('test()')
  }
  fn.test()

</script>

三、原型链（原型链是隐式原型链）

1、 概念

• 访问一个对象的属性时，先在自身属性中查找，找到返回
• 如果没有, 再沿着__proto__这条链向上查找, 找到返回
• 如果最终没找到, 返回undefined
• __proto__这条原型查找链就是原型链: 隐式原型链

2、经典原型链图解

代码示例：

    <!--
    1. 原型链(图解)
      * 访问一个对象的属性时，
        * 先在自身属性中查找，找到返回
        * 如果没有, 再沿着__proto__这条链向上查找, 找到返回
        * 如果最终没找到, 返回undefined
      * 别名: 隐式原型链
      * 作用: 查找对象的属性(方法)
    2. 构造函数/原型/实体对象的关系(图解)
    3. 构造函数/原型/实体对象的关系2(图解)

    手绘原型链的步骤：
        1.画构造函数的位置
            2.构造函数的显示原型
                注意一个回路(construct)
            3.隐式原型链的头!!!!
                Object.prototype.__proto__ == null
            4.自定义实例对象的隐式原型链
            5.Object实例对象的隐式原型链
            6.Function实例对象的隐式原型链
                    自定义构造函数
                    Object
                    Function(自己的隐式原型指向自己的显示原型)
-->
        <script type="text/javascript">
            function Fn() {
                this.test1 = function() {
                    console.log('test1()')
                }
            }
            Fn.prototype.test2 = function() {
                console.log('test2()')
            }
            var fn = new Fn()

            fn.test1()
            fn.test2()
            console.log(fn.toString())
            fn.test3()
        </script>

3、 原型链的作用： 属性的查找和设置。

属性查找：一般情况下：属性的查找走原型链。属性的查找走原型链，如果整条原型链没有，返回underfined.
属性设置：一般情况下，只影响对象的直接属性。

当读取实例的属性时，如果在直接属性里找不到，则上原型链找，找到头也没找到，则返回undefined。
当为实例的属性设置值得时候，不管怎么样操作的都是实例的直接属性。

代码示例：

<!--
    一般情况下:
            属性的查找走原型链!!
                先在对象中找,如果找不到上原型链
                如果整体原型链都没有则返回undefined!!
            属性的设置
                只会影响对象的直接属性！！！
    1. 读取对象的属性值时: 会自动到原型链中查找
    2. 设置对象的属性值时: 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值
    3. 方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上
-->
<script type="text/javascript">
  function Person(name, age) {
    this.name = name;
    this.age = age;
  }
  Person.prototype.setName = function (name) {
    this.name = name;
  }
  Person.prototype.sex = '男';

  var p1 = new Person('Tom', 12)
  p1.setName('Jack')
  console.log(p1.name, p1.age, p1.sex)
  p1.sex = '女'
  console.log(p1.name, p1.age, p1.sex)

  var p2 = new Person('Bob', 23)
  console.log(p2.name, p2.age, p2.sex)

</script>

4、原型链_属性问题

• 读取对象的属性值时: 会自动到原型链中查找
• 设置对象的属性值时: 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值
• 方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上。

5、构造函数/原型/实体对象的关系(图解)

6、构造函数/原型/实体对象的关系(图解)

四、原型与原型链总结

1、. 函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象
2、 对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值
3、程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)
4、所有的对象都具有一个隐式原型属性__proto__；属性值为一个原型对象
5、所有的构造函数都具有一个显式原型属性prototype；属性值为一个原型对象
6、对象的__proto__指向自己构造函数的prototype
7、所有的函数都有一个显示原型
8、所有的对象都有一个隐式原型
9、对象的隐式原型指向其构造函数的显示原型

五、使用细节和注意事项

1、构造函数的原型对象是一个空对象（并不精确）

        String的porperty是一个字符串实例
        Number的porperty是一个数字实例
        Boolean的porperty是一个布尔实例
        RegExp的porperty是一个正则实例
        Array的porperty是一个数组实例
        Function的porperty是一个函数实例
        但是！！！以上所有原型对象的__proto__都指向Object的prototype

2、显示原型&constructor

显示原型( 空的Object对象 {})
constructor:构造函数

3、原型链是隐式原型链

4、对象的显示原型和函数的隐式原型

Object.prototype ==null
Function.__proto__ === Function.prototype（true）