一篇小说掌握JS继承,六种继承格局

一篇作品领悟JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends

2018/08/02 · JavaScript
· 继承

原稿出处:
那是你的玩具车吗   

说实在话,从前自己只要求掌握“寄生组合继承”是最好的,有个祖传代码模版用就行。近年来因为部分事情,多少个星期以来一贯一遍遍地牵挂想整理出来。本文以《JavaScript高级程序设计》上的情节为骨架,补充了ES6
Class的有关内容,从自我以为更易于驾驭的角度将持续那件事叙述出来,希望大家能拥有收获。

后续是面向对象编程中又一要命重大的概念,JavaScript扶助促成持续,不协理接口继承,落成一而再首要借助原型链来完毕的。

JavaScript 六种持续格局

2017/06/20 · JavaScript
· 继承

初稿出处: Xuthus
Blog   

接轨是面向对象编程中又一非凡首要的定义,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.动态原型方式(基本周到)      将原型中方法封装到构造函数中去
一篇小说掌握JS继承,六种继承格局。        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进步了道格·拉斯(Doug·las)·克罗克福德的原型链继承,用Object.create()方法
            eg: 其中首个参数和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这些引用类型值,也会浮现到instance2中。

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’

那种格局避免了原型链和构造函数继承的败笔,融合了她们的优点,是最常用的一种持续情势。

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’]

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

优点:

  • 父类的不二法门可以被复用
  • 父类的引用属性不会被共享
  • 子类构建实例时可以向父类传递参数

缺点:

调用了五回父类的构造函数,第一遍给子类的原型添加了父类的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方法。

在事关重大考虑对象而不是自定义类型和构造函数的状态下,那是一个管用的形式。

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: “尼古·拉斯(Nic·holas)”, 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 () {

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

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() {

参照小说:

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

[2]《JavaScript高级编程》

1 赞 收藏
评论

亚洲必赢官网 3

  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

问题

仅仅的使用原型链继承,紧要问题来自包蕴引用类型值的原型。

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那么些引用类型值,也会反映到instance2中。

借用构造函数

此办法为了缓解原型中隐含引用类型值所带动的题材。

那种办法的盘算就是在子类构造函数的中间调用父类构造函数,能够借助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”]

在新建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

问题

只要只是信赖构造函数,方法都在构造函数中定义,因而函数不可以达标复用

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

构成继承是将原型链继承和构造函数结合起来,从而发挥两岸之长的一种形式。

思路就是使用原型链落成对原型属性和方式的继续,而通过借用构造函数来促成对实例属性的一连。

如此那般,既通过在原型上定义方法完成了函数复用,又可以确保每个实例都有它自己的性能。

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 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’]

那种情势要去你必须有一个目的作为另一个目的的根底。

在这几个事例中,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’]

寄生式继承

寄生式继承的思路与寄生构造函数和工厂情势类似,即创造一个仅用于封装继承进度的函数。

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方法。

在第一考虑对象而不是自定义类型和构造函数的情况下,这是一个灵光的形式。

寄生组合式继承

在头里说的结合方式(原型链+构造函数)中,继承的时候需求调用五遍父类构造函数。

父类

function SuperType(name) {

  this.name = name

  this.colors = [‘red’, ‘blue’, ‘green’]

}

首先次在子类构造函数中

function SubType(name, job) {

  // 继承属性

  SuperType.call(this, name)

  this.job = job

}

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

// 继承方法

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

}

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

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

第一步制造父类原型的副本,第二步将创制的副本添加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()

补给:直接行使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()

ES6新增了一个方法,Object.setPrototypeOf,可以一贯开立关联,而且并非手动添加constructor属性。

// 继承

Object.setPrototypeOf(SubType.prototype, SuperType.prototype)

console.log(SubType.prototype.constructor === SubType) // true

网站地图xml地图