zoukankan      html  css  js  c++  java
  • 理解Javascript的原型链

    要理解原型链,首先要清楚理解以下几点:

      1.所有函数都事Function的实例化,都包含prototype属性,即原型对象。

      2.所有对象都有__proto__属性,该属性指向对象构造函数的prototype原型对象。

      3.prototype原型对象的constructor属性指向它所在的原型对象的构造函数,即构造函数本身。

      4.prototype是针对函数说的,__proto__是针对对象说的。

      5.函数本身也是对象。

    认识到以上几点,我们先看一下原型链:

    function setName() {
            this.name = 'mark';
        }
    
        function setAge() {
            this.age = 20;
        }
    
        setAge.prototype = new setName();
    
        var obj = new setAge();
        console.log(obj.name,obj.age);//mark 20
    
        console.log(obj.constructor === setName);//true
      

    上面代码我们使用构造函数setAge()实例化一个对象obj,其中,age由构造函数写入,而name属性是有setAge的原型对象setName写入的。obj.constructor === setName 返回true是因为,在obj对象的构造函数中,并没有直接的consructor,它的constructor属性是通过__proto__属性继承的,而__proto__指向obj的构造函数的prototype对象,即setAge.prototype,也就是setName,所以会返回true。

    那么,最简单的一条原型链就应该为,实例对象《==  构造函数 《==  构造函数原型对象 《==   Object   《==   Object.prototype   《==   null,而原型对象中的构造函数(constructor属性)都等于它所在的构造函数。

    function createO() {
            this.x = 1;
        }
    
        var o = new createO();
    
        console.log(o.__proto__);//createO.prototype
        console.log(o.__proto__.__proto__);//Object
        console.log(o.__proto__.__proto__.__proto__);//null

    那么说白了,原型链的本质就是实例化对象和原型对象(prototype)之间形成的继承链条。

    再说一下继承:

    使用原型链最常用的继承方式:

    复制代码
     1 function Person(name){
     2    this.name = name;
     3 }
     4 Person.prototype.showName = function(){
     5    console.log(this.name);
     6 }
     7 function Student(name,age){
     8    Person.call(this,name);
     9    this.age = age;
    10 }
    11 Student.prototype = new Person();
    12 Student.prototype.contructor = Student;
    13 Student.prototype.showAge = function(){
    14     console.log(this.age);
    15 }
    16 var stu = new Student('张三',12);
    17 stu.showName();
    18 stu.showAge();

    参考文献:https://www.cnblogs.com/DF-fzh/p/5619319.html

    https://www.cnblogs.com/Yirannnnnn/p/4896542.html#undefined

  • 相关阅读:
    微软软件下载
    FTP主动连接与被动连接
    Linux下grep显示前后几行信息
    cacti 安装过程中“ERROR: 您的MySQL TimeZone 数据库未被填充. 请在继续之前填入此数据库.”
    Cacti安装详细步骤
    Linux 踢掉其他终端用户
    迁移设备存储报的错误及解决方式
    sql_mode :(STRICT_TRANS_TABLES与STRICT_ALL_TABLES 区别)
    Nginx日志按日期切割详解(按天切割)
    git pull冲突:commit your changes or stash them before you can merge.
  • 原文地址:https://www.cnblogs.com/zhangbob/p/9235402.html
Copyright © 2011-2022 走看看