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

  • 相关阅读:
    洛谷 P5057 [CQOI2006]简单题 题解
    洛谷 P3368 【模板】树状数组 2 题解
    洛谷 P3374 【模板】树状数组 1 题解
    洛谷 P2023 [AHOI2009]维护序列 题解
    洛谷 P2253 好一个一中腰鼓! 题解
    求最长不下降/上升/下降/不上升子序列
    [SQL Server]Index/deadlock
    Ubuntu 14.04下从源码安装qt4.x
    Ubuntu系统下Import cv2提示no modules ...错误
    Ubuntu 14.04下安装CUDA8.0
  • 原文地址:https://www.cnblogs.com/Gary-Guoweihan/p/6253051.html
Copyright © 2011-2022 走看看