• 原型与原型链


    1.函数与对象的关系

    • 函数是一种对象    // let fun=function(){}
    • 对象都是通过函数实例化来创建的    //let obj1={};   let obj2=new Object()

    注:函数与对象是通过函数的一个属性来作为关系纽带的,每个函数都有一个prototype原型属性,这个原型属性本身也是一个包含各种属性的对象,默认情况下,它都会有一个constructor属性,这个属性就代表了当前这个函数

    2.原型与原型链

    • 原型 

    prototype:一般称为显式原型   

    __proto__:一般称为隐式原型

    每一个函数创建之后,都会有一个prototype属性,这个属性表示函数的原型对象,同时这个原型对象本身有一个 constructor属性,指向这个函数本身。除此之外每个对象都有一个隐藏的原型对象__proto__,

    隐式原型表示创建这个对象的函数的prototype。

    function yl(){}
    yl.prototype.a='1';
    yl.prototype.b='2';
    console.log(yl.prototype)   //{a: '1', b: '2', constructor: ƒ}
    
    let lwl=new yl()    //lwl是yl的实例对象
    console.log(lwl.__proto__)   //{a: '1', b: '2', constructor: ƒ}
    • 原型链

     当我们访问一个对象的属性时,js会先在这个对象定义的属性中查找,如果没有找到,就会沿着__proto__这个隐式原型关联起来的链条向上一个对象查找,这个链条就是原型链。

     注:原型链某种意义上就是让一个引用类型继承另一个引用类型的属性和方法。

    作用:实现对象与对象之间的继承。有了继承,就可以编写出可以复用的组件,多个子组件从同一个父组件中继承已有的属性和方法,然后扩展子组件的方法和属性,就可以灵活的编写出各种组件。

    function Fun1(){}
    
    Fun1.prototype.abc='1';
    Fun1.prototype.bca='2';
    Fun1.cab='3'
    
    let fn1=new Fun1();
    fn1.xyz='4';
    fn1.bca='5';
    
    console.log(fn1.abc)    //1
    console.log(fn1.bca)   //5
    console.log(fn1.cab)   //undefined
    console.log(fn1.xyz)   //4
    
    fn1------__proto__------->Fn1.prototype----------->constront------->Fn1-----__proto__------>Function.prototype-------->constront----->Function

    console.log(fn1.hasOwnProperty('xyz'))    //true
    console.log(fn1.hasOwnProperty('abc'))   //false
    console.log(fn1.hasOwnProperty('cab'))   //false

    console.log(Function instanceof Object)   //true
    console.log(Function instanceof Function.prototype)   //报错
    console.log(Object instanceof Function)   //true

    console.log(Object.prototype.__proto__)    //null

      

  • 相关阅读:
    Spring-web初始化流程简图
    记一次升级Tomcat
    Spring-Task思维导图
    2019的第一个工作日
    RocketMQ专题2:三种常用生产消费方式(顺序、广播、定时)以及顺序消费源码探究
    RocketMQ专题1:入门
    博客搬家到云栖社区
    ActiveMQ专题2: 持久化
    ActiveMQ专题1: 入门实例
    linux下怎么卸载自带的JDK和安装想要的JDK
  • 原文地址:https://www.cnblogs.com/susu2020/p/16019396.html
Copyright © 2020-2023  润新知