Javascript高级 | 第五章 原型链

本文解析了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>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值