web前端练习22----js中的原型对象prototype,原型链（重要）

最新推荐文章于 2022-05-18 21:38:49 发布

zhaihaohao1

最新推荐文章于 2022-05-18 21:38:49 发布

阅读量359

点赞数 1

分类专栏： web前端2018

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/102531036

版权

本文深入探讨JavaScript中的原型对象和原型链。通过原型对象，我们可以为构造函数的实例共享属性和方法，减少内存消耗。当我们访问对象的属性或方法时，会沿着原型链向上查找，直至找到Object的原型对象。文中还通过代码示例和图解阐述了构造函数与原型对象的关系，以及`instanceof`操作符的工作原理。

摘要由CSDN通过智能技术生成

原型对象原理解析：

我们创建的每一个函数，解析器都会向函数中添加一个属性 prototype
这个属性对应着一个对象，就是原型对象。

如果函数作为普通函数，调用 prototype 没有任何作用

当函数以构造函数的形式调用时，它所创建的对象都会有一个隐含的属性 __proto__，
我们可以通过 __proto__ 来访问原型对象

原型对象就相当于一个公共区域，同一个构造函数的实例都能访问到这个原型对象
我们可以将对象共有的内容，统一设置到原型对象中

创建构造函数时，可以将对象共有的属性和方法，统一添加到构造函数的原型对象中，
这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了

当我们访问对象的一个属性或者方法时，他会先在对象自身中寻找，如果有则直接使用，
如果没有则会去原型对象中寻找，如果有则直接使用。
如果原型对象中也没有，则会在原型对象的原型对象中寻找，一层一层往上找，直到找到Object的原型对象，
如果没有，就没有这个属性或方法

图解：

下面写一些具体例子：

拿到原型对象：

        // 拿到原型对象：
        function method1() {
            // 构造函数
            function Person() {

            }
            // 原型对象
            let yuanxing = Person.prototype;

            // 实例化对象
            let person1 = new Person();
            // 通过对象找到原型对象 person1.__proto__
            console.log(yuanxing == person1.__proto__);

            // 任何对象都可以找到原型对象 person2.__proto__
            let person2 = new Person();
            console.log(yuanxing == person2.__proto__);

        }

调用对象属性和方法，先在自身找，自身没有在原型对象中找

        //调用对象属性和方法，先在自身找，自身没有在原型对象中找
        function method2() {
            // 构造函数
            function Person() {

            }

            // 向原型对象中添加属性和方法
            Person.prototype.name = 'zhh';
            Person.prototype.method = function (args) {
                console.log('原型对象的方法>>>' + args);
            }

            // 调用对象属性和方法，先在自身找，自身没有在原型对象中找