Javascript高级 | 第五章原型链

最新推荐文章于 2024-10-30 19:10:39 发布

风离X

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量59

点赞数

文章标签： javascript 原型模式前端

本文链接：https://blog.csdn.net/weixin_44008395/article/details/126180571

版权

本文解析了JavaScript中对象的__proto__和prototype的区别，介绍了私有属性、静态属性的概念，并通过实例说明构造函数与原型对象如何创建对象。还涵盖了数组的原型查找机制和函数的原型关联。

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

5.1 公有属性和私有属性

只要是一个对象，它身上一定有一个__proto__属性，他对应的值优势一个对象，__proto__叫隐式原型。

<script>
    let obj = {
        name: 'wc',
        age: 18
    }
    // hasOwnProperty判断一个属性是否是私有属性
    console.log(obj.hasOwnProperty('name')); // true
    console.log(obj.hasOwnProperty('age'));  // true
    console.log(obj.hasOwnProperty('hasOwnProperty'));  // false
    
    // 去obj中找abc，先去自己的私有属性里找，如果没有就沿着原型链在公有属性里面找
    console.log(obj.abc)
</script>

数组也有自己的__proto__

<script>
    let arr = ['wc', 'xq'];
    // 先去私有属性找，找不到
    // 沿着__proto__去它的公有属性中找，找不到
    // 再沿着__proto__的__proto__去它的公有属性的公有属性找，找到了
    console.log(arr.valueOf());
    
    // in判断一个属性是否属于某个对象，不管是公有和私有
    console.log('push' in arr);  // true
</script>

每一个函数都有一个prototype属性

prototype：显示原型
__proto__：隐式原型

一个函数构造器的prototype属性和通过这个函数创建出来的对象的__proto__所指向的是同一个对象（原型对象），原型对象上有一个constructor属性，指向函数本身。

<script>
    let arr1 = new Array('wc', 'xq');
    // 函数的显示原型和对象的隐式原型指向同一个对象
    console.log(Array.prototype === arr1.__proto__); // true
    console.log(arr1.__proto__.constructor === Array) // true
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qpk4057B-1659688249866)(C:\Users\fengli\AppData\Roaming\Typora\typora-user-images\image-20220723162129065.png)]

5.2 使用构造函数+原型对象创建对象

<script>
    function Coder(color) {
        this.color = color;
    }
    Coder.prototype.start = function () {
        console.log('start...');
    }
    let obj1 = new Coder('red');
    let obj2 = new Coder('blue');
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xUhXnthk-1659688249867)(C:\Users\fengli\AppData\Roaming\Typora\typora-user-images\image-20220723163825472.png)]

5.3 静态属性

静态属性只有类才能访问，不能通过实例进行访问

<script>
    // new 类 => 对象
    // 对象上的属性叫实例属性   对象就是实例
    // 类上的属性，叫静态属性
    // 函数有多种角色

    function Person(name) {
        this.name = name;
        Person.total = 100
    }
    let wc = new Person('wangcai');
    console.log(wc.name);   // name就是实例属性
    console.log(Person.total); // Person是类上的属性，叫静态属性
</script>