• JavaScript原型链

    原型链（如下所示）：
    请添加图片描述
    image-20220414103934930

    看不太懂，甚至是一脸懵逼？？？对不对

    • 那可以花点时间认真看完本篇文章哦~

    文章目录

    一 、原型

    1-1 constructor构造函数

    1. 对象原型(__proto__)和构造函数(porototype)原型对象都有一个属性 constructor 属性
      • constructor ： 构造函数，指的是构造函数本身

    关于对象原型(__proto__)和构造函数(porototype)原型对象的介绍在第二章节哦！！

    1. image-20220414102709626
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 公共属性定义到构造函数里面，公共方法放到原型对象身上
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        // Star.prototype.sing = function() {
        //     console.log('我会唱歌');
        // }

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

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    1-2 构造函数 和 原型对象、实例三者之间的关系

    1. image-20220414103320948

    1-3 原型链

    1 image-20220414103749438

    • Star原型对象里面的__proto__原型指向的是 Object.prototype
    • Object.prototype原型对象里面的__proto__原型 指向为 null
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        Star.prototype.sing = function() {
            console.log('我会唱歌');
        }
        var ldh = new Star('刘德华', 18);
        // 1. 只要是对象就有__proto__ 原型, 指向原型对象
        console.log(Star.prototype);
        console.log(Star.prototype.__proto__ === Object.prototype);
        // 2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype
        console.log(Object.prototype.__proto__);
        // 3. 我们Object.prototype原型对象里面的__proto__原型  指向为 null
    </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    1. 原型链 ：

      image-20220414103934930

    1-4 JavaScript的成员查找机制

      • 访问一个对象的属性、方法时，首先查找对象本身 有没有这个属性
      • 没有就查找它的原型（__proto__指向的prototype原型对象）
      • 还没有就查找原型对象的原型（Object的原型对象）
      • null

    2. __proto__对象原型的意义： 为对象成员查找机制提供一个方向，或者说一条路线

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

        }
        Star.prototype.sing = function() {
                console.log('我会唱歌');
            }
            // Star.prototype.sex = '女';
            // Object.prototype.sex = '男';
        var ldh = new Star('刘德华', 18);
        console.log(ldh.sex);
    </script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14

    1-5 原型对象this指向

    1. 原型对象函数里面的this指向 实例对象（new 构造函数()）

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

    ldh.sing();

    // 2. 原型对象函数里面的this指向的是 实例对象
    console.log(that === ldh);
</script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19

    3. image-20220416091430601

    二、 原型对象 prototype和对象原型__proto__

    2-1 构造函数原型对象 prototype

    1. 构造函数的问题 ：
      • 存在浪费内存的问题
      • 单独开辟内存空间
    2. 构造函数原型prototype：
      • 通过原型分配的函数 就是 所有对象 所共享的
      • JS规定，每一个构造函数都有一个prototyoe属性，指向另一个对象
        • 这个prototype就是一个对象。所有属性和方法，都会被构造函数所拥有
      • 直接将不变的方法，直接定义在prototype对象上，所有对象的实例就可以共享这些方法
    3. image-20220413205838602

    2-2 对象原型_proto_

    1. 对象身上系统自己添加一个__proto__，指向我们构造函数的原型对象
    2. 对象都有一个属性 __proto__ 指向 构造函数的prototpe原型对象
      • 对象可以使用构造函数prototype原型对象的属性和方法
      • 因为对象有__protot__原型的存在，=== prototype
      • image-20220414101436897
    3. 方法 的 查找方法：
      • 首先先看ldh 对象身上 是否有 sing方法 ，有的话就执行对象上的sing方法
      • 没有sing方法，就是构造函数原型对象prototype身上找
    4. image-20220414101834600
  • 相关阅读:
    JAVA实现数学函数图像
    78.子集--77.组合
    JavaEE初阶学习:JVM(八股文)
    【Linux】第十三章 多线程（线程互斥+线程安全和可重入+死锁+线程同步）
    “湖仓一体架构及其应用”写作框架，系统架构设计师
    Spring ApplicationListener源码版
    httpsok-v1.13.0支持nginx证书部署管理
    Java设计模式 _创建型模式_工厂模式(普通工厂和抽象工厂)
    如何用一款产品推动「品牌的惊险一跃」？
    【Shell】循环结构——for和while循环实例
  • 原文地址：https://blog.csdn.net/hannah2233/article/details/125481760