JavaScript ES5 中原型的概念

对象和函数的原型

认识对象的原型

◼ JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]]，这个特殊的对象可以指向另外一个对象。
◼ 那么这个对象有什么用呢？
  当我们通过引用对象的属性key来获取一个value时，它会触发[[Get]]的操作；
  这个操作会首先检查该对象是否有对应的属性，如果有的话就使用它；
  如果对象中没有改属性，那么会访问对象[[prototype]]内置属性指向的对象上的属性；

◼ 那么如果通过字面量直接创建一个对象，这个对象也会有这样的属性吗？如果有，应该如何获取这个属性呢？
  答案是有的，只要是对象都会有这样的一个内置属性；
◼ 获取的方式有两种：
  方式一：通过对象的__proto__ 属性可以获取到（但是这个是早期浏览器自己添加的，存在一定的兼容性问题）；
  方式二：通过Object.getPrototypeOf 方法可以获取到；
案例:
  var obj = {
  name : 'hdc',
  age : 18
}
console.log(obj)
// 获取原型的方式
// 浏览器自己加的属性
console.log(obj.__proto__)
//标准方法
console.log(Object.getPrototypeOf(obj))

console.log(obj.__proto__ === Object.getPrototypeOf(obj))//true

函数的原型prototype

◼ 那么我们知道上面的东西对于我们的构造函数创建对象来说有什么用呢？
    它的意义是非常重大的，接下来我们继续来探讨；
◼ 这里我们又要引入一个新的概念：所有的函数都有一个prototype的属性（注意：不是__proto__）
◼ 你可能会问题，老师是不是因为函数是一个对象，所以它有prototype的属性呢？
    不是的，因为它是一个函数，才有了这个特殊的属性；
    而不是它是一个对象，所以有这个特殊的属性
案例:
   <script>
    var obj = {}
    function foo(){      
    }
    //1.将函数看成普通的obj对象时是具备__proto__(隐式原型)
    //作用:查找key对的value时最终会找到原型身上
    console.log(obj.__proto__)
    console.log(foo.__proto__)
    //2.将函数看成是一个函数是,它具备prototype(显示原型)
    //所有函数都有一个属性prototype
    //作用:用来构建对象时给对象设置隐式原型的
    console.log(foo.prototype)
    // console.log(obj.prototype)//对象没用这个属性
  </script>

new、constructor

再看new操作符

◼ 我们前面讲过new关键字的步骤如下：
    1.在内存中创建一个新的对象（空对象）；
    2.这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性；
◼ 那么也就意味着我们通过Person构造函数创建出来的所有对象的[[prototype]]属性都指向Person.prototype：

1.创建空对象
  var obj = {}
2.将这个空对象赋值给this
  this = obj
3.将函数的显示原型赋值给这个对象作为他的隐式原型
obj.__proto__ = Preson.prototype
4.执行函数中的代码
5.如果没有返回非空对象将这个对象默认返回

案例:
  <script>
    function Foo(){
      //1.创建空的对象
      // 2. 将Foo的prototype原型(显示原型)赋值给空的对象的__proto__(隐式原型)
    }
    console.log(Foo.prototype)
    var f1 = new Foo()
    var f2 = new Foo()
    var f3 = new Foo()
    var f4 = new Foo()
    var f5 = new Foo()

    console.log(f1.__proto__)
    console.log(Foo.prototype === f1.__proto__)//true
    console.log(f3.__proto__ === f5.__proto__)//true
  </script>

constructor属性

◼ 事实上原型对象上面是有一个属性的：constructor
    默认情况下原型上都会添加一个属性叫做constructor，这个constructor指向当前的函数对象；
案例:
    // 非常重要的属性:constructor 指向的是函数Person
      var PersonProtoType = Person.prototype
      console.log(PersonProtoType)
      console.log(PersonProtoType.constructor)
      console.log(PersonProtoType.constructor === Person)  //true
      console.log(Person.name)//Person
      console.log(PersonProtoType.constructor.name)  //Person

将所有的函数定义放到了显式原型上

    <script>
    function Student(name,age,sno){
      this.name = name
      this.age = age
      this.sno = sno
      // 方式一 : 编写函数会创建多个函数对象
      // this.running = function(){
      //   console.log(this.name + "在跑步")
      // }
      // this.eating = function(){
      //   console.log(this.name + "在吃饭")
      
      // }
      // this.studying = function(){
      //   console.log(this.name + "在学习")
      // }
    }
    //将函数放在原型上
    // 当我们多个对象之间拥有共同的值时我们可以将它放在构造函数对象的显式原型
    // 由构造函数创建出来的所有对象,都会共享这些属性
    Student.prototype.running = function(){
      console.log(this.name + "在跑步")
    }
    Student.prototype.eating = function(){
      console.log(this.name + "在吃饭")
    }
    var stu1 = new Student("hdc",21,111)
    var stu2 = new Student("kobe",30,112)
    var stu3 = new Student("james",25,113)
    //默认时 创建多个相同的函数对象
    console.log(stu1.running == stu3.running)//false
    // 隐式原型的作用
    // 1> stu1的隐式原型是Student.prototype对象
    // 2> stu1.running 查找
    //      * 先在自己的身上找
    //      * 去原型里面查找
    stu1.running()
    stu3.running()
    stu3.eating()
  </script>

重写原型对象

◼ 如果我们需要在原型上添加过多的属性，通常我们会重写整个原型对象：
◼ 前面我们说过, 每创建一个函数, 就会同时创建它的prototype对象, 这个对象也会自动获取constructor属性；
    而我们这里相当于给prototype重新赋值了一个对象, 那么这个新对象的constructor属性, 会指向Object构造函数, 而不是Person构造函数了
案例:
    <script>
        function Person(){
        }
        console.log(Person.prototype)
        //在原有的原型对象上添加新的属性
        Person.prototype.message = "Hello Person"
        Person.prototype.running = function(){}

        // 直接赋值一个新的原型对象  缺点没有constructor对象
        Person.prototype = {
          message : "Hello Person",
          info:{name:"hdc",age:30},
          running:function(){},
          eatting:function(){},
          // 手动添加constructor对象
          constructor:Person
        }
        // 新建实例对象
        var p1 = new Person()
        console.log(p1.message)
     </script>

原型对象的constructor

  ◼ 如果希望constructor指向Person，那么可以手动添加：
  ◼ 上面的方式虽然可以, 但是也会造成constructor的[[Enumerable]]特性被设置了true.
      默认情况下, 原生的constructor属性是不可枚举的.
      如果希望解决这个问题, 就可以使用我们前面介绍的Object.defineProperty()函数了.
  案例:
  console.log(Person.prototype) // {message: 'Hello Person', info: {…}, running: ƒ, eatting: ƒ}
  console.log(Object.keys(Person.prototype))  //(5) ['message', 'info', 'running', 'eatting', 'constructor']
  // 默认情况下, 原生的constructor属性是不可枚举的.
  // 如果希望解决这个问题, 就可以使用我们前面介绍的Object.defineProperty()函数了.
  Object.defineProperty(Person.prototype,"constructor",{
    enumerable:false,
    value:Person
  })
  console.log(Object.keys(Person.prototype))  //(4) ['message', 'info', 'running', 'eatting']