JavaScript面向对象继承机制
博客专区 > Jia。 的博客 > 博客详情
JavaScript面向对象继承机制
Jia。 发表于1年前
JavaScript面向对象继承机制
  • 发表于 1年前
  • 阅读 29
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

摘要: JavaScript对象除了可以保持自有属性,还可以从原型对象继承属性,可以从以下三种方法实现继承: 1. 原型继承; 2. 原型冒充 3. 复制继承

原型概念

  • 每一个JavaScript对象(null除外)都和另一个对象相关联,‘另一个’对象就是原型,每一个对象都从原型继承属性。
  • 所有通过对象直接量创建的对象都具有同一个原型对象,并可以通过JavaScript代码Object.prototype获得原型对象的引用。通过关键字new和构造函数调用创建的对象的原型就是构造函数的prototype属性的值。
  • 在JavaScript中,类的所有实例对象都从同一个原型对象上继承属性。

继承方式

原型继承

  • 让自身的原型指向父类的实例
  • 代码
 /**
    * Description: 创建父类
    */
   function parentA() {
       this.say = function () {
           alert('Hello World!');
       }
   }

   /**
    * Description: 创建子类
    */
   function subB() {

   }

   // 原型继承
   subB.prototype = new parentA();

   // 创建subB的实例
   var b = new subB();

   b.say(); // 弹出Hello World!

原型冒充继承

  • 在运行自身的构造时,先运行父类的构造函数
  • 代码
    /**
     * Description: 创建父类
     */
    function parentA(job) {
        this.job  = job;
        this.say  = function () {
            alert('Hello World!');
        }
    }

    /**
     * Description: 创建子类
     * 在运行自身的构造函数时使用apply方法先运行父类的构造函数
     */
    function subB(name) {
        this.parent = parentA;              // 把parentA赋值给subB的parent属性
        this.parent.apply(this, arguments); // 用this调用parentA的构造函数

        delete this.parent;                 // 调用完成之后,删除parent这个属性
        
        this.name = name
    }

    // 创建subB的实例
    var b = new subB();

    b.say(); // 弹出Hello World!

复制继承

  • 把父类的属性copy到自身
  • 代码
    /**
     * Description: 创建父类
     */
    function parentA(job) {
        this.job  = job;
        this.say  = function () {
            alert('Hello World!');
        }
    }

    /**
     * Description: 创建子类
     * 把父类的属性copy到自身
     */
    function subB(name) {
        this.name = name;

        this.extend = function (parent) {
            for(var key in parent) {
                this[key] = parent[key];
            }
        }
    }

    // 创建subB的实例
    var b = new subB();

    b.say(); // 报错 b.say is not a function

    // 复制父类的属性到自身
    b.extend(new parentA());

    b.say(); // 弹出 Hello World!
共有 人打赏支持
粉丝 0
博文 4
码字总数 1627
×
Jia。
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: