详解js中extend函数

最新推荐文章于 2025-03-13 16:43:16 发布

浴盆

最新推荐文章于 2025-03-13 16:43:16 发布

阅读量4.1w

点赞数 3

文章标签：函数 class

本文链接：https://blog.csdn.net/sysuzhyupeng/article/details/54846949

版权

本文详细介绍了JavaScript中实现类继承的一种方法——使用extend函数，通过构造空函数并利用原型链来实现继承，同时提供了改进方案减少耦合度。此外，还介绍了基于对象的原型式继承方法，并给出了clone函数的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

extend详解

为了简化类的声明，可以把派生子类的整个过程包装在一个extend的函数，和其他语言中的extend关键字类似，基于一个给定的类结构创建一个新的类

   function extend(subClass, superClass){
       var F = function(){ };
       F.prototype = superClass.prototype;
       subClass.prototype = new F();
       subClass.prototype.constructor = subClass;
   }

这样和原型链继承中直接使用subClass.prototype = new superClass()有什么区别呢，作为一项改进，它添加了一个空函数F，并将它创建的对象添加进原型链中，这样可以避免产生superClass的新实例，因为它可能比较庞大。下面是extend函数的使用场景：

   function Person(name){
       this.name = name;
   }
   Person.prototype.getName = function(){
       return this.name;
   }
   function Author(name, books){
       //执行Person构造函数，获得Person对象中属性
       Person.call(this, name);
       this.books = books;
   }
   //获得Person原型上的方法，实现原型继承
   extend(Author, Person);
   //在Author原型上继续添加我们需要的方法
   Author.prototype.getBooks = function(){
       return this.books;
   }

extend的改进

这样唯一的缺点是在Author构造函数中还出现了Person，耦合程度太高，所以我们需要对extend函数做一些改进

   function extend(subClass, superClass){
       var F = function(){ };
       F.prototype = superClass.prototype;
       subClass.prototype = new F();
       subClass.prototype.constructor = subClass;

       subClass.superclass = superClass.prototype;
       //修正原型的constructor指向
       if(!superClass.prototype.contrucotor == Object.prototype.constructor){
           superClass.prototype.constructor = superClass;
       }
   }
   //使用中
   function Author(name, books){
       //从superClass.constructor中调用
       Author.superClass.constructor.call(this, name)
       this.books = books;
   }
   //获得Person原型上的方法，实现原型继承
   extend(Author, Person);

clone函数

与基于类的继承不同，还有一种基于对象的原型式继承，不需要构造函数

   var obj = {
       name: 'sysuzhyupeng',
       say: function(){
          alert(1);
       }
   }
   var newObj = clone(obj);
   newObj.name   // 'sysuzhyupeng'

来看一下clone函数的源码：

    function clone(object){
        function F(){}
        F.prototype = object;
        return new F;
    }

clone函数所返回的是一个以给定对象为原型对象的空对象