构造函数和原型、原型链

最新推荐文章于 2023-08-03 15:56:38 发布

是小佚啊

最新推荐文章于 2023-08-03 15:56:38 发布

阅读量101

点赞数

分类专栏：笔记文章标签： js

本文链接：https://blog.csdn.net/qq_42156918/article/details/108670032

版权

笔记专栏收录该内容

18 篇文章 2 订阅

订阅专栏

ES6之前，对象不是基于类创建的，而是用构建函数的特殊函数来定义对象和他们的特征
对象可以通过以下三种方式创建：
1.对象字面量
2.new Object()
3.自定义构造函数

 <script>
        //1. 利用 new Object() 创建对象
        var obj1 = new Object();

        //2. 利用 对象字面量创建对象
        var obj2 = {};

        //3. 利用构造函数创建对象
        function Star(name, sex) {
            this.name = name;
            this.sex = sex;
            this.sing = function() {
                console.log("我会唱歌");
            }
        }
        var ldh = new Star("刘德华", "男");
        console.log(ldh);
        ldh.sing();
    </script>

构造函数

构造函数是一种特殊的函数，主要用来初始化对象，即对象成员变量赋值，它总与new一起用，我们可以把对象中的一些公共的属性和方法抽取出来，然后封装到这个函数里。
在JS中，使用构造函数需要注意以下两点：
1.构造函数用于创建某一类对象首字母要大写
2.构造函数要和new 一起用才有意义

在new的时候会做四件事：
a.在内存中创建一个空的对象
b.让this指向这个新对象
c.执行构造函数里面的代码，给这个新的对象添加属性和方法
d.返回这个新对象（所以构造函数里面不需要return）

构造函数原型prototype

构造函数方法很好用，但是会存在资源的浪费，因为我们每new一个实例对象就需要开辟一个新的空间，里面的方法函数又是相同的，就会造成资源浪费，我们就希望所有的对象都是用同一个函数这样就可以节省空间了。因此，我们引出了概念：构造函数原型prototype
在这里插入图片描述

<script>
        //1.构造函数的问题
        function Star(uname, sex) {
            this.uname = uname;
            this.sex = sex;
            // this.sing = function() {
            //     console.log("我会唱歌");
            // }
        }
        Star.prototype.sing = function() {
            console.log("我会唱歌");

        }
        var ldh = new Star("刘德华", "男");
        var zxy = new Star('张学友', '男');
        //   console.log(ldh.sing === zxy.sing); //false   比较的是地址 开辟的内存空间不同  但是方法一样 会造成内存浪费
        //构造函数通过 原型分配 的函数 是所有对象共享的
        //每个构造函数都有一个prototype属性  指向另一个对象  注意，这个prototype就是一个对象 这个对象的所有属性和方法 都会被构造函数所拥有
        console.dir(Star);
        // 我们可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法
        // console.log(ldh.sing === zxy.sing); //true
        //2. 一般情况下 我们的 公共属性 定义到 构造函数 里面，公共的方法定义到原型对象身上
    </script>

构造函数通过原型分配的函数是所有对象所共享的
JavaScript规定：每一个构造函数都有一个 prototype 属性，指向另一个对象。（注意：prototype也是一个对象万物皆对象，这个对象的所有属性和方法都会被构造函数所拥有）
我们可以把那些不变的方法，直接定义在prototype对象上，这样所有的实例就可以共享这些方法。
总结：
1.原型是什么？
原型是一个对象我们也称prototype为原型对象
2.原型的作用？
共享方法

对象原型__proto_

介绍完prototype原型对象后我们来介绍 对象原型__proto_（注意左右各为两个下划线）

对象都会有一个属性__proto__ 指向构造函数的prototype对象，之所以我们使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在。
在这里插入图片描述

 <script>
        function Star(uname, sex) {
            this.uname = uname;
            this.sex = sex;

        }
        Star.prototype.sing = function() {
            console.log("我会唱歌");

        }
        var ldh = new Star("刘德华", "男");
        var zxy = new Star('张学友', '男');
        ldh.sing();
        //对象都有一个属性__proto__(两个下划线) 指向构造函数的prototype对象
        console.dir(ldh);
        console.log(ldh.__proto__ === Star.prototype); //true
        //方法查找规则：首先看ldh对象身上是否有sing方法 如果有就执行这个对象上的sing方法
        //如果没有sing这个方法 因为有__proto__的存在，就去构造函数原型对象prototype身上查找sing方法
    </script>

__proto__对象原型和原型对象prototype是等价的

constructor 构造函数

对象原型（proto）和构造函数(prototype)原型对象都有一个属性constructor属性 ,constructor我们称为构造函数，因为它指回构造函数本身。主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指回原来的构造函数。
一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法,我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象constructor就不再指向当前构造函教了。此时，我们可以在修改后的原型对象中，添加个constructor指向原来的构造函数。

 <script>
        function Star(uname, sex) {
            this.uname = uname;
            this.sex = sex;

        }
        // 很多情况下 我们需要手动的利用constructor这个属性指回 原来的构造函数
        // Star.prototype.sing = function() {
        //     console.log("我会唱歌");

        // }
        // Star.prototype.movie = function() {
        //         console.log("我会演戏");
        //     }
        Star.prototype = {
            //如果我们修改了原来的原型对象 ，给原型对象赋值的是一个对象，则必须手动的利用constructor指回原来的构造函数
            constructor: Star, //指回constructor
            sing: function() {
                console.log("我会唱歌");
            },
            movie: function() {
                console.log("我会演戏");
            }
        }
        var ldh = new Star("刘德华", "男");
        var zxy = new Star('张学友', '男');
        console.log(Star.prototype); //有constructor
        console.log(ldh.__proto__); //有constructor
        console.log(Star.prototype.constructor); //原型对象里有constructor指回构造函数
        console.log(ldh.__proto__.constructor);
    </script>

构造函数、实例、原型对象三者之间关系

在这里插入图片描述

原型链

在这里插入图片描述

<script>
        function Star(uname, sex) {
            this.uname = uname;
            this.sex = sex;

        }
        Star.prototype.sing = function() {
            console.log("我会唱歌");
        }
        var ldh = new Star('刘德华', '男');
        //1.只要是对象 就有__proto__原型，指向原型对象   原型对象也是对象哟
        console.log(Star.prototype);
        console.log(Star.prototype.__proto__ === Object.prototype); //true
        //2.我们Star原型对象里面的__proto__原型指向的是Object.prototype
        console.log(Object.prototype.__proto__); //null
        //3.Object.prototype的__proto__指向的是null 最顶层
    </script>

原型链成员查找规则

①当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。

②如果没有就查找它的原型(也就是_ proto_ 指向的prototype原型对象)。

③如果还没有就查找原型对象的原型( Object的原型对象)。

④依此类推一直找到Object为止(null)。

⑤__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

<script>
        function Star(uname, sex) {
            this.uname = uname;
            this.sex = sex;

        }
        Star.prototype.sing = function() {
            console.log("我会唱歌");
        }
        Star.prototype.age = 20;
        Object.prototype.age = 30;
        var ldh = new Star('刘德华', '男');
        ldh.age = 18;
        console.log(ldh.age); //18     就近原则
        //Object.prototype有toString方法
        console.log(ldh.toString());
    </script>

原型对象this指向

构造函数this指向我们实例对象
原型对象里面放的是方法，这个方法里面的this指向的是这个方法的调用者，也就是这个实例对象。

 <script>
        var that;
        function Star(uname, sex) {
            this.uname = uname;
            this.sex = sex;
        }
        Star.prototype.sing = function() {
            console.log("我会唱歌");
            that = this;
        }
        var ldh = new Star('刘德华', '男');
        //1.在构造函数中 里面的this指向对象实例  在这里指向 ldh
        ldh.sing();
        console.log(that === ldh); //true
        //2.原型对象函数里面的this 指向的是  实例对象ldh
    </script>