原型,原型链说明

最新推荐文章于 2025-04-20 16:45:26 发布

泥巴客

最新推荐文章于 2025-04-20 16:45:26 发布

阅读量292

点赞数

分类专栏： javascript 文章标签：原型 javascript prototype __proto__

本文链接：https://blog.youkuaiyun.com/zhu_lizhen/article/details/128800188

版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

<!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>原型,原型链</title>
</head>

<body>
    <h2>原型,原型链（链接点）</h2>
    <script type="text/javascript">

        /**
         *  对应名称
         *  prototype : 原型
         *  __proto__ : 原型链（链接点）
         * 
         * 从属关系
         * prototype  ->函数的一个属性：对象{}
         * __proto__  ->对象object的一个属性：对象{}
         * 对象的 __proto__ 保存的是该对象的构造函数的 prototype
         * 
        **/

        //定义一个函数
        function Test() {
            this.a = 1
        }

        //输出函数Test的prototype属性
        console.log(Test.prototype);

        Test.prototype.b = 2

        //实例化一个对象
        const tt = new Test();
        //输出对象tt的__proto__属性
        console.log(tt.__proto__);

        //发现对象的__proto__属性 等于 构造函数的prototype 属性
        console.log(tt.__proto__ === Test.prototype);

        //构造函数的prototype属性也是一个对象，那它也存在 __proto__属性
        console.log(Test.prototype.__proto__);

        //上述中得出的 __proto__属性 等于 object 的 prototype 属性
        console.log(Test.prototype.__proto__ === Object.prototype);

        //Object.prototype 也是一个对象，但却没有__proto__，已经到原型链顶层
        console.log(Object.prototype.__proto__);   //null

        Object.prototype.c = 3

        /**
         * tt{
         *    a:1,
         *    __proto__:Test.prototype = {
         *          b:2,
         *          __proto__:Object.prototype = {
         *              c:3
         *          }
         *    }
         * }
         * 
         * */

        // 根据原型链一层与层往上找：
        // 实例对象→→→构造函数原型对象→→→Object原型对象
        console.log(tt.a);
        console.log(tt.b);
        console.log(tt.c); 

        //判断本身是否有属性
        console.log(tt.hasOwnProperty('a'));
        console.log(tt.hasOwnProperty('b'));
        console.log(tt.hasOwnProperty('c'));

        //判断原型链上是否有属性
        console.log('a' in tt);
        console.log('b' in tt);
        console.log('c' in tt);
    </script>
</body>

</html>