前端小白学习笔记之JS原型链

首先是构造函数的创建,创建格式跟其他函数没什么区别.就是首字母好像都得要大写

function Man() {
    
}

接下来就是创建实例对象了.一定要注意加上new关键字

const coolMan = new Man();

coolMan也就是实例对象,这里我们可以给他添加一些属性.比如

coolMan.name = "陈佳";
//这时打印一下coolMan看看
console.log(coolMan)
//返回的就是一个对象并且有了name的属性

接下来原型具体是撒呢??我也不是很清楚,感觉他特别抽象,好像就是构造函数的prototype的指向,他也是一个对象.这里一定要注意.只有函数才有prototype

console.log(typeof Man.prototype); //object
//这里如果打印一下Man.prototype
console.log(Man.prototype) 
//结果是 {constructor: ƒ}
           constructor: ƒ Man()
           __proto__: Object

这个打印Man.prototype的结果也就是原型了.那么实例对象 也就是coolMan又该怎么去找原型呢.这里就得用到__proto__(有两个斜杠!每个JS对象都有这个属性)..先打印看看

console.log(coolMan.__proto__)
//结果是{constructor: ƒ}
          constructor: ƒ Man()
          __proto__: Object

没错结果一样!!也就是说构造函数通过prototype去访问原型,而实例对象通过__proto__访问原型.

原型就说了,总不能总让你来看我吧,我也想来看看你.原型就修了一条路名字叫做constructor.哈!!是不是感觉在哪里见过.对啊上面的构造函数的prototype返回的obj里面不就是有一个constructor吗.而且你看看constructor的值不就是指向我们的构造函数Man吗!这里打印看看!

console.log(Man.prototype.constructor === Man)
//返回结果 true
console.log(coolMan.__proto__.constructor === Man); 
//同样是true 

需要注意的是好像原型不能够直接去访问实例对象.

那么接下来就有意思了,原型的原型是什么呢??这里我犯了一个错,我是这么去打印看的

console.log(Man.prototype.prototype);
//结果undefined

我想着为什么这个会undefined呢?原型不应该就是prototype的指向吗.这里我突然想起了,只有函数才能有prototype属性!你Man.prototype上面打印出来是一个对象啊!对象你想查看原型只能用__proto__呀! 然后

console.log(Man.prototype.__proto__);
//返回结果的第一行:constructor: ƒ Object()

这里我们就可以看出来了,跟前面一样! 原来原型的原型的构造函数就是Object呀;这里我们可以同样的来进行一个判定;

console.log(Object === Man.prototype.__proto__.constructor)
// true
//既然Object都是函数了 那么也就可以用prototype指向他所对应的原型了
console.log(Object.prototype === Man.prototype.__proto__) //true

这哈理清楚了,我们再来套娃试试

console.log(Man.prototype.__proto__.__proto__);
//返回null

这里返回null之后也就意味着我们后面已经找不到他的构造函数这些了.而这里通过对象的__proto__属性连接的那三条线,也就是coolMan.__proto__和Man.prototype.__proto__和Man.prototype.__proto__.__proto__这三条线被称为原型链.

结语:本来我也不是太懂了,但是这样笔记一做下来发现豁然开朗!!今后得继续加油呀!!!