设为首页 加入收藏

TOP

原来你是这样的---原型和原型链(一)
2019-09-17 19:09:58 】 浏览:114
Tags:原来 这样 --- 原型

  把JS的原型和原型链重新梳理了一遍,然后动手绘制了一张流程图,原型和原型链的秘密就藏在这张图上。绘制流程图的好处就是在绘制的过程中,既检验自己对这个知识点的掌握状况,同时在绘制过程中会对这个知识点印象更深刻,理解更透彻,建议每个感兴趣的小伙都来身体力行一次。

  为了更清晰的了解原型链的走向,先创建三个构造函数,建立多重继承关系,分别为Person、ChinaPerson、ProvincePerson,它们之间的继承关系为:ProvincePerson 继承了 ChinaPerson, ChinaPerson继承了Person。接下来,我们

  1. 先贴上这份多重继承的代码;
  2. 绘制流程图,根据流程图剖析原型链的秘密;
  3. 写些测试代码验证;

  先贴上代码,每个子构造函数会在继承父级的基础上,分别在构造函数里面和原型里面,自定义添加自己的属性和方法;另外在Person原型上写上和构造函数里面同名的属性和方法,用来验证同名方法名时,构造函数里面的方法和原型上的方法哪个优先执行;在ProvincePerson上会重写从父级继承的方法,侧面粗略展示下面向对象的多态特性。

/**
 * java script的多级继承和多态、原型和原型链的体现
 * */
//1.1 构造函数:人(Person)
function Person(name){
    this.name = name ? name : "人类";
    this.methodPerson = function(){
        console.log("Person构造函数里面的方法methodPerson-->我的标签:" + this.name);
    }

    console.log("********Person 构造函数 初始化********");
}
//给Person的原型上添加属性和方法
Person.prototype.age = 18;
Person.prototype.run = function(){
    console.log("Person原型方法run-->name: " + this.name + ", age: " + this.age + ", 欢快的run");
}
//问题:如果构造函数的原型里面的属性和方法,和构造函数的属性和方法同名,实例对象调用属性和方法时执行哪个?
//Person原型的name和Person构造函数的name,实例对象调用哪个?
Person.prototype.name = "炎黄子孙";
Person.prototype.methodPerson = function(){
    console.log("Person原型的methodPerson方法-->标签:" + this.name + ", age: " + this.age);
}


//1.2 构造函数:中国人(ChinaPerson),继承于Person
function ChinaPerson(name, skin){
    Person.call(this, name); //调用父级Person构造函数

    this.skin = skin ? skin : "黄色";
    this.methodChinaPerson = function(){
        console.log("ChinaPerson构造函数里面的方法methodChinaPerson-->肤色:" + this.skin + ", 标签: " + this.name);
    }

    console.log("********ChinaPerson 构造函数 初始化********");
}
//设置ChinaPerson原型指向Person原型,相当于ChinaPerson继承Person
ChinaPerson.prototype = Object.create(Person.prototype);
//设置新原型的构造函数指向自己
ChinaPerson.prototype.constructor = ChinaPerson;

//给ChinaPerson的原型自定义添加属性和方法
ChinaPerson.prototype.hero = "谭嗣同";
ChinaPerson.prototype.write = function(){
    console.log("ChinaPerson原型里面的方法write-->我自横刀向天笑,去留肝胆两昆仑!is who? " + this.hero + ", 标签: " + this.name + ", skin: " + this.skin);
}


//1.3 构造函数:ProvincePerson, 继承于ChinaPerson
function ProvincePerson(name, skin, count){
    ChinaPerson.call(this, name, skin);  //调用父级ChinaPerson构造函数

    this.count = count ? count : 8000;  
    this.methodProvincePerson = function(){
        console.log("ProvincePerson构造函数里面的方法methodProvincePerson-->数量:" + this.count + "万, 肤色:"+ this.skin + ", 标签:" + this.name);
    }
    //重写从父级继承下来的方法methodChinaPerson
    this.methodChinaPerson = function(){
        console.log("ProvincePerson构造函数里面重写父级方法methodChinaPerson....");
    }
    console.log("********ProvincePerson 构造函数 初始化********")
}
//设置ProvincePerson原型指向ChinaPerson原型,相当于构造函数ProvincePerson继承于ChinaPerson
ProvincePerson.prototype = Object.create(ChinaPerson.prototype);
//设置新原型的构造函数指向自己
ProvincePerson.prototype.constructor = ProvincePerson;
//给ProvincePerson的原型上自定义添加属性和方法
ProvincePerson.prototype.feature = "长沙臭豆腐";
ProvincePerson.prototype.eat = function(){
    console.log("Pr
首页 上一页 1 2 3 4 下一页 尾页 1/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇antd Bug记录 下一篇模块化开发

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目