js基本知识——原型 （又名: 原型空间 / 原型对象）

一、什么是原型？

• 每一个函数 天生拥有一个属性 prototype, 他的属性值是一个 对象, 我们通常把这个对象叫做 这个函数的原型(空间|对象)
• 原型这个对象中 有一个属性 叫做 constructor, 这个属性表示的是: 当前这个 原型 是哪个函数的原型

二、如何使用原型中的属性?

• 每一个对象 天生拥有一个属性__proto__ (前后都是两个下划线)，这个属性指向 自己构造函数 的原型

       function Person() { }
       Person.prototype.abc = '我是添加到 Person 函数的原型上的一个字符串, 你可以通过 这个 Person 创建出来的对象  身上的 __proto__ 查看到'
        Person.prototype.age = 18   //向 Person 函数的原型(对象)上 添加一个属性 age, 值为 18
        Person.prototype.name = '何土豆'
        Person.prototype.fn = function () {
        console.log('我是添加在 abc 函数的原型对象上 的一个函数')
         } 
       let p1 = new Person()
        // 使用new结合 Person() 这个过程叫做构造函数的实例化，最终会得到一个对象，给p1叫做实例化对象/实例对象，本质上依然是一个对象
        console.log(p1.__proto__)
        /*
          __proto__ 属性指向自己构造函数的原型
          因为 p1 这个对象的构造函数  是 Person
          那么也就是说, p1.__proto__  实际指向的是 Person 这个函数的原型
        */ 

三、原型的作用？

• 把构造函数中 公共方法提取出来，放在原型中

     function Person(name, age) {
            this.name = name
            this.age = age
        }
        Person.prototype.fn = function () {
            console.log('我是添加在 Person 函数的原型对象上 的一个函数')
        }

        let p2 = new Person('QF001', 18)   
        console.log(p2.__proto__)

        let p3 = new Person('QF002', 28)
        console.log(p3.__proto__)

四、对象访问规则

• 访问对象的某一个属性时，会现在对象本身去查找，找到直接用，没找到，那么会去对象的__proto__中查找，找到就使用，没找到 去对象原型的__proto__查找，直到查找到js顶层对象Object.prototype如果没找到，就不找了,返回 undefined

       function Person(name, age) {
       this.name = name
       this.age = age
      }
        Person.prototype.fn = function () {
            console.log('我是添加在 Person 函数的原型对象上 的一个函数')
        }

        let p2 = new Person('QF001', 18)   
        console.log(p2.__proto__)

        let p3 = new Person('QF002', 28)
        console.log(p3.__proto__)

        console.log(p2)
        console.log(p2.fn)
        p2.fn()

        console.log(p2.abc) // undefined