简单易懂原型链

87 阅读1分钟

前言:理论上来说会不会英文对于编程来其实无关紧要,但是对于某些属性来说还是直接用原本的英文属性才能表达的更清晰

prototype :原型

_proto_: 原型链(连接点)

从属关系:

prototype ->属于函数, 是属性的一个属性->是一个对象  { }

__proto__ ->属于对象Object的一个属性 ->也是一个对象 { }

是如何组成了链条关系?

对象的_proto_ 保存着该对象的构造函数prototype

function Test(){
    return `小吴要努力`
}

console.log(Test.prototype)
// 输出:
    // constructor: ƒ Test()
    // [[Prototype]]: Object

<!--可见函数只要一声明就是有prototype属性的-->

const test = new Test()
console.log(test.__proto__)

//输出:
    // constructor: ƒ Test()
    // [[Prototype]]: Object   
<!--因为test的构造函数是Test(),所以:-->

console.log(test.__proto__===Test.prototype) 
//输出:true

console.log(Test.prototype.__proto__ === Object.prototpy) 

<!--Object是一个构造函数-->

console.log(Object.prototype.__proto__)
输出:null
<!--Object.protptpy属于原型链的最顶层-->
---
当Test()变更:
function Test(){
    this.a = 1,
    prototype.b = 2
}
Object.prototype.c = 3
console.log(test)
//输出:
    test{
        a:1,
        __proto__:  {
            Test.prototype = {
                __proto__:Object.protoyype = {
                    x __proto__
                    c:3
                } 
                b:2
            }
        }
    }

问题来了:test.a test.b test.c 能否打印出来?

可以的,为什么呢

因为当我test在查找b的时候没有发现b属性,就会往自己的__proto__属性上查找.我们的原型链上可以从底部往上继承从底部一层一层往上寻找自己的值 当你只要有想要的值就会直接取,不然就会继续往上寻找

function与Object的特殊性

console.log(Test.__protp__)
// 输出: ƒ () { [native code] }
<!--是一个函数-->

consloe.log(Test.__proto__ === Function.prototype)
//输出:true

众所周知Function既是对象也是函数,所以我们尝试着打印一下function的prototype与__proto__

console.log(Function.__proto__)
//输出: ƒ () { [native code] }

console.log(Function.prototype)
//输出: ƒ () { [native code] }

console.log(Function.__proto__===Function.prototype)
//输出: true

突然灵光一闪 当我们创建一个对象的时候

const obj = { }

是不是相当于

const obj  = new Object()
console.log(Typeof Object)   
console.log(Object.__proto__)

证明了Function构造了Object 再参照上述的 得出结论

consloe.log(Function.__proto__ === Object.__proto__)

查找自身的空间里是否有A属性

consloe.log(test.hasOwnProprety('a')

查找链上是否有a、b、c属性

consloe.log(a in test)