zoukankan      html  css  js  c++  java
  • Js 原型和原型链

    Js中通过原型和原型链实现了继承


    Js对象属性的访问,首先会查找自身是否拥有这个属性

    如果查到,则返回属性值,如果找不到,就会遍历原型链,一层一层的查找,如果找到就会返回属性值

    直到遍历完Object.prototype还没有找到,则返回undefined

    对象中有:__proto__(原型),函数也是对象,所以也有__proto__

    构造函数中有:prototype对象,默认有一个叫做constructor的属性,指向这个构造函数本身。

    对象的__proto__(原型)引用了创建这个对象的构造函数的prototype对象

     1 function Baz() {}
     2 
     3 Baz.prototype.sayAge = function() {
     4     console.log(this.age);
     5 }
     6 
     7 function Bar() {
     8     this.name = 'Gary';
     9     this.age = 20;
    10 }
    11 
    12 Bar.prototype = Object.create(Baz.prototype);
    13 Bar.prototype.constructor = Bar;
    14 Bar.prototype.sayName = function() {
    15     console.log(this.name)
    16 }
    17 
    18 var obj = new Bar();
    19 
    20 console.log(obj.sayAge()); //20

    分析:

    obj对象由Bar构造函数创建,所以obj对象的__proto__(原型)指向Bar.prototype

    在Bar.prototype中使用object.create(),使得Bar.prototype的__proto__指向了Baz.prototype

    Baz.prototype是一个对象,由构造函数Object创建,所以Baz.prototype的__proto__指向了Object.prototype

    特殊的:最后Object.peototype的__proto__指向null

    由此构成的一条原型链:obj -> Bar.prototype -> Baz.prototype -> Object.prototype -> null

    根据开头的对象属性查找规则,obj调用sayAge打印出了20

    几个原型指向:

    function fn(){...}  ===>>> var fn = new Function(...)

    所以函数的__proto__指向Function.prototype

    同理:

    function Object(){} ===>>> var obj = new Object()

    function Function(){} ===>>> var fn = new Function()

    构造函数的__proto__指向Function.prototype

  • 相关阅读:
    redis教程(三)-----redis缓存雪崩、缓存穿透、缓存预热
    dubbo入门学习(三)-----dubbo整合springboot
    dubbo入门学习(二)-----dubbo hello world
    spring cloud深入学习(十二)-----Spring Cloud Zuul网关 Filter、熔断、重试、高可用的使用方式
    spring cloud深入学习(十三)-----使用Spring Cloud Sleuth和Zipkin进行分布式链路跟踪
    C#关键字params
    C#的lock关键字
    C#的yield关键字
    C#关键字ref和out
    C#的初始化器
  • 原文地址:https://www.cnblogs.com/Gary-Guoweihan/p/6253051.html
Copyright © 2011-2022 走看看