JavaScript继承定义与用法实践分析

Z时代
2024-01-10
分类：综合

本文实例讲述了JavaScript继承定义与用法。分享给大家供大家参考，具体如下：

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