js创建对象数组_JS三座大山之原型

b7c641203909dfcd41e8054f2bd713d3.png

JS原型

  • 名词解释:原型是一种在开发生命周期的早期显示应用程序或产品的外观和行为的模型
JS一共有三座大山:原型、this、AJAX

了解一个知识必须知其然且知其所以然

举个例子:
let obj1 = {
    name: '小孟',
    age: '22',
    run: ()=>{
        console.log('我会跑')
    },
    jump: ()=>{
        console.log('我会跳')
    }
}
let obj2 = {
    name: '小宇',
    age: '23',
    run: ()=>{
        console.log('我会跑')
    },
    jump: ()=>{
        console.log('我会跳')
    }
}

88d3cfe9048aa96d6bdfa03267c163c5.png

创建的两个对象都是中国人,姓名和年龄不一样,跑方法和跳方法也不一样,如果这样创建一百人甚至一千人的话,会很耗费内存,而且代码会很冗余,所以JS之父想了一个办法,把跑方法和跳方法这类的共同属性包含在一个隐藏属性里,在每次创建对象的时候就把这个隐藏属性自动复制在这个对象上,这个隐藏属性的名字就叫原型,它储存着一个对象的地址,这个对象里就有他们的共有属性

所以上述代码可改写为
let person = {
    run: ()=>{
        console.log('我会跑')
    },
    jump: ()=>{
        console.log('我会跳')
    }
}
let obj1 = {
    name: '小孟',
    age: '22',
    __proto__: person
}
let obj2 = {
    name: '小宇',
    age: '23',
    __proto__: person
}

acae1b3bbec9e60642daa765d5267587.png

这样 obj1 和 obj2 用的就是同一对象里的属性

所以JS里原型的诞生给每一个使用它的人带来了极大的方便,这就是原型的强大之处

JS原型的三大定理

学过JS的人都说原型很难理解,其实不然,原型只需要弄明白下面的这三大定理就可以了

1. 对象.__proto__ === 其构造函数.prototype

2. Object.prototype 是所有对象的(直接或间接)原型

3. 所有函数都是 Function 构造的

举个例子
let arr = [1,2,3]
arr.__proto__ === Array.prototype
arr.__proto__.__proto__ === Object.prototype
Array.__proto__ === Function.prototype

1848e208bbc65af9091258e3bea88c03.png

arr是由 Array 构造数来的数组对象,根据公式1,可以证明第一条成立

又因 Array 的 prototype 也是一个对象,所以根据公式2,可以证明第二条成立,第二条就是所谓的原型链

Array 是一个函数,那么根据公式1 反推出公式3,第三条成立

值得注意的是,对象的原型也是对象,那么原型的原型是什么呢,可以用代码验证一下

4149888325acf95658b307bb0d569488.png

可以看出原型的原型是 null,这其实是被指定的,这个对象的原型其实就是所有原型的

7df120562c0fbe577e53f2f82c063b84.png
只要理解了本图,JS的原型就基本理解了,这个就是JS世界

学习JS原型要有足够的耐心,并非一朝一夕能完全理解,希望我这篇博客可以帮助到正在学习原型的人

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值