java 三个对象属性值放到一个map里面 js三个对象_构造函数


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('我会跳')
    }
}


java 三个对象属性值放到一个map里面 js三个对象_js创建对象数组_02


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

所以上述代码可改写为 


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


java 三个对象属性值放到一个map里面 js三个对象_构造函数_03


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


java 三个对象属性值放到一个map里面 js三个对象_应用程序_04


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

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

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

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


java 三个对象属性值放到一个map里面 js三个对象_应用程序_05


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


java 三个对象属性值放到一个map里面 js三个对象_构造函数_06

只要理解了本图，JS的原型就基本理解了，这个就是JS世界

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