>

实现继承主要依靠原型链来实现的,//第二次调用

- 编辑:澳门博发娱乐官网 -

实现继承主要依靠原型链来实现的,//第二次调用

一篇小说精晓JS传承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends

2018/08/02 · JavaScript · 继承

原来的书文出处: 这是您的玩具车吗   

说实在话,在此之前小编只必要了然“寄生组合继承”是最棒的,有个祖传代码模版用就行。近些日子因为一些事务,多少个星期以来径直经久不息想整理出来。本文以《JavaScript高端程序设计》上的从头到尾的经过为骨架,补充了ES6 Class的相关内容,从自个儿认为更便于明白的角度将三番两次这事陈述出来,希望我们能享有收获。

三番五次是面向对象编程中又一百般重大的定义,JavaScript协理促成持续,不支持接口继承,实现连续主要正视原型链来完成的。

JavaScript 五种持续方式

2017/06/20 · JavaScript · 继承

原稿出处: Xuthus Blog   

持续是面向对象编制程序中又一特别首要的定义,JavaScript帮忙落到实处一而再,不帮衬接口承接,完毕持续主要依赖原型链来达成的。

 前文说过,组合承接是javascript最常用的接二连三形式,不过,它也会有和睦的不足:组合承接无论在怎么意况下,都会调用五遍父类构造函数,叁回是在开创子类原型的时候,另三遍是在子类构造函数内部.子类最终会包罗父类对象的全数实例属性,但大家只好在调用子类构造函数时重写这几个属性.请再看壹遍组合承接的例证:

一、精晓对象
    1.创建
        ①构造函数   new Object
        ②对象字面量  var o = {};
    2.属性类型
        ①数量属性,对象属性有4个属性特征,暗中认可都为true,能够通过Object.defineProperty()来修改属性特征
            a.[[Configurable]]  代表能无法通过delete删除重新定义,能还是不能修改属性的表征,能还是不能够修改为访问权属性
            b.[[Enumerable]]    表示能还是无法通过for-in枚举
            c.[[Writable]]      表示能或无法修改属性的值
            d.[[Value]]         表示属性值
            eg:
                var o = {
                    name : [1, 2, 3]
                }
                Object.defineProperty(o, "name", {
                    configurable : false,       // 不能delete,无法修改,不能够设置为访谈器属性
                    enumerable : false,         // 不能够枚举
                    writable :  false,          // 不能够修改
                    value :     [100, 200]      // 把值形成[100, 200]
                });
                // for(var v in o.name) {
                    // alert(o.name[v]); // 100, 200, 能枚举
                // }
                alert(o.propertyIsEnumerable("name"));      // false
                // o.name = "li";
                // alert(o.name); // 100, 200 不可能改改
                // delete o.name;
                // alert(o.name); // 100, 200 不能够去除
        ②访谈器属性,4个访问器属性特征,能够通过Object.defineProperty()来修改属性特征
            a.[[Configurable]]  代表是或不是通过delete删除重新定义,能不可能修改属性的性状,能或不可能修改为访谈权属性
            b.[[Enumerable]]    表示是还是不是通过for-in枚举
            c.[[Get]]           表示在读取属性时调用的函数,默感到undefined
            d.[[Set]]           表示在安装属性时调用的函数,暗中认可为undefined
            eg:
                var o = {
                    name : [1, 2, 3]
                }
                Object.defineProperty(o, "name", {
                    get : function () {
                        alert("get");
                    },
                    set : function() {
                        alert("set");
                    }
                });
                o.name = "li";      // set,设置name值时,自动调用o.set()
                o.name;             // get,读取name时,自动调用o.get()
        ③定义几个属性 Object.defineProperties()来还要定义八个属性
            eg:
                var o = {}
                Object.defineProperties(o, {
                    name : {
                        configurable : false,
                        value : "zhang"
                    },
                    age : {
                        get : function () {
                            alert("get");
                        },
                        set : function() {
                            alert("set");
                        }
                    }
                });
                alert(o.name);          // zhang
                o.age;                  // get
                o.age = "li";           // set
        ④读取属性的特点    Object.getOwnPropertyDescriptor(objectName, propertyName)
            eg:
                var o = {}
                Object.defineProperties(o, {
                    age : {
                        get : function () {
                            alert("get");
                        },
                        set : function() {
                            alert("set");
                        }
                    }
                });
                var descriptor = Object.getOwnPropertyDescriptor(o, "age");
                for(var v in descriptor) {
                    alert(v + " = " + descriptor[v]);       // 弹出国访问问器属性的4性子情特征
                }
二、创设对象
    1.厂子模式         
        ①虚幻了成立对象的切切实实进度
            eg:
                function createObject (name, age) {
                var object = new Object();
                object.name = name;
                object.age = age;
                object.sayName = function () {
                    return object.name;
                }
                return object;
            }
            var p1 = createObject("zhang", 23);
            var p2 = createObject("li", 33);
            alert(p1.sayName());        // zhang
            alert(p2.sayName());        // li
            // 不可能分辨p1和p2
            alert(p1);                  // [object Object]
            alert(p2);                  // [object Object]
        ②害处     没有减轻对象识其他难题
        ③化解措施   构造函数模型
    2.构造函数方式
        ①创造方式
            eg:
                function Person(name, age) {
                    this.name = name;
                    this.age = age;
                    this.getName = function () {
                        return this.name;
                    }
                }
                var p1 = new Person("zhang", 34);
                var p2 = new Person("li", 23);
                alert(p1.getName());        // zhang
                alert(p2.getName());        // li
                alert(p1 instanceof Person);        // true
                alert(p2 instanceof Person);        // true, 解决了工厂格局的对象识别难点
        ②主题素材每一个方法都要在各个实例上开创贰次,进而产生差异的效果与利益域链,从而导致差异等
            eg: alert(p1.getName == p2.getName);        // false
            大家也得以将艺术有些提取到构造函数之外,但如此就从不什么样封装性可言了。
            eg:
                function Person(name, age) {
                    this.name = name;
                    this.age = age;
                    this.getName = getName;
                }
                function getName () {
                    return this.name;
                }
        ③缓慢解决办法   原型模型
    3.原型方式
        ①创制情势   原型对象(构造函数的prototype属性指向它)的功利:能够让全体指标实例共享它富含属性和方法
            eg:
                function Person(name, age) {
                    this.name = name;
                    this.age = age;
                }
                Person.prototype.getName = function () {
                    return this.name;
                }
                var p1 = new Person("zhang", 34);
                var p2 = new Person("li", 23);
                alert(p1.getName == p2.getName);    // true,消除了章程分享的标题
        ②知道原型  
                a.函数Person.prototype指向原型
                b.Person.prototype.constructor指回构造函数
                c.p1、p2的prototype指向原型,且可调用原型中的方法,用Person.prototype.isPrototypeOf(p1)剖断,也得以用Object.getPrototypeOf(p1)来赢得原型
                d.大家能够用原型访谈属性的值,不过不能够由此实例重写原型的值,因为对象实例的值会屏蔽原型属性的值。当大家用实例对象重写了原型中的值,唯有删除实例对象的值,才具访问原型属性的值。
                e.一样大家能够由此[实例.hasOwnProperty(propertyName)]来检验实例是还是不是定义了团结的属性值
                    eg:
                        function Person() {}
                        Person.prototype.name = "zhang";
                        Person.prototype.getName = function () {
                            return this.name;
                        }
                        var p1 = new Person();
                        alert(p1.name);     // zhang
                        p1.name = "li";
                        alert(p1.name);     // li,实例中的值覆盖了原型中的值
                        alert(p1.hasOwnProperty("name"));   // 判定实例p1是不是定义了投机的质量name的值,true
                        delete p1.name;     // 删除实例对象中的属性值
                        alert(p1.name);     // zhang
        ③原型与in操作符      
            a.无论是属性值存在于原型中,照旧实例对象中都回来true
                eg:
                    function Person() {}
                    Person.prototype.name = "zhang";
                    Person.prototype.getName = function () {
                        return this.name;
                    }
                    // 决断是不是为原型中的属性
                    function hasPrototypeProperty(object, propertyName) {
                        return propertyName in object && !object.hasOwnProperty(propertyName);
                    }
                    var p1 = new Person();
                    p1.name = "li";
                    alert(hasPrototypeProperty(p1, "name"));    // false
                    delete p1.name;
                    alert(hasPrototypeProperty(p1, "name"));    // true
            b.枚举全体可枚举的属性和章程,用Object.key(原型/实例)
                eg:
                    function Person() {}
                    Person.prototype.name = "zhang";
                    Person.prototype.age = 11;
                    Person.prototype.getName = function () {
                        return this.name;
                    }
                    alert(Object.keys(Person.prototype));   // 枚举原型中的属性和办法
                    var p1 = new Person();
                    p1.name = "li";
                    p1.getName = function () {}             // 枚举实例对象中的属性和格局
                    alert(Object.keys(p1));
            c.枚举全数的性质和措施,无论是不是隐身,用hasOwnPropertyNames(原型);
                eg: alert(Object.getOwnPropertyNames(Person));  // prototype,length,name
        ④更不难的原型方法
            a.源码
            eg: function Person() {}
                Person.prototype = {
                    constructor : Person,
                    name : "zhang",
                    getName : function () {}
                }
            b.难点    那样做大概会导致原型中的constructor属性的[Enumerable]为true,默认为false
            c.化解格局  用Object.defineProperty()方法重复定义
                eg: Object.defineProperty(Person.prototype, constructor, { enumerable : false});
            e.实例化对象自然要后于对象的概念完结
        ⑤原型对象的难点        分享性,针对方法很好,针对属性也说的长逝,但是针对那么些带有了引用类型则不得
            eg:
                function Person() {}
                Person.prototype = {
                    constructor : Person,
                    friends : [1, 2]        // 援引类型
                }
                var p1 = new Person();
                var p2 = new Person();
                p1.friends.push(3);
                alert(p1.friends);
                alert(p2.friends);      // 相同的时间重返1,2,3
        ⑥化解办法   去伪存真,用构造函数方式定义属性,用原型形式定义方法
    3.组合构造方式和原型方式
        ①情势 舍短取长,用构造函数情势定义属性,用原型情势定义方法
        eg:
            function Person(name) {
                this.name = name;
                this.friends = [1, 2]       // 援用类型
            }
            Person.prototype = {
                constructor : Person,
                name : "zhang",
            }
            var p1 = new Person("li");
            var p2 = new Person("wang");
            p1.friends.push(3);
            alert(p1.friends);      // 1,2,3
            alert(p2.friends);      // 1,2
        ②没不符合规律        感到构造函数和原型分离,破坏了封装性
        ③解决方法   使用动态原型格局
    4.动态原型格局(基本完善)      将原型中方法封装到构造函数中去
        eg:
            function Person(name) {
                this.name = name;
                this.friends = [1, 2];      // 援引类型
                if (typeof this.getName != "function") {
                    Person.prototype.getName = {
                        return this.name;
                    }
                }
            }
    5.寄生协会形式
        ①着力观念:创造四个函数(对象),该函数用来封装代码,然后重返函数(对象)
        ②模式
            eg:
                function Person(name, age) {
                    var o = new Object();
                    o.name = name;
                    o.age = age;
                    o.getName = function () {
                        return o.name;
                    };
                    return o;
                }
                var p1 = new Person("zhang", 34);
                alert(p1.getName());        // zhang
                alert(p1 instanceof Person);// false
        ③主题素材:由于实例对象和构造函数完全分开,由此不或许辨认对象
        ④案例:对于Array类型,大家或者在非正规处境在,对它实行增添属性和措施
            eg:
                function NewArray() {
                    var array = new Array();
                    array.push.apply(array, arguments);
                    array.addFun = function () {
                        return this.join("|");
                    }
                    return array;
                }
                var a1 = new NewArray("zhang", 22);
                alert(a1.addFun());     // zhang|22
    6.稳当构造函数模型      未有集体性质,不应用this和new,只能定义获取值的点子
        ①用途:安全性
        ②源码
            eg:
                function Person(name, age) {
                    var o = new Object();
                    o.getName = function () {
                        return name;
                    }
                    return o;
                }
                var p = Person("zhang", 3);
                p.name = 'li';          // 无效
                alert(p.getName());     // zhang
        ③表征 函数名首字母大写、对象里只定义方法且毫无this、实例化时不用new
        ④主题素材:由于实例对象和构造函数完全分离,由此不可能辨识对象
三、继承
    1.原型链
        ①将父类的实例赋值给子类的原型。因为父类的实例指向父类的原型,因而子类的原型也针对父类的原型。
        ②主旨源码:
            eg:
                function SuperType(){
                    this.property = true;
                }
                SuperType.prototype.getSuperValue = function(){
                    return this.property;
                };
                function SubType(){
                    this.subproperty = false;
                }
                //继承了SuperType
                SubType.prototype = new SuperType();    // 将父类的实例赋值给子类的原型
                SubType.prototype.getSubValue = function (){
                    return this.subproperty;
                };
                var instance = new SubType();
                alert(instance.getSuperValue()); //true,调用父类SuperType的诀窍getSuperValue()
        ③别忘记了父类同样基础了祖类Object
        ③明显原型和实例的关系 用instanceof和对象.isPrototypeOf(实例)
        ④在子类重新或许加上父类的主意时,应当要在父类定义之后
        ⑤原型链的主题材料 原型链中无法存在援用类型
            eg:
                function SuperType(){
                    this.friends = [1,2];
                }
                function SubType(){}
                //继承了SuperType
                SubType.prototype = new SuperType();
                var s1 = new SubType();
                var s2 = new SubType();
                s1.friends.push(3);
                alert(s1.friends);      // 1, 2, 3
                alert(s2.friends);      // 同上
        ⑥消除方法   借用构造函数
    2.借出构造函数    对于原型链中包括援引类型,我们能够在子类的构造函中调用父类的构造函数
        ①源码案例, 就能够以使用援引类型,还足以传递参数
        eg:
            function SuperType(name){
                this.name = name;
                this.friends = [1,2];
            }
            function SubType(){
                SuperType.call(this, "abc");        // 传递参数
            }
            //继承了SuperType
            SubType.prototype = new SuperType();
            var s1 = new SubType();
            var s2 = new SubType();
            s1.friends.push(3);
            alert(s1.friends);      // 1, 2, 3
            alert(s2.friends);      // 1, 2
            alert(s1.name);         // abc
        ③难点 由于是在构造函数中定义,所以措施不能够共享
        ④化解格局   组合继承
    3.重组承继(尽管四次调用了父类,然则基本ok)
        ①着力观念   将借用构造和原型链结合起来,借用构造定义属性,原型链定义方法
            eg:
                function SuperType(name){
                    this.name = name;
                    this.friends = [1,2];
                    if (typeof this.getName != "function") {
                        SuperType.prototype.getName = function () {
                            return this.name;
                        }
                    }
                }
                function SubType(name, age){
                    SuperType.call(this, name);             // 第三回调用父类
                    this.age = age;
                    if (typeof this.getAge != "function") {
                        SuperType.prototype.getAge = function () {
                            return this.age;
                        }
                    }  
                }
                //继承了SuperType
                SubType.prototype = new SuperType();        // 第一遍调用父类
                var s1 = new SubType("zhang", 23);
                var s2 = new SubType("li", 24);
                s1.friends.push(3);
                alert(s1.friends);      // 1, 2, 3
                alert(s2.friends);      // 1, 2
                alert(s1.getName());    // zhang
                alert(s2.getAge());     // 24
    4.原型式承袭
        ①核心理维   借助原型能够根据已有个别对象创造新对象,进而没有要求自定义对象
            eg:
                function object(o) {
                    function F() {};
                    F.prototype = o;
                    return new F();
                }
                var person = {
                    name : "zhang",
                    friends : [1, 2]
                }
                var p1 = object(person);
                p1.name = "li";
                p1.friends.push(3);
                alert(p1.name);     // li
                alert(p1.friends);  // 1,2,3
                var p2 = object(person);
                p1.name = "wang";
                p1.friends.push(4);
                alert(p2.name);     // wang
                alert(p2.friends);  // 1,2,3,4
        ②ECMAScript 5上扬了道格拉斯·克Rock福德的原型链承袭,用Object.create()方法
            eg: 在那之中第3个参数和defineProperty()方法一致
                var person = {
                    name : "zhang",
                    friends : [1, 2]
                }
                var p1 = Object.create(person, {
                    name : {
                        value : "zhang"
                    }
                });
                p1.friends.push(3);
                alert(p1.name);     // li
                alert(p1.friends);  // 1,2,3
                var p2 = Object.create(person, {
                    name : {
                        value : "wang"
                    }
                });
                p1.friends.push(4);
                alert(p2.name);     // wang
                alert(p2.friends);  // 1,2,3,4
        ③主题材料:    原型链分享难点,援用类型
    5.寄生式承继
        ①思量 基于原型式承继,创设一个新函数对象,增添新格局
        eg:
            function object(o) {
                function F() {};
                F.prototype = o;
                return new F();
            }
            function createAnother(original) {
                // 承继原来的对象原型
                var clone = object(original);
                // 增添新办法
                clone.newFun = function () {
                    return "new function";
                }
                return clone;
            }
            var person = {
                name : "zhang",
                friends : [1, 2]
            }
            var p = createAnother(person);
            alert(p.name);      // zhang
            alert(p.newFun());  // new function
        ②难点 原型链分享难点,引用类型
    6.寄生组合式承接
        ①考虑在整合承继和原型式承接的底蕴上,不在子类的个中调用父类的构造函数,而是创造父类原型的别本
        eg:
            function object(o) {
                function F() {};
                F.prototype = o;
                return new F();
            }
            function inheritPrototype(subType, superType) {
                // 赋值proto为superType的原型
                var proto = object(superType.prototype);
                // 原型的contructor属性指向构造函数
                proto.contructor = subType;
                // superType的构造函数指向原型
                subType.prototype = proto;
            }
            function SuperType(name){
                this.name = name;
                this.friends = [1,2];
                if (typeof this.getName != "function") {
                    SuperType.prototype.getName = function () {
                        return this.name;
                    }
                }
            }
            inheritPrototype(SubType, SuperType);
            function SubType(name, age){
                SuperType.call(this, name);
                this.age = age;
                if (typeof this.getAge != "function") {
                    SuperType.prototype.getAge = function () {
                        return this.age;
                    }
                }  
            }
            var s1 = new SubType("zhang", 23);
            var s2 = new SubType("li", 24);
            s1.friends.push(3);
            alert(s1.friends);      // 1, 2, 3
            alert(s2.friends);      // 1, 2
            alert(s1.getName());    // zhang
            alert(s2.getAge());     // 24

1. 继续分类

先来个完整影象。如图所示,JS中一连能够依据是还是不是利用object函数(在下文中会提到),将一连分成两局地(Object.create是ES5新扩充的艺术,用来标准化那个函数)。

内部,原型链承接和原型式承接有同样的利弊,构造函数承继与寄生式承袭也互相关照。寄生组合承继基于Object.create, 同一时候优化了咬合承袭,成为了一揽子的持续方式。ES6 Class Extends的结果与寄生组合承继基本一致,可是达成方案又略有分化。

上面立时步向正题。

图片 1

原型链

原型链

第一得要明了哪些是原型链,在一篇文章看懂proto和prototype的关系及界别中讲得不行详细

原型链承接基本思维便是让一个原型对象指向另三个类别的实例

function SuperType() { this.property = true } SuperType.prototype.getSuperValue = function () { return this.property } function SubType() { this.subproperty = false } SubType.prototype = new SuperType() SubType.prototype.getSubValue = function () { return this.subproperty } var instance = new SubType() console.log(instance.getSuperValue()) // true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function SuperType() {
  this.property = true
}
SuperType.prototype.getSuperValue = function () {
  return this.property
}
function SubType() {
  this.subproperty = false
}
SubType.prototype = new SuperType()
SubType.prototype.getSubValue = function () {
  return this.subproperty
}
var instance = new SubType()
console.log(instance.getSuperValue()) // true

代码定义了三个门类SuperType和SubType,各种门类分别有多个天性和三个措施,SubType承接了SuperType,而继续是透过创办SuperType的实例,并将该实例赋给SubType.prototype实现的。

达成的原形是重写原型对象,代之以多少个新品类的实例,那么存在SuperType的实例中的全部属性和形式,以后也存在于SubType.prototype中了。

大家明白,在创制三个实例的时候,实例对象中会有二个之中指针指向创造它的原型,实行关联起来,在此处代码SubType.prototype = new SuperType(),也会在SubType.prototype创设叁个内部指针,将SubType.prototype与SuperType关联起来。

于是instance指向SubType的原型,SubType的原型又指向SuperType的原型,继而在instance在调用getSuperValue()方法的时候,会顺着那条链一向往上找。

加上措施

在给SubType原型增加方法的时候,倘若,父类上也许有一致的名字,SubType将会覆盖那几个艺术,到达重新的目的。 不过其一格局照旧留存于父类中。

记住不可能以字面量的款型丰盛,因为,上面说过通超过实际例承袭本质上正是重写,再选取字面量格局,又是壹次重写了,但这一次重写未有跟父类有其他关联,所以就能够招致原型链截断。

function SuperType() { this.property = true } SuperType.prototype.getSuperValue = function () { return this.property } function SubType() { this.subproperty = false } SubType.prototype = new SuperType() SubType.prototype = { getSubValue:function () { return this.subproperty } } var instance = new SubType() console.log(instance.getSuperValue()) // error

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function SuperType() {
  this.property = true
}
SuperType.prototype.getSuperValue = function () {
  return this.property
}
function SubType() {
  this.subproperty = false
}
SubType.prototype = new SuperType()
SubType.prototype = {
  getSubValue:function () {
   return this.subproperty
  }
}
var instance = new SubType()
console.log(instance.getSuperValue())  // error

问题

只是的施用原型链承袭,首要难题根源包括援引类型值的原型。

function SuperType() { this.colors = ['red', 'blue', 'green'] } function SubType() { } SubType.prototype = new SuperType() var instance1 = new SubType() var instance2 = new SubType() instance1.colors.push('black') console.log(instance1.colors) // ["red", "blue", "green", "black"] console.log(instance2.colors) // ["red", "blue", "green", "black"]

1
2
3
4
5
6
7
8
9
10
11
function SuperType() {
  this.colors = ['red', 'blue', 'green']
}
function SubType() {
}
SubType.prototype = new SuperType()
var instance1 = new SubType()
var instance2 = new SubType()
instance1.colors.push('black')
console.log(instance1.colors)  // ["red", "blue", "green", "black"]
console.log(instance2.colors) // ["red", "blue", "green", "black"]

在SuperType构造函数定义了一个colors属性,当SubType通过原型链承接后,那性格格就能够现出SubType.prototype中,就跟特地创立了SubType.prototype.colors一样,所以会导致SubType的享有实例都会分享那几个天性,所以instance1修改colors那一个援用类型值,也会展现到instance第22中学。

 

2. 一连格局

上图上半区的原型链承袭,构造函数字传送承,组合承继,网上内容非常多,本文不作详细描述,只建议重视。这里给出了自己觉着最轻易通晓的一篇《JS中的承接(上)》。固然对上半区的剧情素不相识,能够先看这篇文章,再回到继续读书;假若已经比较熟知,那部分能够赶快略过。另,上半区大气借出了yq前端的一篇三翻五次文章[1]。

率先得要明了怎么着是原型链,在一篇小说看懂proto和prototype的涉嫌及界别中讲得特别详细

借用构造函数

此方法为了消除原型中包罗引用类型值所带来的标题。

这种方法的记挂就是在子类构造函数的中间调用父类构造函数,能够借助apply()和call()方法来更动目的的实行上下文

function SuperType() { this.colors = ['red', 'blue', 'green'] } function SubType() { // 继承SuperType SuperType.call(this) } var instance1 = new SubType() var instance2 = new SubType() instance1.colors.push('black') console.log(instance1.colors) // ["red", "blue", "green", "black"] console.log(instance2.colors) // ["red", "blue", "green"]

1
2
3
4
5
6
7
8
9
10
11
12
function SuperType() {
  this.colors = ['red', 'blue', 'green']
}
function SubType() {
  // 继承SuperType
  SuperType.call(this)
}
var instance1 = new SubType()
var instance2 = new SubType()
instance1.colors.push('black')
console.log(instance1.colors)  // ["red", "blue", "green", "black"]
console.log(instance2.colors) // ["red", "blue", "green"]

在新建SubType实例是调用了SuperType构造函数,那样以来,就能在新SubType指标上进行SuperType函数中定义的具有指标初阶化代码。

结果,SubType的各样实例就能持有自个儿的colors属性的副本了。

传递参数

正视构造函数还应该有一个优势正是足以传递参数

function SuperType(name) { this.name = name } function SubType() { // 继承SuperType SuperType.call(this, 'Jiang') this.job = 'student' } var instance = new SubType() console.log(instance.name) // Jiang console.log(instance.job) // student

1
2
3
4
5
6
7
8
9
10
11
12
function SuperType(name) {
  this.name = name
}
function SubType() {
  // 继承SuperType
  SuperType.call(this, 'Jiang')
 
  this.job = 'student'
}
var instance = new SubType()
console.log(instance.name)  // Jiang
console.log(instance.job)   // student

问题

借使单独依靠构造函数,方法都在构造函数中定义,因而函数不可能达成复用

复制代码

2.1 原型式继承

主导:将父类的实例作为子类的原型

SubType.prototype = new SuperType() // 全体关乎到原型链承继的持续方式都要修改子类构造函数的指向,不然子类实例的结构函数会指向SuperType。 SubType.prototype.constructor = SubType;

1
2
3
SubType.prototype = new SuperType()
// 所有涉及到原型链继承的继承方式都要修改子类构造函数的指向,否则子类实例的构造函数会指向SuperType。
SubType.prototype.constructor = SubType;

亮点:父类方法能够复用

缺点:

  • 父类的援用属性会被抱有子类实例分享
  • 子类创设实例时不能够向父类传递参数

原型链承继基本考虑正是让二个原型对象指向另七个门类的实例

结合承袭(原型链+构造函数)

组成承接是将原型链承接和构造函数结合起来,进而发挥双方之长的一种情势。

思路正是应用原型链实现对原型属性和艺术的再三再四,而因而借用构造函数来完成对实例属性的接续。

如此那般,既通过在原型上定义方法完成了函数复用,又能够保证各种实例都有它自己的习性。

function SuperType(name) { this.name = name this.colors = ['red', 'blue', 'green'] } SuperType.prototype.sayName = function () { console.log(this.name) } function SubType(name, job) { // 继承属性 SuperType.call(this, name) this.job = job } // 承袭方法 SubType.prototype = new SuperType() SubType.prototype.constructor = SuperType SubType.prototype.sayJob = function() { console.log(this.job) } var instance1 = new SubType('Jiang', 'student') instance1.colors.push('black') console.log(instance1.colors) //["red", "blue", "green", "black"] instance1.sayName() // 'Jiang' instance1.sayJob() // 'student' var instance2 = new SubType('J', 'doctor') console.log(instance2.colors) // //["red", "blue", "green"] instance2.sayName() // 'J' instance2.sayJob() // 'doctor'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function SuperType(name) {
  this.name = name
  this.colors = ['red', 'blue', 'green']
}
SuperType.prototype.sayName = function () {
  console.log(this.name)
}
function SubType(name, job) {
  // 继承属性
  SuperType.call(this, name)
 
  this.job = job
}
// 继承方法
SubType.prototype = new SuperType()
SubType.prototype.constructor = SuperType
SubType.prototype.sayJob = function() {
  console.log(this.job)
}
var instance1 = new SubType('Jiang', 'student')
instance1.colors.push('black')
console.log(instance1.colors) //["red", "blue", "green", "black"]
instance1.sayName() // 'Jiang'
instance1.sayJob()  // 'student'
var instance2 = new SubType('J', 'doctor')
console.log(instance2.colors) // //["red", "blue", "green"]
instance2.sayName()  // 'J'
instance2.sayJob()  // 'doctor'

这种形式幸免了原型链和构造函数字传送承的后天不足,融入了他们的长处,是最常用的一种持续形式。

function SuperType(name){

2.2 构造函数承袭

主导:将父类构造函数的开始和结果复制给了子类的构造函数。那是享有继续中独步一时三个不涉及到prototype的承接。

SuperType.call(SubType);

1
SuperType.call(SubType);

优点:和原型链承继完全翻转。

  • 父类的引用属性不会被分享
  • 子类营造实例时方可向父类传递参数

症结:父类的主意无法复用,子类实例的法门每趟都以单身创设的。

function SuperType() {

原型式承继

正视原型能够依照已有的对象成立新目的,同有的时候候还不用为此创建自定义类型。

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

1
2
3
4
5
function object(o) {
  function F() {}
  F.prototype = o
  return new F()
}

在object函数内部,先成立三个不时性的构造函数,然后将盛传的靶子作为那一个构造函数的原型,最终回到这一个临时类型的三个新实例。

精神上来讲,object对传播当中的靶子实施了一遍浅复制。

var person = { name: 'Jiang', friends: ['Shelby', 'Court'] } var anotherPerson = object(person) console.log(anotherPerson.friends) // ['Shelby', 'Court']

1
2
3
4
5
6
var person = {
  name: 'Jiang',
  friends: ['Shelby', 'Court']
}
var anotherPerson = object(person)
console.log(anotherPerson.friends)  // ['Shelby', 'Court']

这种方式要去你不可能不有八个对象作为另二个对象的基础。

在这么些事例中,person作为另叁个对象的底子,把person传入object中,该函数就能回来二个新的对象。

其一新指标将person作为原型,所以它的原型中就带有一个主导类型和多个援用类型。

于是意味着假诺还应该有其他一个目的关系了person,anotherPerson修改数组friends的时候,也会展现在那么些目的中。

Object.create()方法

ES5经过Object.create()方法则范了原型式承袭,还可以五个参数,贰个是用作新对象原型的靶子和三个可选的为新对象定义额外属性的对象,行为一律,基本用法和上面包车型地铁object同样,除了object无法经受第二个参数以外。

var person = { name: 'Jiang', friends: ['Shelby', 'Court'] } var anotherPerson = Object.create(person) console.log(anotherPerson.friends) // ['Shelby', 'Court']

1
2
3
4
5
6
var person = {
  name: 'Jiang',
  friends: ['Shelby', 'Court']
}
var anotherPerson = Object.create(person)
console.log(anotherPerson.friends)  // ['Shelby', 'Court']

       this.name=name;

2.3 组合继承

骨干:原型式承继和构造函数承继的咬合,兼具了二者的帮助和益处。

function SuperType() { this.name = 'parent'; this.arr = [1, 2, 3]; } SuperType.prototype.say = function() { console.log('this is parent') } function SubType() { SuperType.call(this) // 第二遍调用SuperType } SubType.prototype = new SuperType() // 第一遍调用SuperType

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function SuperType() {
    this.name = 'parent';
    this.arr = [1, 2, 3];
}
 
SuperType.prototype.say = function() {
    console.log('this is parent')
}
 
function SubType() {
    SuperType.call(this) // 第二次调用SuperType
}
 
SubType.prototype = new SuperType() // 第一次调用SuperType

优点:

  • 父类的法子能够被复用
  • 父类的引用属性不会被分享
  • 子类创设实例时得以向父类传递参数

缺点:

调用了四回父类的构造函数,第4回给子类的原型加多了父类的name, arr属性,第壹回又给子类的构造函数增添了父类的name, arr属性,进而覆盖了子类原型中的同名参数。这种被覆盖的景观导致了质量上的荒疏。

  this.property = true

寄生式承袭

寄生式承继的思路与寄生构造函数和工厂方式类似,即创立叁个仅用于封装承接进程的函数。

function createAnother(o) { var clone = Object.create(o) // 创造多少个新对象 clone.sayHi = function() { // 增添格局 console.log('hi') } return clone // 重临那一个指标 } var person = { name: 'Jiang' } var anotherPeson = createAnother(person) anotherPeson.sayHi()

1
2
3
4
5
6
7
8
9
10
11
12
function createAnother(o) {
  var clone = Object.create(o) // 创建一个新对象
  clone.sayHi = function() { // 添加方法
    console.log('hi')
  }
  return clone  // 返回这个对象
}
var person = {
  name: 'Jiang'
}
var anotherPeson = createAnother(person)
anotherPeson.sayHi()

依照person重回了一个新指标anotherPeson,新目的不止全数了person的性质和章程,还会有温馨的sayHi方法。

在重大思量对象并非自定义类型和构造函数的场合下,那是三个灵光的方式。

       this.friends=["gay1","gay2"];  

2.4 原型式承袭

焦点:原型式承继的object方法本质上是对参数对象的二个浅复制。

优点:父类方法能够复用

缺点:

  • 父类的援引属性会被全部子类实例分享
  • 子类营造实例时无法向父类传递参数

function object(o){ function F(){} F.prototype = o; return new F(); } var person = { name: "Nicholas", friends: ["Shelby", "Court", "Van"] }; var anotherPerson = object(person); anotherPerson.name = "Greg"; anotherPerson.friends.push("Rob"); var yetAnotherPerson = object(person); yetAnotherPerson.name = "Linda"; yetAnotherPerson.friends.push("Barbie"); alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function object(o){
  function F(){}
  F.prototype = o;
  return new F();
}
 
var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};
 
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
 
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends);   //"Shelby,Court,Van,Rob,Barbie"
 

ECMAScript 5 通过新扩张Object.create()方准绳范化了原型式承接。这一个格局接收五个参数:二个用作新对象原型的目的和(可选的)一个为新目的定义额外属性的靶子。在传诵叁个参数的事态下, Object.create()与 object()方法的行为无差距于。——《JAVASCript高档编制程序》

所以上文中代码能够生成为

var yetAnotherPerson = object(person); => var yetAnotherPerson = Object.create(person);

1
var yetAnotherPerson = object(person); => var yetAnotherPerson = Object.create(person);

}

寄生组合式承接

在前边说的组成情势(原型链+构造函数)中,承继的时候须要调用一次父类构造函数。

父类

function SuperType(name) { this.name = name this.colors = ['red', 'blue', 'green'] }

1
2
3
4
function SuperType(name) {
  this.name = name
  this.colors = ['red', 'blue', 'green']
}

先是次在子类构造函数中

function SubType(name, job) { // 承袭属性 SuperType.call(this, name) this.job = job }

1
2
3
4
5
6
function SubType(name, job) {
  // 继承属性
  SuperType.call(this, name)
 
  this.job = job
}

其次次将子类的原型指向父类的实例

// 承袭方法 SubType.prototype = new SuperType()

1
2
// 继承方法
SubType.prototype = new SuperType()

当使用var instance = new SubType()的时候,会生出两组name和color属性,一组在SubType实例上,一组在SubType原型上,只不超过实际例上的遮挡了原型上的。

选用寄生式组合方式,能够规避这几个题材。

这种方式通过借用构造函数来一而再属性,通过原型链的混成方式来接二连三方法。

基本思路:不必为了钦赐子类型的原型而调用父类的构造函数,我们要求的无非正是父类原型的一个别本。

实质上正是行使寄生式承继来接二连三父类的原型,在将结果内定给子类型的原型。

function inheritPrototype(subType, superType) { var prototype = Object.create(superType.prototype) prototype.constructor = subType subType.prototype = prototype }

1
2
3
4
5
function inheritPrototype(subType, superType) {
  var prototype = Object.create(superType.prototype)
  prototype.constructor = subType
  subType.prototype = prototype
}

该函数完结了寄生组合承接的最简便款式。

本条函数接受四个参数,一个子类,二个父类。

先是步创设父类原型的副本,第二步将开创的别本增多constructor属性,第三部将子类的原型指向这一个别本。

function SuperType(name) { this.name = name this.colors = ['red', 'blue', 'green'] } SuperType.prototype.sayName = function () { console.log(this.name) } function SubType(name, job) { // 承接属性 SuperType.call(this, name) this.job = job } // 承继inheritPrototype(SubType, SuperType) var instance = new SubType('Jiang', 'student') instance.sayName()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function SuperType(name) {
  this.name = name
  this.colors = ['red', 'blue', 'green']
}
SuperType.prototype.sayName = function () {
  console.log(this.name)
}
function SubType(name, job) {
  // 继承属性
  SuperType.call(this, name)
 
  this.job = job
}
// 继承
inheritPrototype(SubType, SuperType)
var instance = new SubType('Jiang', 'student')
instance.sayName()

补偿:直接使用Object.create来完结,其实正是将下边封装的函数拆开,那样演示可以更易于明白。

function SuperType(name) { this.name = name this.colors = ['red', 'blue', 'green'] } SuperType.prototype.sayName = function () { console.log(this.name) } function SubType(name, job) { // 承接属性 SuperType.call(this, name) this.job = job } // 承继 SubType.prototype = Object.create(SuperType.prototype) // 修复constructor SubType.prototype.constructor = SubType var instance = new SubType('Jiang', 'student') instance.sayName()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function SuperType(name) {
  this.name = name
  this.colors = ['red', 'blue', 'green']
}
SuperType.prototype.sayName = function () {
  console.log(this.name)
}
function SubType(name, job) {
  // 继承属性
  SuperType.call(this, name)
 
  this.job = job
}
// 继承
SubType.prototype = Object.create(SuperType.prototype)
// 修复constructor
SubType.prototype.constructor = SubType
var instance = new SubType('Jiang', 'student')
instance.sayName()

ES6新扩张了叁个办法,Object.setPrototypeOf,能够一向成立关联,并且并不是手动增添constructor属性。

// 继承 Object.setPrototypeOf(SubType.prototype, SuperType.prototype) console.log(SubType.prototype.constructor === SubType) // true

1
2
3
// 继承
Object.setPrototypeOf(SubType.prototype, SuperType.prototype)
console.log(SubType.prototype.constructor === SubType) // true

1 赞 2 收藏 评论

图片 2

}

2.5 寄生式承袭

中央:使用原型式承继获得叁个目的对象的浅复制,然后加强那么些浅复制的技能。

利弊:仅提供一种思路,没什么优点

function createAnother(original){ var clone=object(original); //通过调用函数创设八个新对象 clone.sayHi = function(){ //以某种方式来加强那几个指标 alert("hi"); }; return clone; //重回这么些目标} var person = { name: "Nicolas", friends: ["Shelby", "Court", "Van"] }; var anotherPerson = createAnother(person); anotherPerson.sayHi(); //"hi"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function createAnother(original){
    var clone=object(original);    //通过调用函数创建一个新对象
    clone.sayHi = function(){      //以某种方式来增强这个对象
        alert("hi");
    };
    return clone;                  //返回这个对象
}
 
var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};
 
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

SuperType.prototype.getSuperValue = function () {

SuperType.prototype.sayName=function(){

2.6 寄生组合承接

刚刚谈起组合承袭有贰个会三次调用父类的构造函数产生浪费的劣势,寄生组合承继就足以减轻那个主题素材。

function inheritPrototype(subType, superType){ var prototype = object(superType.prototype); // 创制了父类原型的浅复制 prototype.constructor = subType; // 考订原型的构造函数 subType.prototype = prototype; // 将子类的原型替换为那几个原型 } function SuperType(name){ this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function(){ alert(this.name); }; function SubType(name, age){ SuperType.call(this, name); this.age = age; } // 大旨:因为是对父类原型的复制,所以不分包父类的构造函数,也就不会调用两次父类的构造函数形成浪费 inheritPrototype(SubType, SuperType); SubType.prototype.sayAge = function(){ alert(this.age); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype); // 创建了父类原型的浅复制
    prototype.constructor = subType;             // 修正原型的构造函数
    subType.prototype = prototype;               // 将子类的原型替换为这个原型
}
 
function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
 
SuperType.prototype.sayName = function(){
    alert(this.name);
};
 
function SubType(name, age){
    SuperType.call(this, name);
    this.age = age;
}
// 核心:因为是对父类原型的复制,所以不包含父类的构造函数,也就不会调用两次父类的构造函数造成浪费
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
    alert(this.age);
}

利弊:那是一种完美的存在延续方式。

  return this.property

       alert(this.name);

2.7 ES6 Class extends

中央: ES6承袭的结果和寄生组合传承相似,本质上,ES6无冕是一种语法糖。不过,寄生组合承继是先创制子类实例this对象,然后再对其拉长;而ES6先将父类实例对象的品质和措施,加到this上面(所以必须先调用super方法),然后再用子类的构造函数修改this。

class A {} class B extends A { constructor() { super(); } }

1
2
3
4
5
6
7
class A {}
 
class B extends A {
  constructor() {
    super();
  }
}

ES6完成一而再的有血有肉原理:

class A { } class B { } Object.setPrototypeOf = function (obj, proto) { obj.__proto__ = proto; return obj; } // B 的实例承接 A 的实例 Object.setPrototypeOf(B.prototype, A.prototype); // B 继承 A 的静态属性 Object.setPrototypeOf(B, A);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class A {
}
 
class B {
}
 
Object.setPrototypeOf = function (obj, proto) {
  obj.__proto__ = proto;
  return obj;
}
 
// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);
 
// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);
 

ES6无冕与ES5承袭的异同:

同样点:本质上ES6后续是ES5继续的语法糖

不同点:

  • ES6接二连三中子类的构造函数的原型链指向父类的构造函数,ES5中运用的是构造函数复制,未有原型链指向。
  • ES6子类实例的创设,基于父类实例,ES5中不是。

}

};

3. 总结

  • ES6 Class extends是ES5一连的语法糖
  • JS的三番两回除了构造函数字传送承之外都基于原型链创设的
  • 能够用寄生组合继承实现ES6 Class extends,可是照旧会有微小的距离

function SubType() {

funciton SubType(name,age){

参照作品:

[1]《js承接、构造函数承袭、原型链承继、组合承接、组合承袭优化、寄生组合承袭》

[2]《JavaScript高等编制程序》

1 赞 收藏 评论

图片 3

  this.subproperty = false

      SuperType.call(this,name); //第叁次调用SuperType();

}

      this.age=age;  

SubType.prototype = new SuperType()

}

SubType.prototype.getSubValue = function () {

SubType.prototype=new SuperType();  //第壹遍调用SuperType()

  return this.subproperty

SubType.prototype.sayAge=function(){

}

      alert(this.age);

var instance = new SubType()

};

console.log(instance.getSuperValue()) // true

复制代码

代码定义了多个门类SuperType和SubType,每一种体系分别有多本性质和七个措施,SubType承接了SuperType,而持续是透过创办SuperType的实例,并将该实例赋给SubType.prototype完结的。

  在率先次调用SuperType构造函数时,SubType.prototype会获得四个属性:name和friends,他们都以SuperType的实例属性.只不过今后位居SubType的原型中.当调用SubType构造函数时,又会调用二回SuperType构造函数,那三回又在新对象上创办了实例属性name和friends.于是,这多个属性就屏蔽了原型中的五个同名属性.

兑现的精神是重写原型对象,代之以三个新品类的实例,那么存在SuperType的实例中的全体属性和形式,现在也设有于SubType.prototype中了。

 

作者们精晓,在成立叁个实例的时候,实例对象中会有叁个之中指针指向创制它的原型,举办关联起来,在那边代码SubType.prototype = new SuperType(),也会在SubType.prototype创造二个里边指针,将SubType.prototype与SuperType关联起来。

  结果是,有两组name和friends属性,一组在SubType的实例上,一组在SubType的原型上.那就是调用四遍SuperType构造函数的结果.这几天后,找到了减轻那几个难点的不二秘诀:寄生组合式承继.

故此instance指向SubType的原型,SubType的原型又指向SuperType的原型,继而在instance在调用getSuperValue()方法的时候,会顺着那条链平昔往上找。

 

足够措施

  寄生组合式承继:通过借用构造函数来延续属性,通过原型链的混成情势来再而三方法.思路:不必为了内定子类的原型而调用父类的构造函数,大家所急需的一味正是父类原型的一个别本而已.本质上,正是运用寄生式承袭来继续父类的原型,然后在将结果钦赐给子类的原型:

在给SubType原型增多方法的时候,借使,父类上也可能有一致的名字,SubType将会覆盖那几个艺术,达到重新的指标。 不过那一个情势照旧留存于父类中。

 

牢记不可能以字面量的样式充足,因为,上面说过通超过实际例承接本质上正是重写,再选取字面量格局,又是叁次重写了,但本次重写未有跟父类有别的涉及,所以就能够招致原型链截断。

function inheritPrototype(subType,superType){

function SuperType() {

      var prototype=object(superType.prototype); //成立父类原型的一个别本 等同于使用Object.create(superType.prototype)

  this.property = true

      prototype.constructor=subType;   //为别本增加constructor属性,弥补重写原型而错过的constructor属性

}

      subType.prototype=prototype; //将创制的对象(别本)赋值给子类的原型

SuperType.prototype.getSuperValue = function () {

}

  return this.property

  那样,大家就能够通过调用inheritPrototype()函数,替换前面例子中为子类原型的赋值语句了:

}

 

function SubType() {

复制代码

  this.subproperty = false

function inheritPrototype(subType,superType){

}

      var prototype=Object.create(superType.prototype); //创造父类原型的二个副本 等同于使用Object.create(superType.prototype)

SubType.prototype = new SuperType()

      prototype.constructor=subType;   //为别本增添constructor属性,弥补重写原型而遗失的constructor属性

SubType.prototype = {

      subType.prototype=prototype; //将创立的对象(别本)赋值给子类的原型

  getSubValue:function () {

}

  return this.subproperty

function SuperType(name){

  }

      this.name=name;

}

      this.friends=["gay1","gay2"];

var instance = new SubType()

}

console.log(instance.getSuperValue())  // error

SuperType.prototype.sayName=function(){

问题

      alert(this.name);

仅仅的应用原型链继承,重要难点来自富含引用类型值的原型。

};

function SuperType() {

function SubType(name,age){

  this.colors = ['red', 'blue', 'green']

      SuperType.call(this,name);  //继承SuperType

本文由胜博发-前端发布,转载请注明来源:实现继承主要依靠原型链来实现的,//第二次调用