js原型及原型链

1. 属性

   1. prototype: 
      js中每个构造函数都有prototype对象(只能是函数才有,对象没有).所有实例对象需要共享的方法和属性放到prototype对象里,不要共享的就放在构造函数中
      prototype不用手动声明.
      设置方法

      function Animal(name){
          this.name = name
      }
      
      // 设置需要共享的属性
      Animal.prototype.sayName = function(){
          console.log(this.name)
      }
      
      // 创建实例
      let cat = new Animal('cat')
      cat.sayName()// cat   调用的是原型方法
      
      // 方法重写
      cat.sayName = function(){
          console.log('我就是一只猫')
      }
      cat.sayName()// 我就是一只猫  调用的是cat实例的方法

       

   2. __proto__
      __proto__ 大多数指向构造函数的原型 cat.__proto__ === Animal.prototype // true  cat.__proto__ = cat.constructor.prototype = Animal.prototype
      Object.create()不一定是,传入什么就是将__proto__指向谁
      __proto__指向:
      Object.create(),传一个null,创建的实例的__proto__ 就是null,所以可以用此种方式创建一个干净的没有原型的对象
      1. 字面量方式创建

         let cat = {}
         console.log(cat.__proto__ === Object.prototype) //true

         

      2. 构造函数方式创建

         function Animal(){
             console.log('Animal')
         }
         let cat = new Animal()
         console.log(cat.__proto__ === Animal.prototype)

         

      3. Object.create方式创建

         function Animal(){
             console.log('animal')
         }
         let cat = Object.create(Animal)
         console.log(cat.__proto__ === Animal.prototype) // false
         console.log(cat.__proto__ === Animal) // true

         

   3. constructor
      每个对象都会有一个constructor属性来指向自己的构造函数

      function Animal (){
          console.log('Animal')
      }
      console.log(Animal === Animal.prototype.constructor) // true
      

      

2. 三个关系

   1. 图形解释
      

   2. 理解
      一个实例的__proto__ 就是他的构造函数的prototype
      一个构造函数的__proto__ 就是Function.prototype
      Function.__Proto__就是Object.prototype
      
      给他一个构造函数上添加一个原型方法,他的实例的原型和其余的function的__proto__不同,但是构造函数的__proto__和Function的__proto__好使相同的

3. 原型链: 
   每一个实例对象都有一个__proto__属性(隐式原型),在js内部用来查找原型链
   每个构造函数都有一个prototype的对象,(显式原型),用来显示修改对象原型
   实例.__proto__ = 构造函数.prototype = 原型
   原型链的特点,通过实例.__proto__查找原型上的属性,从子类一直向上查找对象原型的属性,继而形成一个查找链就是原型链
   
   原型链就是通过原型组成的一条查找链,从实例对象开始，通过 __proto__来向上查找，直到找到null为止, 
   每个prototype对象的最终指向都是Object.prototype

   function dog(){}
   function cat(){}
   function monkey(){}
   
   console.log(dog.prototype.__proto__ === Object.prototype) // true
   console.log(cat.prototype.__proto__ === Object.prototype) // true
   console.log(monkey.prototype.__proto__ === Object.prototype) // true

    

4. new
   new 就是创建一个空对象.空对象继承,构造函数的原型对象,并且空对象指向原型对象

5. instanceof
   instanceof 的原理:就是判断构造函数的prototype,是不是和实例对象的__proto__的值指向同一个地址

   let arr = [1,2]
   arr instanceof === Array // true
   arr instanceof === Object// true
   arr instanceof === String// false

    

6. 题目理解

   function User() {}
   User.prototype.hello = function () {}
   
   let u1 = new User()
   let u2 = new User()
   
   console.log(u1.hello === u2.hello)                                         // true
   
   console.log(User.prototype.constructor)                                    // ueser(){}
   
   console.log(User.prototype === Function.prototype)                         // false
   console.dir(User.prototype) // User.prototype含有hello
   console.log(Function.prototype) // Function.prototype没有hello
   
   console.log(User.__proto__ === Function.prototype)                         // true
   console.dir(User.__proto__) // Function.prototype
   console.log(Function.prototype) // Function.prototype
   
   console.log(User.prototype === Function.__proto__)                         // false
   console.dir(User.prototype) // User.prototype 含有hello
   console.log(Function.__proto__) Object.prototype
   
   console.log(u1.__proto__ === u2.__proto__)                                 // true
   console.dir(u1.__proto__) //  User.prototype
   console.log(u2.__proto__) //  User.prototype
   
   console.log(u1.__proto__ === User.__proto__)                               // false
   console.dir(u1.__proto__) //  User.prototype
   console.log(User.__proto__) //  Function.prototype
   
   console.log(u1.__proto__ === User.prototypr)                               // true
   console.dir(u1.__proto__) //  User.prototype
   console.log(User.prototypr) //  User.prototype
   
   console.log(Function.__proto__ === Object.__proto__)                       // true
   console.dir(Function.__proto__) // object.prototype
   console.log(Object.__proto__) // null
   
   console.log(Function.prototype.__proto__ === Object.prototype.__proto__)   // false
   console.dir(Function.prototype.__proto__) // object.prototype
   console.log(Object.prototype.__proto__) // null
   
   console.log(Function.prototype.__proto__ === Object.prototype)             // true
   console.dir(Function.prototype.__proto__) // object.prototype
   console.log(Object.prototype)// object.prototype