javascript 继承 -自己动手实践-白红宇的个人博客

发布日期：2021-05-09 04:22:23 浏览次数：15 分类：博客文章

本文共 1942 字，大约阅读时间需要 6 分钟。

javascript 继承，老生长谈的东西，大家应该都很熟悉了，平时工作基本不会直接使用，这段时间不忙，所以补习了下相关基础知识，自己动手实践，加深理解：

基类定义如下：

// base class    function Animal(t)    {      if(typeof t==='string')        this.type=t;      else      {        if(t)            this.type=t.toString();        else            this.type='Animal'      }            this.speak=function(str)      {        if(str)            console.log(this.type+' said '+str);        else            throw "please specify what you want to say!";      }    }

1.原型继承（javascript 类库本身基于原型继承）

String, Number , Boolean 这三大原始类型我们可以很直接的通过prototype 检查到他们继承自Object.

Date, RegExp ,Array 这三应该是间接继承了Object, 他们的prototype属性很特殊：

Date.prototype =Invalid Date

RegExp.prototype=/(?:)/

Array.prototype=[]

原型继承代码如下：（可以看到Mokey 原型链上的Animal和Object）

// Monkey : Animal     function Monkey(name,age)    {      this.name=name;      this.age=age;    }        Monkey.prototype=new Animal('Monkey');        // Example 01    var m=new Monkey('codeMonkey',10);        /*        Monkey:        age: 10        name: "codeMonkey"            __proto__: Animal            speak: function (str)            type: "Monkey"                __proto__: Animal                constructor: function Animal(t)                    __proto__: Object         */    console.log(m.type); // Monkey    console.log(m.name); // codeMonkey    console.log(m.age); // 10    m.speak('hello world') // Monkey said hello world

2. 调用父类构造函数 ( 通过传递子类的this指针，将原本是父类的公开成员直接添加到了子类中，从子类原型链中无法看出继承关系)

// Human:Animal     function Human(id,name)    {       // call base class's constuctor function      Animal.call(this,'Human');             this.id=id;      this.name=name;    }        var h=new Human(1,'leon');        /*    id: 1    name: "leon"    speak: function (str)    type: "Human"        __proto__: Human        constructor: function Human(id,name)            __proto__: Object    */    h.speak('hello world'); // Human said hello world     console.log(h.type); // Human

上一篇：自己动手实现 jQuery Callbacks

下一篇：javascript 用函数语句和表达式定义函数的区别

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章