0
点赞
收藏
分享

微信扫一扫

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

Sky飞羽 2022-01-06 阅读 121

一、prototype的应用

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

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

        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

二、 原型

        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);

 四、原型链

        // 原型会指向构造函数的原型对象
        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 用于判断一个对象是否是一个构造函数的实例化对象

六、new


        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会改变数组

 

举报

相关推荐

0 条评论