【JS】用女娲造人来理解原型对象

一、JS的一个特点
可以动态的给对象添加属性或者方法

let obj = {} //定义了一个空对象
console.log(obj)
obj.name = "玛玛哈哈" //添加属性
obj.test = function() {
        console.log("我是玛玛哈哈哈哈哈哈哈")
    } //添加方法
console.log(obj)

二、原型对象

 //  只要我们创建一个函数，该函数就会自动获得一个prototype属性，这个属性指向函数的原型对象。
function fun() {

}
console.log(fun.prototype, typeof fun.prototype);

从上图我们可以看出，函数有一个prototype属性，这个属性下面有一个constructor属性，constructor属性又指向函数对象Fn。

原型对象：(fun.prototype) 函数的prototype所指向的对象
原型对象中有一个constructor属性，它指向函数对象

设函数对象的名称为fun，fun有一个属性，名为prototype，其值指向fun的原型对象fun.prototype。然后fun.prototype下有一个属性，名为constructor，其值指向fun函数，即构造函数和它的原型对象相互引用。

相互引用（个人理解）
小红手里有一个本子（属性），里面记着小明的号码，小红可以通过这个本子联系到小明；小明手里同样有一个本子（但不是同一本），里面也有小红的号码，小明也可以通过这个本子找到小红。

原型的作用
函数的所有实例对象自动拥有原型中的属性或者方法
给原型对象添加属性（一般添加方法）是为了给实例对象使用。

以女娲造人为例，女娲造了一个泥潭（定义函数对象），然后开始造人，造出了小明，小红，小白（创建了三个实例），但是这仨都不会说话，女娲只好一个一个教，先教小红说话（动态添加自定义方法，即小红.说话=function(){}），然后又去教小明说话，然后到教小白的时候呢，女娲就想，我这样一个个教，要教到什么时候，哪还有时间甩泥巴呢！干脆我往泥巴里加点料（给原型添加方法），让这群泥崽子造出来的时候就自己会说话，不用我教，这多好呀~然后女娲就往泥巴里撒了些灰，再用藤条沾上泥浆，一甩，漫山遍野的人类被造出来了，都喊着女娲“娘啊娘啊”，女娲欣慰的笑了，终于不用教他们说话了。

上面的例子可以用代码表示为：

function CreateHuman() {} //定义函数对象
let xiaohong = new CreateHuman(); //创造了小红
let xiaoming = new CreateHuman(); //造了小明
let xiaobai = new CreateHuman(); //小白
//教小红说话
xiaohong.speak = function() {
    console.log("小红会说话啦");
}
xiaohong.speak(); //小红说话
xiaoming.speak(); //小明和小白还不会说话，所以报错
xiaobai.speak();

function CreateHuman() {} //定义函数对象
let xiaohong = new CreateHuman(); //创造了小红
let xiaoming = new CreateHuman(); //造了小明
let xiaobai = new CreateHuman(); //小白
//教小红说话
xiaohong.speak = function() {
    console.log("小红会说话啦");
}
xiaohong.speak(); //小红说话
//然后继续教小明和小白说话
xiaoming.speak = function() {
    console.log("小明会说话啦");
}
xiaobai.speak = function() {
    console.log("小白会说话啦");
}
xiaoming.speak(); //小明说话
xiaobai.speak(); //小白说话

//此时女娲陷入了沉思，决定往泥潭里撒灰
CreateHuman.prototype.speak = function() {
    console.log("我天生会说话哦");
};
//重新造人
let lrj = new CreateHuman;
lrj.speak(); //路人甲说话
let lry = new CreateHuman;
lry.speak(); //路人乙说话

然后看一下函数对象CreateHuman的原型对象

function CreateHuman() {} //定义函数对象
CreateHuman.prototype.speak = function() {
    console.log("我天生会说话哦");
};
console.log(CreateHuman.prototype);

多了一个speak方法，这就是给原型添加方法的作用。女娲不用一个一个的教人啦！

下一节：显式原型和隐式原型
https://blog.csdn.net/weixin_44707049/article/details/116256458