zoukankan      html  css  js  c++  java
  • 【原创】关于对象+原型+继承(三)

    先看几个例子:

     1 function a(name,color){  
     2     this.name=name;  
     3     this.color=color;  
     4     this.geta=function() {    
     5       return('this is a'); 
     6     }
     7 }
     8 a.prototype.price=-100;
     9 a.prototype.rating=3;
    10 a.prototype.getb=function(){
    11     return ("this is another a");
    12 };
    
    15 var tt=new a("ton","red");

     1 tt; //输出:a { name="ton", color="red", price=-100, 更多...} //此处tt输出的更多包括如下图片

     有点绕,理清了就简单多了

     1 a;//输出a(name, color)
     2 
     3 a.prototype;//输出a { price=-100,  rating=3,  getb=function()}
     4 
     5 a.__proto__;//输出function() ,小写的f
     6 
     7 a.constructor;//输出Function(),大写的F
    8 a.constructor.prototype;//输出function() 9 10 a.constructor.prototype===a.__proto__;//输出true 11 12 a.prototype.constructor===a;//输出true 13 14 a.prototype.constructor;//输出a(name, color)
     1 tt.prototype;//输出undefined
     2 
     3 tt.__proto__;//输出a { price=-100,  rating=3,  getb=function()}
     4 
     5 tt.__proto__===a.prototype;//输出true
     6 
     7 tt.constructor;//输出a(name, color)
     8 
     9 tt.constructor.prototype;
    10 //输出a { price=-100,  rating=3,  getb=function()}
    11 
    12 tt.prototype.constructor;//报错TypeError: tt.prototype is undefined

    三者间的关系如下:

    1 tt.constructor===a;//true
    2 
    3 tt.__proto__===a.prototype;//true
    4 
    5 a.prototype.constructor===a;//true
    6 
    7 a.prototype.constructor.prototype===a.prototype;//true

    看下图

    比较懒,随手画了张符,给自己看的,见谅见谅~~~~

    a.prototype=b;//设置原型为b;

    构造器函数a()的原型属性设置为指向b;

    构造器函数新建了一个叫做tt的实例化对象

    并理解为:原型 b 是实例化对象tt的原型

    【还是有点乱,有无高人指点一二】

    最新了解请见:《javascript面向对象编程指南》object-oriented javascript,里面第五章:原型和第六章:继承讲得比博主的涂鸦好多了

  • 相关阅读:
    使用XWAF框架(1)——Web项目的代码分层
    Web框架——XWAF的代码结构和运行机制(4)
    理解Web应用程序的代码结构和运行原理(3)
    获取并安装XWAF框架压缩包(2)
    Angular7教程-06-页面与数据交互
    Angular7教程-05-搭建项目环境
    Angular7教程-04-Angular常用操作(下)
    Angular7教程-03-Angular常用操作(上)
    Angular7教程-02-Angular项目目录及基本文件说明
    Angular7教程-01-Angular开发环境配置
  • 原文地址:https://www.cnblogs.com/pm-dongjian/p/5022306.html
Copyright © 2011-2022 走看看