day23 js之原型，原型链，原型对象

一、prototype的应用

        每一个函数都拥有一个属性 prototype

        给构造函数提供共有的属性和方法

 // prototype  原型对象  共有属性和方法

        // 如何封装构造函数

        //     普通的实现

        //        把普通代码中的变量变成属性

        //        把普通代码的代码块变成方法

        //        注意:this的改变

        //        提供共用的属性和方法  

        Date.prototype.format = function () {

            // this -> 实例化的这个对象,不是构造函数
            let y = this.getFullYear();
            let m = this.getMonth() + 1;
            let d = this.getDate(); 
            return y + '-' + m + '-' + d
        }

        let date = new Date();

        let res = date.format();
        console.log(res); // 2022-1-6

二、 原型

  原型 __proto__

          每一个对象都有__proto__属性  -> 指向对应的构造函数的原型对象

          去查找一个对象是否有某个属性或方法

    构造函数     + 原型对象

        constructor  __proto__

        hasOwnProperty() -- 用于判断属性或者方法是不是自己的(还有可能是继承

        来的)

 

        function Dog(type) {
            this.type = type ;
            this.say = '汪'
        }
        Dog.prototype.color = 'red'

        const d = new Dog('二哈')
        console.log(d);

        console.log(d.say); // 汪

        console.log(d.color); // red 

        console.log(d.constructor); // 构造器

        console.log(d.__proto__); // 原型对象

三、原型对象 prototype

        function Person(name , age) {
            this.name = name ;
            this.age = age ;
        }

        Person.prototype.xing = '陈'

        const p = new Person('小花',16)

        // p 自己没有xing这个属性

        console.log(p.xing); //  陈


        console.log(p.hasOwnProperty('name')); // true
        // name是p自身的属性

        console.log(p.hasOwnProperty('xing')); // false
        // xing不是p自身的属性,是继承而来的


        console.log(p.constructor);

 四、原型链

 原型链

            每一个对象都有原型,也就是__proto__这个属性,这个属性会指向这个构造

   函数函数的原型对象,也就是prototype

            构造函数的原型对象也是对象,也有原型,他指向对象也就是object的原型对

   象

            最终Object的原型对象也是对象,它的原型最终指向null

        // 原型会指向构造函数的原型对象
        console.log(p.__proto__ == Person.prototype); // true
        // 原型对象也是一个对象, 因此也有原型,它的原型就是Object.prototype
        console.log(Person.prototype.__proto__ == Object.prototype); // true

        // Object.prototype 也是原型对象,指向null
        console.log(Object.prototype.__proto__ == null);//true 

        console.log(p.__proto__.__proto__.__proto__ == null); // true

        // 函数也是对象,因此函数也有原型
        console.log(Person.__proto__ == Function.prototype); // true

        //
        console.log(Function.prototype.__proto__ == Object.prototype);

        console.log(Object.prototype.__proto__ == null);

 五、instanceOf

        // Array.isArray()  // 布尔值

        // constructor // 可以判断数组

        // instanceof 用于判断一个对象是否是一个构造函数的实例化对象

        // instanceof 判断某一个对象是不是这个构造函数的实例化对象

        console.log(arr instanceof Array); // true

        console.log(arr.constructor == Array); // true 

         console.log(arr.__proto__ == Array.prototype);//true 

六、new

  new的贡献

          1  创建了一个对象

          2  this指向了这个对象

          3  把这个对象的原型指向了构造函数的原型对象

          4  返回了这个对象

        function Person(type) {
            // const obj = {}
            // this -> obj
            // obj.__proto__ = Person.prototype
            // return obj
            console.log(this);
            // 这个obj的原型是Object.prototype
        }
        
        const p = new Person()
     

        console.log(p.__proto__ == Person.prototype); // true

        const obj = {}
        console.log(obj.__proto__ == Object.prototype);// true

 七、原型的引用

      const oPs1 = document.querySelectorAll('p')
      // NodeList

      const oPs2 = document.getElementsByTagName('p')
      // HTMLCollection

      console.log(oPs1,oPs2);


      // NodeList forEach 

      // HTMLCollection 没有forEach 


      oPs1.forEach( v => {
          console.log(v);
      })
      
      const len = oPs2.length 
      oPs2.__proto__ = Array.prototype  // 强行改变了原型的指向 length 没了
      oPs2.length = len

      console.log(oPs2);

      oPs2.forEach( v => {
          console.log(v);
      })

    // oPs2.push('a')  push会改变数组