JavaScript原型链

最新推荐文章于 2024-11-02 12:42:04 发布

牛小小小婷～

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量258

点赞数 1

分类专栏： # JavaScript 文章标签： javascript 原型模式前端

本文链接：https://blog.csdn.net/hannah2233/article/details/125481760

版权

JavaScript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

本文详细介绍了JavaScript中的原型、原型链、构造函数与实例的关系，以及成员查找机制。通过实例解释了__proto__和prototype的区别，并展示了如何通过原型对象共享方法。此外，还探讨了原型对象中this的指向问题，帮助读者深入理解JavaScript对象的内部工作原理。

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

原型链（如下所示）：

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

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

文章目录

一、原型

1-1 constructor构造函数

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

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

<!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 构造函数和原型对象、实例三者之间的关系

1-3 原型链

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-4 JavaScript的成员查找机制

- 访问一个对象的属性、方法时，首先查找对象本身 有没有这个属性
- 没有就查找它的原型（__proto__指向的prototype原型对象）
- 还没有就查找原型对象的原型（Object的原型对象）
- null
__proto__对象原型的意义：为对象成员查找机制提供一个方向，或者说一条路线

<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-5 原型对象this指向

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

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

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

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

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

2-2 对象原型`_proto_`

对象身上系统自己添加一个__proto__，指向我们构造函数的原型对象
对象都有一个属性 __proto__ 指向构造函数的prototpe原型对象
- 对象可以使用构造函数prototype原型对象的属性和方法
- 因为对象有__protot__原型的存在，=== prototype
方法的查找方法：
- 首先先看ldh 对象身上是否有 sing方法，有的话就执行对象上的sing方法
- 没有sing方法，就是构造函数原型对象prototype身上找