JavaScript 继承

向右看齐 2021-12-23 11:29 292阅读 0赞

JavaScript实现继承的几种方式

## 原型链最基本的一种继承--过多继承了没用的属性 ##

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 Grand.prototype.lastName = "Deng";
     2         function Grand() {
     3 
     4         }
     5         var grand = new Grand();
     6 
     7         Father.prototype = grand;
     8         function Father() {
     9             this.name = "123";
    10             this.fortune={
    11                 a:123
    12             }
    13         }
    14         var father = new Father();
    15 
    16         Son.prototype = father;
    17         function Son() {
    18             this.hobbit="smoke";
    19 
    20         }
    21         var son = new Son();

## 借用构造函数实现继承  -- 每次构造函数都要多走一个函数 无法继承借用构造函数的原型 ##

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

function Person(name,age,sex){
                this.name=name;
                this.age=age;
                this.sex=sex;
    
            }
            function Student(name,age,sex,grade){
                Person.call(this,name,age,sex);
                this.grade=grade;
            }
            var student = new Student("a",12,1,1);

## 共享原型---不能随便改动自己的原型 ##

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

Father.prototype.lastName="Deng"
            function Father(){
    
            }
    
            function Son(){
    
            }
            未封装
            Son.prototype=Father.prototype;
            var son = new Son();
            var father = new Father();

我们对共享原型模式加以封装改造

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

function Father() {
    
            }
    
            function Son() {
    
            }
            //target 继承 origin
            function inherit(Target, Origin) {
                Target.prototype = Origin.prototype
            }
            //必须先继承后用
            inherit(Son, Father);
            var son = new Son();

## 圣杯模式(较好的继承实现，一般采用此方式) ##

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

// function inherit(Target, Origin) {
          
            //     function F() {};
            //     F.prototype = Origin.prototype;
            //     Target.prototype = new F();
            //     Target.prototype.constructor = Target;
            //     Target.prototype.uber = Origin.prototype;
            // }
            //比较专业的写法
            var inherit = (function () {
                var F = function () {};
                return function (Target, Origin) {
                    F.prototype = Origin.prototype;
                    Target.prototype = new F();
                    Target.prototype.constructor = Target;
                    Target.prototype.uber = Origin.prototype;
                }
            }());
            Father.prototype.lastName = "Deng"
    
            function Father() {
    
            }
    
            function Son() {
    
            }
            inherit(Son, Father);
            var son = new Son();
            var father = new Father();

转载于:https://www.cnblogs.com/FashionDoo/p/10602771.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211223/6b27a817a6024544b21b098fb328b063.png