js原型知识梳理(二)

最近重新梳理了一下原型的知识,想分享一下,希望对那些被原型,原型链,构造函数,实例对象等关系满头包的童鞋有些帮助~~~
废话不说了 上代码

 //原型 prototype
        function Man(name,age){
            this.name=name,
            this.age=age
        }
        let Person={
            name:'李四',
            age:18,
            hobby:'reading',
            //...
        }
        Man.prototype=Person  //这里 Person 就是Man的原型 
        //原型是指构造函数通过prototype访问的属性

        let boy=new Man() //boy为Man的实例对象 
        //boy是Man这个构造函数实例化出来的对象
        console.log(boy)

这是boy的打印结果
js原型知识梳理(二)_第1张图片

再打印一下 boy.__proto__ 我们可以看到boy的__proto__是Man的原型 Person对象

image.png

console.log(boy.__proto__==Man.prototype)// true 
//boy这个实例化对象的原型和Man的原型指向同一个对象`

继续打印 boy._proto_._proto_和boy._proto_._proto_._proto_

console.log(boy.__proto__.__proto__)//Object
//可以看到boy的原型的原型是Object对象,再往上找为空
        console.log(boy.__proto__.__proto__.__proto__)//null
        //这种通过_proto_逐层向上访问的链式关系称为原型链

js原型知识梳理(二)_第2张图片

下面是原型,原型链,构造函数的关系图
我们可以看到,原型链就是通过_proto_连接的链式继承关系

js原型知识梳理(二)_第3张图片

你可能感兴趣的:(javascript,前端,prototype)