Une introduction très détaillée à l'héritage prototypique en JavaScript

Le contenu de cet article concerne l'héritage prototypique en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

1. ECMAScript a deux types d'attributs : les attributs de données et les attributs d'accesseur.

1. Attributs de données

Les attributs de données ont 4 caractéristiques qui décrivent leur comportement : Configurable, Énumérable, Inscriptible et Valeur.

Configurable : indique si l'attribut peut être redéfini en supprimant l'attribut via delete, si les caractéristiques de l'attribut peuvent être modifiées et si l'attribut peut être modifié en attribut accesseur. Pour les attributs définis directement sur l'objet, la valeur par défaut est true

Enumerable : indique si l'attribut peut être renvoyé via une boucle for-in.

Writable : Indique si la valeur de l'attribut peut être modifiée.
Valeur : contient la valeur des données de cet attribut.
Pour modifier les propriétés par défaut d'une propriété, vous pouvez utiliser la méthode Object.defineProperty() d'ECMAScript5. Reçoit trois paramètres : l'objet où se trouve l'attribut, le nom de l'attribut et un objet descripteur. Comme suit :

2. L'attribut accesseur

var person = {};
Object.defineProperty(person,"name",{
    writable:false;
    value:"nichols";
    Configurable:false;
});
alert(person.name);//"nichols"
person.name = "greg";//严格模式下会抛错.非严格模式下忽略。
delete person.name;//严格模式下会抛错
alert(person.name);//nichols

contient une paire de fonctions getter et setter. Il existe quatre propriétés : Configurable, Enumerable, Get, Set.

Configurable : indique si l'attribut peut être redéfini en supprimant l'attribut via delete, si les caractéristiques de l'attribut peuvent être modifiées et si l'attribut peut être modifié en attribut accesseur. Pour les attributs définis directement sur l'objet, la valeur par défaut est true

Enumerable : indique si l'attribut peut être renvoyé via une boucle for-in.

Get : Fonction appelée lors de la lecture des attributs. La valeur par défaut est indéfinie

Set : Fonction appelée lors de l'écriture des attributs. La valeur par défaut n'est pas définie.

Les propriétés de l'accesseur ne peuvent pas être définies directement et doivent être définies en appelant Object.defineProperty().

Il n'est pas nécessaire de spécifier getter et setter en même temps. Spécifier uniquement getter signifie qu'il ne peut pas être écrit.

var book = {
    _year:2004,
    edition:1
};
Object.defineProperty(book,"year",{
    get:function(){
        return this._year;
    },
    set:function(newValue){
        if(newValue>2004){
            this._year = newValue;
            this.edition +=newValue-2004;
        }
    }
});
book.year = 2005;
alert(book.edition);//2

Deux méthodes héritées de l'histoire :

3. Définir plusieurs propriétés en même temps

var book = {
    _year:2004,
    edition:1
};
book.__defineGetter__("year",function{return this._year});
book.__defineSetter__("year",function{.....});

Object.defineProperties() : Recevoir deux paramètres d'objet, à ajouter. ou L'objet dont les propriétés doivent être modifiées et les propriétés correspondantes à ajouter ou à modifier.

4. Caractéristiques des propriétés de lecture

var book = {};
Object.defineProperties(book,{
    _year:{
        value:2004
    },
    edition:{
        value:1
    },
    year:{
        get:function(){
            return this._year;
        },
        set:function(newValue){
        if(newValue>2004){
            this._year = newValue;
            this.edition +=newValue-2004;
          }
        }
    }
});

Utilisez la méthode Object.getOwnPropertyDescriptor() d'ECMAScript5 pour obtenir le descripteur d'un objet donné. Cette méthode accepte deux paramètres : l'objet où réside la propriété et le nom de la propriété dont le descripteur doit être lu. La valeur de retour est un objet.

5. La relation entre les fonctions et les objets

var descriptor = Object.getOwnPropertyDescrptor(book,"_year");
alert(descriptor.value);//2004
alert(descriptor.configurable);//false
alert(typeof descriptor.get);//undefined
var descriptor = Object.getOwnPropertyDescrptor(book,"year");
alert(descriptor.value);//undefined
alert(descriptor.enumerable);//false
alert(typeof descriptor.get);//function

Les objets sont créés via des fonctions.

Quelqu'un pourrait donner le contre-exemple suivant

function Fn() {
            this.name = 'yzh';
            this.year = 1996;
        }
        var fn1 = new Fn();

Cette approche est l'utilisation de « raccourcis », qui sont généralement appelés « sucre de syntaxe » dans les langages de programmation.

var obj = { a: 10, b: 20 };
var arr = [5, 'x', true];

En fait, l'essence du code ci-dessus est :

Et l'objet et le tableau sont tous deux des fonctions :

//var obj = { a: 10, b: 20 };
//var arr = [5, 'x', true];
        var obj = new Object();
        obj.a = 10;
        obj.b = 20;
        var arr = new Array();
        arr[0] = 5;
        arr[1] = 'x';
        arr[2] = true;

2. objets

console.log(typeof (Object));  // function
console.log(typeof (Array));  // function

1. Modèle d'usine

Utilisez des fonctions pour encapsuler les détails de la création d'objets avec des interfaces spécifiques.

2. Modèle de constructeur

function createPerson(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };
    return o;
}
var person1 = createPerson("nichils",29,"softward engineer");

Pour créer une nouvelle instance de personne, vous devez utiliser l'opérateur new. Appeler le constructeur de cette manière passe en fait par les 4 étapes suivantes :

function Person(name, age, job){
            this.name = name;
            this.age = age;
            this.job = job;
            this.sayName = function(){
                alert(this.name);
            };    
        }
var person1 = new Person("Nicholas", 29, "Software Engineer");
 var person2 = new Person("Nicholas", 29, "Software Engineer"); 
 alert(person1.sayName == person2.sayName)//false 
 alert(person1 instanceof Object);  //true
        alert(person1 instanceof Person);  //true
   alert(person1.constructor == Person);  //true

1. Créer un nouvel objet

2. Attribuer la portée du constructeur au nouvel objet.
3. Exécutez le code dans le constructeur
4. Renvoyez le nouvel objet.
La personne ci-dessus a un attribut constructeur, qui pointe vers Personne.
Résumé : La création d'un constructeur personnalisé signifie que son instance peut être identifiée comme un type spécifique à l'avenir. N'importe quelle fonction peut être utilisée comme constructeur à condition qu'elle soit appelée via l'opérateur new. Sans nouveauté, ce n'est pas différent d'une fonction ordinaire.
Problèmes avec les constructeurs : Le principal problème lié à l'utilisation des constructeurs est que chaque méthode doit être recréée sur chaque instance.
Vous pouvez résoudre ce problème en déplaçant la définition de la fonction en dehors du constructeur.

Et cela entraînera de nouveaux problèmes : si l'objet doit définir de nombreuses méthodes, alors de nombreuses fonctions globales doivent être définies. Cela peut être résolu grâce au mode prototype.

 function Person(name, age, job){
            this.name = name;
            this.age = age;
            this.job = job;
            this.sayName = sayName;
        }
        function sayName(){
            alert(this.name);
        }

3. Modèle de prototype

Chaque fonction que nous créons a un attribut de prototype. Cet attribut est un pointeur pointant vers un objet. Cet objet contient toutes les instances qui peuvent être représentées par un objet spécifique. type Propriétés et méthodes partagées.

Avantages de l'utilisation d'objets prototypes : Vous n'avez pas besoin de définir les informations d'instance d'objet dans le constructeur, vous pouvez ajouter ces informations directement à l'objet prototype.

function Person(){
        }
        Person.prototype.name = "Nicholas";
        Person.prototype.age = 29;
        Person.prototype.job = "Software Engineer";
        Person.prototype.sayName = function(){
            alert(this.name);
        };
        var person1 = new Person();
        person1.sayName();   //"Nicholas"
        var person2 = new Person();
        person2.sayName();   //"Nicholas"
        alert(person1.sayName == person2.sayName);  //true

3.1 理解原型

    原型对象的这些属性和方法是由所有实例共享的。 所有原型对象都会自动获得一个constructor属性，这个属性包含一个指向prototype所在函数的指针。所以 Person.prototype.constructor = Person. 当调用构造函数的新实例后，该实例的内部也会有一个指针叫[[Prototype]]指向构造函数的原型对象而非构造函数。虽然在脚本中没有标准的方式访问[[Prototype]]，但Firefox、Safari和Chrome在每个对象上都支持一个属性_proto_；而在其他实现中，这个属性对脚本则是完全不可见的。不过，要明确的真正重要的一点就是，这个连接存在于实例和构造函数的原型对象之间，而不是存在于实例与构造函数之间。

    所有实现中都无法访问 [[Prototype]]，但可以调用isPrototypeOf()方法来判断这种关系。

alert(person1.prototype.isPrototypeOf(person1));//true

或者通过Object.getPropertyOf()来得到[Prototype]的值。即这个对象的原型。

alert(Object.getPrototypeOf(person1)==Person.prototype);//true

    每当读取一个对象的属性时，首先先搜索对象实例本身的属性，找到了就返回。找不到再去搜索原型对象的属性。找到了就返回。 原型最初只包含constructor属性，而该属性也是共享的。因此可以通过对象实例访问。
    如果在实例中添加了一个与对象原型中的属性同名的属性，则在实例中创建该属性，并且屏蔽原型中的那个属性。

function Person(){
        }
        Person.prototype.name = "Nicholas";
        var person1 = new Person();
        var person2 = new Person();
        person1.name = "Greg";
        alert(person1.name);   //"Greg" ?from instance
        alert(person2.name);   //"Nicholas" ?from prototype

    使用delete操作符可以完全删除实例属性，从而让我们能够重新访问原型中的属性。

    使用hasOwnProerty()可以检测一个属性是存在于实例中还是存在于原型中。如果存在于对象实例中则返回true.

  var person1 = new Person();
  var person2 = new Person();
  alert(person1.hasOwnProperty("name"));  //false
  person1.name = 'Greg';
  alert(person1.name); //"Greg"——来自实例
  alert(person1.hasOwnProperty("name"));  //true
  alert(person2.name); //"Nicholas"——来自原型
  alert(person2.hasOwnProperty("name")); //false
  delete person1.name;
  alert(person1.name); //"Nicholas"——来自原型
  alert(person1.hasOwnProperty("name")); //false

3.2原型与in操作符

    两种使用方法：单独使用和在for-in循环中使用。单独使用时，如果通过对象访问能够给定属性，in操作符会返回true,无论该对象存在于实例中还是原型中。

alert("name" in person1);//true
person1.name = "kke";
alert("name" in person1);//true

    使用for-in循环返回的是所有能够通过对象访问的、可枚举的属性。不管该属性是在实例中还是在原型中。所有开发人员定义的属性都是可枚举的。 
注：IE8及更早版本的实现中存在一个bug,及屏蔽不可枚举属性的实例属性不会出现在for-in循环中。

 var o = {
            toString : function(){
                return "My Object";
            }
        }
        for (var prop in o){
            if (prop == "toString"){
                alert("Found toString");//ie中中不显示
            }
        }

    可以通过ECMAScript5的Object.keys()方法来取得对象上所有可枚举的实例属性。接收一个对象参数，返回一个包含该对象所有可枚举属性的字符串数组。

function Person(){
        }
        Person.prototype.name = "Nicholas";
        Person.prototype.age = 29;
        Person.prototype.job = "Software Engineer";
        Person.prototype.sayName = function(){
            alert(this.name);
        };
var keys = Object.keys(Person.prototype);
alert(keys);   //"name,age,job,sayName"
var p1 = new Person();
p1.name = 'rob';
pa.age=13;
alert(Object.keys(p1));//name,age.

    getOwnPropertyNames():得到所有的实例属性无论是否可枚举。

 var keys = Object.getOwnPropertyNames(Person.prototype);
alert(keys);   //"constructor,name,age,job,sayName"

3.3更简单的原型语法

 function Person(){
        }
Person.prototype = {
            name : "Nicholas",
            age : 29,
            job: "Software Engineer",
            sayName : function () {
                alert(this.name);
            }
        };

    但此时原型对象的constructor属性不再指向Person,而是指向Object构造函数。尽管通过instanceof还能返回正确的结果。

 var friend = new Person();
        alert(friend instanceof Object);  //true
        alert(friend instanceof Person);  //true
        alert(friend.constructor == Person);  //false
        alert(friend.constructor == Object);  //true

    3.4原型的动态性

    对原型对象的任何修改都能够立即从实例上反映出来。

 var friend = new Person();
  Person.prototype.sayHi = function(){
         alert("hi");
        };
friend.sayHi();   //hi

    而如果是把原型改为另外一个对象，就等同于切断构造函数与最初原型之间的联系。而实例中的指针是指向最初原型的。因此会出错。

 function Person(){
        }
        var friend = new Person();        
        Person.prototype = {
            constructor: Person,
            name : "Nicholas",
            age : 29,
            job : "Software Engineer",
            sayName : function () {
                alert(this.name);
            }
        };
        friend.sayName();   //error

3.5原型对象的问题

    对于包含引用类型的属性的原型对象，所有实例共享的都是同一个引用类型。

function Person(){
        }
        Person.prototype = {
            constructor: Person,
            name : "Nicholas",
            age : 29,
            job : "Software Engineer",
            friends : ["Shelby", "Court"],
            sayName : function () {
                alert(this.name);
            }
        };       
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");      
alert(person1.friends);    //"Shelby,Court,Van"
alert(person2.friends);    //"Shelby,Court,Van"
alert(person1.friends === person2.friends);  //true

实例一般都会有自己全部的属性的，因此这个问题是很少有人单独使用原型模式的原因所在。

4、组合使用构造函数模式和原型模式

    创建自定义类型最常见的方式就是组合使用构造函数模式和原型模式。构造函数模式用于定义实力属性，而原型模式用于定义方法和共享的属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度地节省了内存。另外，这种混成模式还支持向构造函数传递参数。

function Person(name ,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];
}
Person.ptototype = {
    constructor:Person,
    sayName:function(){
    alert(this.name);
    }
}
var person1 = new Person("hah",32,"doctor");
var person2 = new Person("hah",32,"doctor");
person1.friends.push("van");
alert(person1.friends);Shelby,Court,van
alert(person2.friends);Shelby,Court
alert(person1.sayName = person2.sayName);//true

5、动态原型模式

    把所有信息封装在构造函数中，在构造函数中初始化原型。既可以通过检查某个应该存在的方法是否有效来决定师傅需要初始化原型。

function Person(name ,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    //方法
    if(typeof this.sayName != "function"){
        Person.prototype.sayName = function(){
            alert(this.name);
        };
    }
}

    只在sayName方法不存在的情况下，才会将它添加到原型中。即只在初次调用构造函数时才会执行。if语句检查的可以是初始化之后应该存在的任何属性或方法。只需检查一个就行。若不存在则初始化原型的所有属性或方法。 
注：使用动态原型模式不能使用对象字面量来重写原型，因为如果在已经创建了实例的情况下重写原型，就会切断现有实例与原型之间的联系。

6、寄生构造函数模式

    在函数中创建一个新对象，然后返回新对象。

function SpecialArray(){
    var values = new Array();
    values.push.apply(values,argument);
    values.toPipedString = function(){
        return this.join("|");
    }
    return values;
}
var colors = new SpecialArray("red","blue","green");
alert(colors.topipedString());//red|blue|green

注：使用这种方式不能使用instaneof来确定对象类型。可以使用其他模式的情况下建议不要使用这种模式。

7、稳妥构造函数模式

    稳妥对象指的是没有公共属性，而且其方法也不引用this的对象。适合在一些安全的环境中或者防止数据被其他应用程序改动时使用。两个特点： 

    1. 新创建对象的实例方法不引用this 

    2. 不使用new擦操作符调用构造函数。

function Person(name,age,job){
    var 0 = new Object();
    //定义私有变量和函数
    //添加方法
    o.sayName = function(){
        alert(name);
    }
    return o;
}
var friends = Person("hdkl",23,"dlksl");
friends.sayName();//hdkl

方法	细节
工厂模式	用函数来封装以特定接口创建对象的细节。
	优点：可以无数次调用函数。
	缺点：但没有解决对象识别的问题。
构造函数模式	没有显示地创建对象； 直接将属性和方法赋给了this对象； 没有return语句。 构造函数始终都以一个大写字母开头，而非构造函数应该以一个小写字母开头。 要创建构造函数的新实例，必须使用new操作符。
	优点：构造函数模式胜过工厂模式的地方在于：可以将它的实例标识为一种特定的类型。
	缺点：每个方法都要在每个实例上重新创建一遍。
原型模式	每个函数都有一个prototype（原型）属性，此属性是一个指针，指向一个对象，此对象的用途是包含可以由特定类型的所有实例共享的属性和方法。 当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性，但不会修改那个属性。使用delete操作符则可以完全删除实例属性，能够重新访问原型中的属性。 hasOwnProperty( )方法可以检测一个属性是存在于实例中，还是存在于原型中。只有存在于对象实例中，才会返回true。 单独使用时，in操作符会在通过对象能够访问给定属性时返回true，无论该属性存在于实例中还是原型中。只要in操作符返回true，而hasOwnProperty( )返回false，就可以确定属性时原型中的属性。 hasPrototypeProperty( )方法，当原型属性存在时，返回true，当原型属性被实例重写时，返回false。 在使用for-in循环时，返回的是所有能够通过对象访问的、可枚举的属性，其中既包括存在于实例中的属性，也包括存在于原型中的属性。 重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的联系，他们引用的仍然是最初的原型。
	优点：可以让所有对象实例共享它所包含的属性和方法，即不必再构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中。
	缺点：由共享本质，对于包含引用类型值的属性而言问题突出。
组合使用构造函数模式和原型模式	La manière la plus courante de créer une personnalisation, ainsi que le formulaire par défaut utilisé pour définir les types de référence. Les propriétés de l'instance sont définies dans le constructeur, et le constructeur de propriétés et les méthodes partagées par toutes les instances sont définies dans le prototype.
	Avantages : Les avantages du constructeur d'ensembles et du modèle de prototype.
Modèle de prototype dynamique	Utilisez les instructions if pour vérifier les propriétés ou méthodes qui devraient exister après l'initialisation. Le type d'un objet créé à l'aide de ce mode peut être déterminé à l'aide de l'opérateur instanceof.
Modèle de constructeur de parasites	En plus d'utiliser l'opérateur new et d'appeler la fonction wrapper utilisée un constructeur, ceci Le mode est le même que le mode usine. Si le constructeur ne renvoie pas de valeur, il renverra une nouvelle instance d'objet par défaut. En ajoutant une instruction return à la fin du constructeur, vous pouvez remplacer la valeur renvoyée en appelant le constructeur. L'objet renvoyé n'a aucune relation directe avec le constructeur ou les propriétés du prototype du constructeur. Impossible de compter sur l'opérateur instanceof pour déterminer le type d'objet. Vous pouvez utiliser d'autres modèles, essayez de ne pas utiliser ce modèle
Modèle de constructeur sûr	Objet sûr : un objet qui n'a pas de propriétés publiques et dont les méthodes n'y font pas référence. Il existe deux différences avec le modèle de construction parasite : premièrement, la méthode d'instance de l'objet nouvellement créé ne fait pas référence à cela ; deuxièmement, l'opérateur new n'est pas utilisé pour appeler le constructeur.

三、继承

ECMAScript只支持实现继承，而且依靠原型链实现

1、原型链

    ECMAScript中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么，假如我们让原型对象等于另一个类型的实例，结果会怎么样呢？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。这就是所谓原型链的基本概念。 

    让原型对象等于另一个类型的实例，而这个原型对象又指向另一个原型，如此层层递进构成了原型链。 实现原型链有一种基本模式：

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

    该继承的本质是重写原型对象，代之以一个新类型的实例。intance指向SubType的原型，SubType的原型又指向SuperType的原型。此时instance.constructor现在指向的是SuperType。现在的搜索过程是沿着原型链向上查找。上面的例子是这样的： 
    1. 搜索实例 
    2. 搜索SubType.prototype 
    3. 搜索SuperType.protoType

1.1别忘记默认的原型

    所有引用类型都默认继承了Object,而这个继承也是通过原型链实现的。所有函数的默认原型都是Object的实例，因此默认原型都会包含一个指向Object.prototype的内部指针。

1.2确定原型和实例的关系

    使用instanceof操作符，只要用这个操作符来测试实例与原型链中出现过得构造函数，结果就会返回true.

alert(instance instanceof Object);//true;
alert(instance instanceof SuperType);//true;
alert(instance instanceof SubType);//true;

使用isPrototypeOf()方法，只要原型链中出现过的原型，都可以说是该原型链所派生的实例的原型，都会返回true.

alert(Object.prototype.isPrototypeOf(instance));    //true
        alert(SuperType.prototype.isPrototypeOf(instance)); //true
        alert(SubType.prototype.isPrototypeOf(instance));   //true

1.3谨慎地定义方法

    在重写超类中的方法或添加方法时要注意，给原型添加方法的代码一定要放在替换原型的语句之后。 还有就是在通过原型链实现继承时，不能使用对象字面量创建原型方法，因为会重写原型链。

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;
};
//重写超类型中的方法
SubType.prototype.getSuperValue=function(){
    return false;
};
var instance = new SubType();
alert(instance.getSuperValue()); //false;

    重写的方法getSuperValue()是原型链中已经存在的一个方法，但重写这个方法将会屏蔽原来的那个方法。换句话说，当通过SubType的实例调用getSuperValue()时，调用的就是这个重新定义的方法；但通过SuperType的实例调用getSuperValue()时，还会继续调用原来的那个方法。这里要格外注意的是，必须在用SuperType的实例替换原型之后，再定义这两个方法。 

    还有一点需要注意，即在通过原型链实现继承时，不能使用对象字面量创建原型方法。因为这样做就会重写原型链。

1.4原型链的问题

    原型链虽然很强大，可以用它来实现继承，但它也存在一些问题。其中，最主要的问题来自包含引用类型值的原型。想必大家还记得，我们前面介绍过包含引用类型值的原型属性会被所有实例共享；而这也正是为什么要在构造函数中，而不是在原型对象中定义属性的原因。在通过原型来实现继承时，原型实际上会变成另一个类型的实例。于是，原先的实例属性也就顺理成章地变成了现在的原型属性了。 

下列代码可以说明这个问题

function SuperType(){
    this.colors={"red","blue","green"};
}
function SubType(){
}
//继承了SuperTYpe
SubType.prototype=new SuperType();
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors; //"red,blue,green.black"
var instance2 = new SubType();
alert(instance1.colors; //"red,blue,green.black"

    这个例子中的SuperType构造函数定义了一个colors属性，该属性包含一个数组（引用类型值）。SuperType的每个实例都会有各自包含自己数组的colors属性。当SubType通过原型链继承了SuperType之后，SubType之后，SubTYpe.prototype就变成SuperType的一个实例，因此它也拥有了一个它自己的colors属性——就跟专门创建了一个SubType.prototype.colors属性一样。但结果是什么呢？结果是SubType的所有实例都会共享这一个colors属性。而我们对instance1.colors的修改能够通过instance2.colors反映出来，就已经充分证明了这一点。 

    原型链的第二个问题是：在创建子类型的实例时，不能向超类型的构造函数中传递参数。实际上，应该说是没有办法在不影响所有对象实例的情况下，给超类型的构造函数传递参数。

2、借用构造函数

在子类型构造函数的内部调用超类型构造函数。

function SuperType(){
    this.colors = {"red","blue"};
}
function SubType(){
    SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);//red,blue,black
var instance2= new SubType();
alert(instance2.colors);//red,blue

结果就是SubType的每个实例都会具有自己的colors属性的副本了。

3、组合继承

使用原型链实现对原型属性和方法的继承，借用构造函数实现对实例属性的继承。

function SuperType(name){
    this.name = name;
    this.colors = {"red","blue"};
}
SuperType.prototype.sayName = function(){
    alert(this.name);
};
function SubType(name,age){
    //继承属性
    SuperType.call(this,name);
    this.age = age;
}
//继承方法
SubType.prototype = new SuperType();

这是js中最常见的继承方法。

4、原型式继承

    Object.create():接收两个参数，一个是用作原型的对象，一个是为新对象定义个额外属性的对象（可选）

var person = {
            name: "Nicholas",
            friends: ["Shelby", "Court", "Van"]
        };

        var anotherPerson = Object.create(person);
        anotherPerson.name = "Greg";
        anotherPerson.friends.push("Rob");

        var yetAnotherPerson = Object.create(person);
        yetAnotherPerson.name = "Linda";
        yetAnotherPerson.friends.push("Barbie");

        alert(person.friends);   //

        var anotherPerson = Object.create(person, {
            name: {
                value: "Greg"
            }
        });

        alert(anotherPerson.name);  //"Greg"

5、寄生式继承

    创建一个仅用于封装继承过程的函数，该函数在内部以某种方法来增强对象。

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);

6、寄生组合式继承

    组合继承的问题就是会调用两次超类型构造函数。一次是在创建子类型原型的时候，一次是在子类型构造函数内部。 

    寄生组合式继承：使用寄生式继承来继承超类型的原型。

function inheriPrototype(subType,superType){
    var prototype = object(superType.ptototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
};
function SuperType(name){
    this.name = name;
    this.colors = {"red","blue"};
}
SuperType.prototype.sayName = function(){
    alert(this.name);
};
function SubType(name,age){
    //继承属性
    SuperType.call(this,name);
    this.age = age;
}
inheriPrototype(SubType,SuperType)

    js最理性的继承方式

方法	实现
原型链	利用原型让一个引用类型继承另一个引用类型的属性和方法。每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。
	原型链的两大问题，一是来自包含引用类型值的原型，另一个是在创建子类型的实例时，不能向超类型的构造函数中传递参数。
借用构造函数	使用apply()和call( )方法在新创建的对象上执行构造函数。
	优点：相对于原型链而言，可以在子类型构造函数中向超类型构造函数传递参数
	缺点：方法都在构造函数中定义，因此函数复用就无从谈起。
组合集成	将原型链和借用构造函数的技术一起，取长处的方式。原理是使用原型链实现对原型属性和方法的集成，而通过借用构造函数来实现对实例属性的继承。
	优点：避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为JavaScript中最常用的继承模式。而且，instanceof和isPrototypeOf( )也能够用于识别基于组合继承创建的对象。
	缺点：无论什么情况下，都会调用两次超类型构造函数，一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。
原型式继承	此方法没有严格意义上的构造函数，借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。 ECMAScript通过新增Object.create( )方法规范化了原型式继承。
	缺点：包含引用类型值的属性始终都会共享相应的值，就像使用原型模式一样。
寄生式继承	创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真的处理之后一样返回对象。
	缺点：使用寄生式集成来为对象添加函数，会由于不能做到函数复用而降低效率
寄生组合式继承	Héritez des propriétés en empruntant des constructeurs et héritez de méthodes via la forme hybride de la chaîne de prototypes. L'idée de base est la suivante : au lieu d'appeler un constructeur super-violent pour spécifier le prototype d'un sous-type, tout ce dont nous avons besoin est une copie du prototype du supertype. Autrement dit, utilisez l'héritage parasite pour hériter du prototype du supertype, puis attribuez le résultat au prototype du sous-type.
	Avantages : haute efficacité, la valeur appelle une fois le constructeur du prototype de supertype, la chaîne de prototypes peut rester inchangée et instanceof et isPrototypeOf() peuvent être utilisés normalement. C’est le paradigme d’héritage le plus idéal.

Document de référence : https://blog.csdn.net/xiaoerjun/article/details/54524167

   https://blog.csdn.net/xiaoerjun/article/details/54572191

 https://blog. csdn.net /chenxianru1/article/details/78527533

                                                   🎜>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!