关于JavaScript原型链的那些事

209 阅读2分钟

什么是原型链

  • 每个构造函数都有一个prototype属性,即原型对象

  • 通过实例对象的proto属性也能访问到原型对象

  • 而原型对象本质也是一个对象,是对象就有自己的原型,最终形成的链状结构称为原型链

对象访问原型链规则

  • 就近原则

  • 对象优先访问自己的属性没有才会访问原型,原型没有就访问原型的原型,以此类推直到原型链的终点null,如果还没有属性获取undefined,如果是方法则会报错

原型链的作用

  • 继承

原型对象代码

        function Person(name, age) {
            this.name = name
            this.age = age
            //    this.type = '学生'//如果自己有type,优先访问自己的
        }
        //2.原型对象 : 存储具有共同特征的数据
        Person.prototype.type = '哺乳动物'
        Person.prototype.country = '中国'
        Person.prototype.eat = function () {
            console.log(this.name + '吃东西')
        }

        //3.实例对象
        let p1 = new Person('班长', 20)
        let p2 = new Person('ikun', 20)
        console.log(p1)


        /* 小测试 */
        console.log(p1.name) //班长  p1自己有name属性
        console.log(p1.age) //20   p1自己有age
        console.log(p1.type) //哺乳动物  p1自己没有type,但是p1的原型有
        console.log(p1.girlFrined) //undefined  p1自己没有girlFrined, p1的原型也没有girlFrined

        p1.eat() // 吃东西
        //    p1.learn()//报错   undefined is not a function
        /* 思考:  p1自己没有toString, p1的原型也没有toString, 但是为什么不报错呢?
        原因:  p1的原型的原型有toString
        */
        p1.toString()

        /* 如何查看实例对象原型 : 两行 */

        //查看p1的原型
        console.log(p1.__proto__.constructor) //Person
        console.log(Person.prototype === p1.__proto__) //true
        //查看p1的原型的原型
        console.log(p1.__proto__.__proto__.constructor) //Object
        console.log(Object.prototype === p1.__proto__.__proto__) //true
        //查看p1的原型的原型的原型
        console.log(p1.__proto__.__proto__.__proto__) //null

Snipaste_2022-05-01_19-15-22.png

关于内置对象的原型链

        // 数组对象  
        //实例化对象
        let arr = [10, 20, 30] //new Array(10,20,30)
        console.log(arr)
        //查看原型
        console.log(arr.__proto__.constructor) //Array
        console.log(arr.__proto__ === Array.prototype); //true
        //查看原型的原型
        console.log(arr.__proto__.__proto__.constructor); //Object
        console.log(arr.__proto__.__proto__ == Object.prototype)

        // 字符串对象
        let str = new String('abc')
        console.log(str.__proto__.constructor); //String
        console.log(str.__proto__ === String.prototype); //true
        //查看原型的原型
        console.log(str.__proto__.__proto__.constructor); //Object
        console.log(str.__proto__.__proto__ == Object.prototype) //true
        console.log(str.__proto__.__proto__.__proto__); //null
        // console.log(str.__proto__.__proto__.__proto__.constructor); //报错
    </script>

[总结一下:原型链作用就是继承] 这是一道很经典的面试题可以多看看欢迎各位大佬博主来看看补充补充

每日鸡汤

当你最困难的时候就是离成功不远的时候,如果你遇到困难就后退,那就算成功已到彼岸,它也会与你⽆缘


src=http___www.sshjz.com_wp-content_uploads_2020_09_174b5cca7b856d75b030b7b8cb16022c.jpg&refer=http___www.sshjz.webp