Résumé d'apprentissage JavaScript [8], programmation orientée objet

1. Qu'est-ce que la programmation orientée objet

　Pour comprendre la programmation orientée objet , vous devez d'abord Pour comprendre ce qu'est un objet, tout d'abord, vous devez préciser que l'objet mentionné ici n'est pas l'objet d'un petit ami et d'une petite amie dans la vie. Orienté objet signifie orienté objet. . Dans le code, c'est un autre morceau de code, à partir de là, jour et nuit avec amour c'est ce qu'on appelle orienté objet. si quelqu'un veut l'expliquer aux autres comme ça, la blague sera grande. , Mais votre petit ami ou votre petite amie peut être considéré comme un objet Nous avons déjà brièvement présenté les objets, c'est-à-dire que vous pouvez considérer une personne. en tant qu'objet. L'objet a ses attributs et ses méthodes. Les attributs sont tels que : le sexe, la taille, le poids, le lieu d'origine, etc. Les méthodes incluent la marche, la course, le saut, etc. Nous pouvons alors comprendre l'objet sous deux aspects :

　 (1) À partir de l'objet lui-même, l'objet est l'abstraction d'un seul objet physique.

Un livre, une voiture et une télévision peuvent être considérés comme des objets. Une page Web, une base de données et une requête de serveur peuvent également être considérées comme un objet. 🎜>Lorsque les objets physiques sont abstraits en objets, alors la relation entre les objets physiques devient la relation entre les objets, de sorte que des situations réelles puissent être simulées et que des « objets » puissent être programmés.

　(2) De par la nature de l'objet, l'objet est un conteneur, comprenant des propriétés et des méthodes.

　Les soi-disant attributs sont l'état de l'objet, et les soi-disant méthodes sont le comportement de l'objet (pour compléter un certain tâche). Par exemple, nous pouvons faire abstraction des animaux. En tant qu'objet, les attributs enregistrent l'animal spécifique et les méthodes représentent le comportement de l'animal, tel que : chasser, courir, attaquer, voler, ramper, se reposer, etc.

　De manière générale, l'objet est un tout et fournit quelques opérations externes, Par exemple, nous ne comprenons pas la structure interne et les principes de fonctionnement des téléviseurs, mais nous les utilisons tous. Pour les téléviseurs, tant que nous utilisons bien les boutons et savons comment les faire fonctionner, cela n'a rien à voir avec nous. Le circuit et les composants fonctionnent. Tant que le téléviseur peut fonctionner normalement, tant que nous savons à quoi sert chaque bouton, nous pouvons utiliser ces fonctions. Un autre exemple est d'obtenir l'heure Date. Nous pouvons obtenir différentes heures via différents attributs, tels que l'année, le mois et la semaine. Nous ne savons pas comment cela est implémenté spécifiquement, mais nous savons tous quel attribut utiliser pour obtenir ce dont nous avons besoin. . Ceci est pour objet.

　Alors, qu'est-ce que l'orientation objet exactement ? Pour faire simple, ses fonctions sont utilisées sans en comprendre les principes internes. Autrement dit, lorsque vous utilisez un objet, vous vous concentrez uniquement sur les fonctions fournies par l'objet et ne faites pas attention à ses détails internes. Un exemple d'application typique est jQuery.

　　L'orientation objet est une idée universelle. Elle n'est pas seulement utilisée en programmation, elle peut être utilisée dans n'importe quoi. L'idée de l'orientation objet est simplement que nous ne l'appelons pas directement orienté objet, mais que nous l'appelons autrement. Par exemple, si vous allez manger, vous dites au chef de commander un morceau de porc braisé, puis vous pouvez vous asseoir et attendre de manger. Vous ne pouvez pas dire au chef de couper la viande en carrés ou en carrés. des formes rondes. Vous devez d'abord ajouter du sel, puis de la sauce soja et de la cassonade ou du sucre candi. Si vous voulez vraiment faire cela, le chef devra s'inquiéter pour vous. vous avez juste besoin de lui dire ce que vous voulez manger, et vous n'avez pas à vous soucier de lui. Peu importe la façon dont vous le préparez, il vous le servira naturellement. C'est une pensée typiquement orientée objet dans la vie.

　Bien qu'il soit différent des langages de programmation orientés objet traditionnels, JS possède également de fortes capacités de programmation orientée objet Ce qui suit sera. une analyse détaillée Qu'est-ce que la programmation orientée objet JS ci-dessous.

　La programmation orientée objet (en abrégé POO) est le paradigme de programmation dominant actuel. Le soi-disant paradigme est celui qui se conforme à un certain niveau de modèle relationnel. rassembler. Son idée principale est d'abstraire diverses relations complexes du monde réel en objets, puis de compléter la simulation du monde réel grâce à la division du travail et à la coopération entre les objets. Un programme de programmation orienté objet est une collection qui se conforme à un certain niveau de modèle de relation. Il s'agit d'une combinaison d'une série d'objets, et chaque objet est. un centre fonctionnel. Il a une division claire du travail et peut effectuer des tâches telles que la réception d’informations, le traitement des données et l’envoi d’informations. Par conséquent, la programmation orientée objet présente les caractéristiques de flexibilité, de réutilisabilité du code, de modularité, etc., et est facile à maintenir et à développer. Elle est très adaptée aux projets à grande échelle avec. plusieurs personnes, mais en temps normal Généralement non utilisé dans les projets.

　Programmation orientée objet (POO ) Caractéristiques :

　(1), abstraction : saisir le problème principal

Ce qu'on appelle l'abstraction, jetons d'abord un coup d'œil à l'explication de l'abstraction donnée par Baidu : l'abstraction consiste à extraire les caractéristiques communes et essentielles de beaucoup de choses, tout en écartant leurs caractéristiques non essentielles. Par exemple, les pommes, les bananes, les poires, les raisins, les pêches, etc., ont pour caractéristique commune d’être des fruits. Le processus pour arriver au concept de fruit est un processus abstrait. Pour résumer, il faut comparer. Sans comparaison, les parties essentiellement communes ne peuvent être trouvées. Les caractéristiques communes font référence aux caractéristiques qui peuvent distinguer un type de chose d’autres types de choses. Ces caractéristiques distinctives sont également appelées caractéristiques essentielles. Par conséquent, extraire les caractéristiques communes des choses signifie extraire les caractéristiques essentielles des choses et écarter les caractéristiques non essentielles. Le processus d’abstraction est donc aussi un processus d’adaptation. Lors de l’abstraction, les similitudes et les différences dépendent de l’angle sous lequel on fait l’abstraction. L'angle d'abstraction dépend du but de l'analyse du problème.

　En JS, le cœur de l'abstraction est l'abstraction, qui consiste à saisir les caractéristiques communes et le problème central. Par exemple, les personnes ont de nombreuses caractéristiques, telles que le nom, le sexe, le lieu d'origine, la date de naissance, la taille, le poids, le groupe sanguin, l'adresse du domicile, qui sont leurs parents, quels sont les noms de leurs enfants, etc. . Si une entreprise souhaite créer des fiches d'employés, il est impossible d'indiquer toutes les caractéristiques. Vous devez capturer certaines caractéristiques principales, telles que le nom, le sexe, le service, le poste, ou simplement ajouter la date d'adhésion. Si vous devez vous inscrire sur un site de rencontres, vous n'avez pas besoin des caractéristiques spécifiées dans le dossier de l'employé pour le moment. Vous avez besoin de certaines caractéristiques telles que : le sexe, l'âge, la taille, la forme du corps, le signe du zodiaque, si vous avez un. voiture, que vous ayez une maison, un emploi, des revenus, une situation familiale, etc. Il s'agit d'extraire les principales caractéristiques d'un type de choses et les caractéristiques liées au problème. C'est l'abstraction de la programmation orientée objet.

　(2), Encapsulation : ne pas considérer l'implémentation interne, considérer uniquement l'utilisation fonctionnelle

Qu'est-ce qu'un emballage ? C'est comme une télévision. Nous pouvons voir la télévision, comme son apparence, sa couleur, etc., mais nous n'avons pas besoin de savoir ce qu'il y a à l'intérieur. et il peut toujours être utilisé normalement. À moins que le produit ne soit cassé, l'objet à l'intérieur est l'emballage. JS ne prend pas en compte l'implémentation interne, mais considère uniquement l'utilisation des fonctions, tout comme l'utilisation de jQuery. jQuery est une encapsulation de JS. Lorsque nous utilisons les fonctions de jQuery, nous pouvons obtenir le même effet que JS. , et c'est mieux que Utiliser JS est plus pratique.

(3), héritage : hériter de nouveaux objets à partir d'objets existants

　Le soi-disant héritage peut également être appelé hérédité La compréhension populaire est que les enfants peuvent faire des choses que les parents peuvent faire, comme manger et dormir. Dans JS, par exemple, il y a un objet A. A a quelques fonctions Maintenant un objet B est hérité de A. Cet objet B a toutes les fonctions de l'objet A.

　Une autre situation est Héritage multiple, tout comme un enfant peut avoir plusieurs papa , c'est évidemment impossible, mais c'est faisable dans le programme Par exemple, il existe un type de boîte avec une caractéristique qui peut être utilisée pour contenir des choses, et il existe aussi un type de voiture avec la caractéristique. caractéristique de S'il peut fonctionner, il a des roues. À l'heure actuelle, vous pouvez utiliser l'héritage multiple pour hériter d'un autre type de camion porte-conteneurs. Ses caractéristiques sont qu'il peut à la fois charger des objets et fonctionner, et il a des roues.

　(4), Polymorphisme

　Polymorphisme, comme le nom l'indique, est une variété d'états. Dans les langages orientés objet, plusieurs implémentations différentes d'interfaces sont appelées polymorphisme. Le polymorphisme n'est pas si évident en JS, mais il est plus utile pour les langages forts, tels que Java et C. Pour un langage faible comme JS, cela ne veut pas dire grand-chose.

2. Composition des objets

　Les objets peuvent être divisés en objets hôtes, objets locaux et objets intégrés.

　Les objets hôtes sont DOM et BOM, qui sont des objets fournis par le navigateur.

　Les objets locaux sont des objets non statiques. Les objets dits locaux doivent d'abord être nouveaux, puis utilisés. Objets couramment utilisés tels que : Objet, Fonction, Tableau, Chaîne, Booléen, Nombre, Date, RegExp, Erreur.

　Les objets intégrés sont des objets statiques, qui sont des classes qui peuvent être utilisées directement sans nouveauté. Les mathématiques sont l'objet intégré le plus courant et le seul pouvant être utilisé directement.

　La première étape de la programmation orientée objet consiste à créer des objets. Les langages de programmation orientés objet typiques ont le concept de "classe". La soi-disant classe est l'abstraction des objets et représente les caractéristiques communes d'un certain type de choses, Par exemple, les fruits et les objets sont des instances spécifiques de classes. Par exemple, les pommes sont un type de fruit les classes sont abstraites et n'occupent pas de mémoire, tandis que les objets sont concrets et occupent de l'espace de stockage. Mais il n'y a pas de concept de « classe » en JS, mais il peut être implémenté à l'aide de constructeurs.

Nous l'avons déjà dit, Le soi-disant "constructeur" est une fonction utilisée pour créer un nouvel objet, en tant que structure de base de l’objet. Un constructeur peut créer plusieurs objets, qui ont tous la même structure. Le constructeur est une fonction ordinaire, mais ses caractéristiques et son utilisation sont différentes des fonctions ordinaires. La plus grande caractéristique du constructeur est que, Vous devez utiliser new lorsque créer un mot-clé d'objet, et le mot-clé this peut être utilisé dans le corps de la fonction, qui représente l'instance d'objet à créer, et ceci est utilisé pour pointer vers l'objet actuel lorsque la fonction est exécutée. Nous analyserons la situation spécifique plus tard. Étudions maintenant la composition de l’objet.

En fait, nous avons déjà compris le concept d'objet, il n'est donc pas difficile de voir de quoi il est fait Les objets sont composés de propriétés et de propriétés. méthodes. En JS, tout est un objet, Alors, comment devons-nous comprendre les propriétés et les méthodes en JS ? Les attributs sont des variables et les méthodes sont des fonctions. Les attributs représentent le statut, tout comme les attributs d'un animal enregistrent de quel animal il s'agit. Il est statique. Le nom de la variable peut également être considéré comme le nom de la méthode, qui est une description de la méthode. La méthode est un comportement, un processus permettant d'accomplir une certaine tâche, et elle est dynamique.

3. Programmation orientée objet

Nous utilisons des exemples pour ajouter des attributs et des méthodes aux objets afin de comprendre la composition des objets. et l'orientation des objets.

　(1), Instance : Ajouter des attributs à l'objet

<script>
var a = 2;
alert(a);    //返回：2

var arr = [5,6,7,8,9];
//给数组定义一个属性a,等于2。
arr.a = 2;
alert(arr.a);    //返回：2
arr.a++;
alert(arr.a);    //返回：3
</script>

A travers l'exemple ci-dessus, nous pouvons voir que les variables et les attributs sont les mêmes. Ce que les variables peuvent faire, les attributs peuvent le faire, et les variables peuvent faire tout ce que les attributs peuvent faire. La différence entre elles est que les variables sont libres et n'appartiennent à aucun objet, tandis que les attributs ne sont pas libres. Ils appartiennent à un objet Tout comme l'objet a dans l'exemple, il appartient au tableau arr. . Lorsqu'il est utilisé, écrivez-le comme arr.a. Nous pouvons définir des attributs pour n'importe quel objet, comme définir un attribut pour p pour l'indexation : op[i].index = i.

(2), Instance : au object Ajouter une méthode

<script>
function a(){
    alert('abc');    //返回：abc
}

var arr = [5,6,7,8,9];
//给函数添加一个a函数的方法
arr.a = function (){
    alert('abc');    //返回：abc
};
a();
arr.a();
</script>

À partir de l'exemple ci-dessus, vous pouvez voir que le a la fonction est également Gratuite , et Lorsque ceci une fonction appartient à un objet, c'est la méthode, est la méthode a du tableau arr, et est la méthode de cet objet. Donc Les fonctions et les méthodes sont également équivalentes. Ce que les fonctions peuvent faire, les méthodes peuvent le faire. La raison. est que les fonctions sont libres, alors que les méthodes appartiennent à un objet.

Nous ne pouvons pas ajouter de propriétés et de méthodes aux objets système à volonté, sinon les propriétés et méthodes existantes seront écrasées. Par exemple, dans l'exemple, nous attachons des attributs et des méthodes à l'objet tableau. Le tableau a ses propres attributs et méthodes. Si nous y ajoutons des attributs et des méthodes, il écrasera les attributs et les méthodes du. tableau lui-même. Cela nécessite une attention particulière.

　(3), Instance : Créer un objet

<script>
var obj = new Object();
var d = new Date();
var arr = new Array();
alert(obj);    //返回：[object Object]
alert(d);    //返回当前时间
alert(arr);    //返回为空，空数组
</script>

　Pour créer un nouvel objet, vous pouvez créer un nouvel objet. L'objet est un objet vide avec seulement quelques éléments fournis avec le système. Par conséquent, lors de l'implémentation orientée objet, vous pouvez ajouter des méthodes et des attributs à l'objet. Cela peut minimiser les conflits avec les autres.

　(4), Exemple : Programme orienté objet

<script>
//创建一个对象
var obj = new Object();
//可写为：var obj={};

//给对象添加属性
obj.name = '小白';
obj.qq = '89898989';

//给对象添加方法
obj.showName = function (){
    alert('我的名字叫：'+this.name);
};
obj.showQQ = function (){
    alert('我的QQ是：'+this.qq);
};
obj.showName();    //返回：我的名字叫：小白
obj.showQQ();    //返回：我的QQ是：89898989

//再创建一个对象
var obj2 = new Object();

obj2.name = '小明';
obj2.qq = '12345678';

obj2.showName = function (){
    alert('我的名字叫：'+this.name);
};
obj2.showQQ = function (){
    alert('我的QQ是：'+this.qq);
};
obj2.showName();    //返回：我的名字叫：小白
obj2.showQQ();        //返回：我的QQ是：12345678
</script>

　Il s'agit de la programmation orientée objet la plus simple. Créez un objet, ajoutez des propriétés et des méthodes à l'objet et simulez le réel. -situations de la vie. Programme avec des objets. Il n'y a aucun problème à exécuter ce petit programme, mais il y a de sérieux défauts. Il ne peut pas y avoir un seul objet utilisateur dans un site Web, il peut y en avoir des milliers, et il est impossible de donner un nouvel objet à chaque utilisateur. objet. . En fait, vous pouvez l’encapsuler dans une fonction puis l’appeler autant de fois qu’il y a d’utilisateurs. Une telle fonction s’appelle un constructeur.

4、构造函数

　　构造函数(英文：constructor)就是一个普通的函数，没什么区别，但是为什么要叫"构造"函数呢？并不是这个函数有什么特别，而是这个函数的功能有一些特别，跟别的函数就不一样，那就是构造函数可以构建一个类。构造函数的方式也可以叫做工厂模式，因为构造函数的工作方式和工厂的工作方式是一样的。工厂模式又是怎样的呢？这个也不难理解，首先需要原料，然后就是对原料进行加工，最后出厂，这就完事了。构造函数也是同样的方式，先创建一个对象，再添加属性和方法，最后返回。既然说构造函数可以构建一个类出来，这个该怎么理解呢？很 easy，可以用工厂方式理解，类就相当于工厂中的模具，也可以叫模板，而对象就是零件、产品或者叫成品，类本身不具备实际的功能，仅仅只是用来生产产品的，而对象才具备实际的功能。比如：var arr = new Array(1,2,3,4,5); Array 就是类，arr 就是对象， 类 Array 没有实际的功能，就是用来存放数据的，而对象 arr 具有实际功能，比如：排序sort()、删除shift()、添加push()等。我们不可能这么写：new arr(); 或 Array.push();，正确的写法：arr.push();。

<script>
function userInfo(name, qq){

    //1.原料 - 创建对象
    var obj = new Object();

    //2.加工 - 添加属性和方法
    obj.name = name;
    obj.qq = qq;
    obj.showName = function (){
        alert('我的名字叫：' + this.name);
    };
    obj.showQQ = function (){
        alert('我的QQ是：' + this.qq);
    };
    //3.出厂 - 返回
    return obj;
}

var obj1 = userInfo('小白', '89898989');
obj1.showName();
obj1.showQQ();

var obj2 = userInfo('小明', '12345678');
obj2.showName();
obj2.showQQ();
</script>

 

　　这个函数的功能就是构建一个对象，userInfo() 就是构造函数，构造函数作为对象的类，提供一个模具，用来生产用户对象，我们以后在使用时，只调用这个模板，就可以无限创建用户对象。我们都知道，函数如果用于创建新的对象，就称之为对象的构造函数，我们还知道，在创建新对象时必须使用 new 关键字，但是上面的代码，userInfo() 构造函数在使用时并没有使用 new关 键字，这是为什么呢？且看下文分解。

 

5、new 和 this

　　(1)new

　　new 关键字的作用，就是执行构造函数，返回一个实例对象。看下面例子：

<script>var user = function (){  this.name = '小明';
};var info = new user();
alert(info.name);    //返回：小明</script>

 

 　　上面实例通过 new 关键字，让构造函数 user 生产一个实例对象，保存在变量 info 中，这个新创建的实例对象，从构造函数 user 继承了 name 属性。在 new 命令执行时，构造函数内部的 this，就代表了新生产的实例对象，this.name 表示实例有一个 name 属性，他的值是小明。

　　使用 new 命令时，根据需要，构造函数也可以接受参数。

<script>
var user = function (n){
  this.name = n;
};

var info = new user('小明');
alert(info.name);    //返回：小明
</script>

 

　　new 命令本身就可以执行执行构造函数，所以后面的构造函数可以带括号，也可以不带括号，下面两行代码是等价的。

var info = new user;var info = new user();

　　那如果没有使用 new 命令，直接调用构造函数会怎样呢？这种情况下，构造函数就变成了普通函数，并不会生产实例对象，this 这时候就代表全局对象。

<script>
var user = function (n){
  this.name = n;
};
alert(this.name);    //返回：小明

var info = user('小明');
alert(info.name);    //报错
</script>

　　上面实例中，调用 user 构造函数时，没有使用 new 命令，结果 name 变成了全局变量，而变量 info 就变成了 undefined，报错：无法读取未定义的属性 'name'。使用 new 命令时，他后边的函数调用就不是正常的调用，而是被 new 命令控制了，内部的流程是，先创建一个空对象，赋值给函数内部的 this 关键字，this 就指向一个新创建的空对象，所有针对 this 的操作，都会发生在这个空对象上，构造函数之所以叫"构造函数"，就是说这个函数的目的，可以操作 this 对象，将其构造为需要的样子。下面我们看一下 new 和函数。

<script>
var user = function (){
//function = user(){
    alert(this);
}
user();    //返回：Window
new user();//返回：Object
</script>

 

　　通过上面实例，可以看到，在调用函数时，前边加个 new，构造函数内部的 this 就不是指向 window 了，而是指向一个新创建出来的空白对象。

　　说了这么多，那为什么我们第四章的构造函数，在使用的时候没有加 new 关键字呢，因为我们完全是按照工厂模式，也就是构造函数的结构直接编写的，我们的步骤已经完成了 new 关键字的使命，也就是把本来 new 需要做的事，我们已经做了，所以就用不着 new 了。那这样岂不是做了很多无用功，写了不必要的代码，浪费资源，那肯定是了，这也是构造函数的一个小问题，我们在下一章再做具体分析。

　　(2)、this

　　this 翻译为中文就是这，这个，表示指向。之前我们提到过，this 指向函数执行时的当前对象。那么我们先来看看函数调用，函数有四种调用方式，每种方式的不同方式，就在于 this 的初始化。

　　①、作为一个函数调用

1 <script>2 function show(a, b) {3     return a * b;4 }5 alert(show(2, 3));    //返回：66 </script>

 

　　实例中的函数不属于任何对象，但是在 JS 中他始终是默认的全局对象，在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面，在浏览器中的页面对象是浏览器窗口(window 对象)，所以该函数会自动变为 window 对象的函数。

<script>
function show(a, b) {
    return a * b;
}
alert(show(2, 3));    //返回：6
alert(window.show(2, 3));//返回：6
</script>

　　上面代码中，可以看到，show() 和 window.show() 是等价的。这是调用 JS 函数最常用的方法，但不是良好的编程习惯，因为全局变量，方法或函数容易造成命名冲突的 Bug。

　　当函数没有被自身的对象调用时，this 的值就会变成全局对象。

1 <script>2 function show() {3     return this;4 }5 alert(show());    //返回：[object Window]6 </script>

　　全局对象就是 window 对象，函数作为全局对象对象调用，this 的值也会成为全局对象，这里需要注意，使用 window 对象作为一个变量容易造成程序崩溃。

　　②、函数作为方法调用

<script>
var user = {
    name : '小明',
    qq : 12345678,
    info : function (){
        return this.name + 'QQ是：' + this.qq;
    }
}
alert(user.info());
</script>

　　在 JS 中可以将函数定义为对象的方法，上面实例创建了一个对象 user，对象拥有两个属性(name和qq)，及一个方法 info，该方法是一个函数，函数属于对象，user 是函数的所有者，this 对象拥有 JS 代码，实例中 this 的值为 user 对象，看下面示例：

<script>
var user = {
    name : '小明',
    qq : 12345678,
    info : function (){
        return this;
    }
}
alert(user.info());    //返回：[object Object]
</script>

　　函数作为对象方法调用，this 就指向对象本身。

　　③、使用构造函数调用函数

　　如果函数调用前使用了 new关键字，就是调用了构造函数。

<script>
function user(n, q){
    this.name = n;
    this.qq  = q;
}

var info = new user('小明', 12345678);
alert(info.name);    //返回：小明
alert(info.qq);        //返回：12345678
</script>

　　这看起来就像创建了新的函数，但实际上 JS 函数是新创建的对象，构造函数的调用就会创建一个新的对象，新对象会继承构造函数的属性和方法。构造函数中的 this 并没有任何的值，this 的值在函数调用时实例化对象(new object)时创建，也就是指向一个新创建的空白对象。

　　④、作为方法函数调用函数

　　在 JS 中，函数是对象，对象有他的属性和方法。call() 和 apply() 是预定义的函数方法，这两个方法可用于调用函数，而且这两个方法的第一个参数都必须为对象本身。

<script>
function show(a, b) {
    return a * b;
}
var x = show.call(show, 2, 3);
alert(x);    //返回：6

function shows(a, b) {
    return a * b;
}
var arr = [2,3];
var y = shows.apply(shows, arr);
var y1 = shows.call(shows, arr);
alert(y);    //返回：6
alert(y1);    //返回：NaN
</script>

　　上面代码中的两个方法都使用了对象本身作为作为第一个参数，两者的区别在于：apply()方法传入的是一个参数数组，也就是将多个参数组合称为一个数组传入，而call()方法则作为call的参数传入（从第二个参数开始），不能传入一个参数数组。

　　通过 call() 或 apply() 方法可以设置 this 的值, 且作为已存在对象的新方法调用。在下面用到的时候，我们再具体分析。

　　this 就是用于指向函数执行时的当前对象，下面再看一个实例：

<body>
<div id="div1"></div>
<script>
var oDiv = document.getElementById('div1');
//给一个对象添加事件，本质上是给这个对象添加方法。
oDiv.onclick = function (){
    alert(this);    //this就是oDiv
};

var arr = [1,2,3,4,5];
//给数组添加属性
arr.a = 12;
//给数组添加方法
arr.show = function (){
    alert(this.a);    //this就是arr
};
arr.show();    //返回：12


function shows(){
    alert(this);    //this就是window
}

//全局函数是属于window的。
//所以写一个全局函数shows和给window加一个shows方法是一样的。
window.shows = function (){
    alert(this);
};
shows();    //返回：[object Window]
</script>
</body>

 　　上面的代码，this 就代表着当前的函数(方法)属于谁，如果是一个事件方法，this 就是当前发生事件的对象，如果是一个数组方法，this 就是数组对象，全局的方法是属于 window 的，所以 this 指向 window。

 

6、原型

　　前面我们说过构造函数在使用时没有加 new，这只能算是一个小问题，没有加我们可以给加上，无伤大雅，但其实他还存在着一个更严重的问题，那就是函数重复定义。

<script>
function userInfo(name, qq){

    //1.原料 - 创建对象
    var obj = new Object();

    //2.加工 - 添加属性和方法
    obj.name = name;
    obj.qq = qq;
    obj.showName = function (){
        alert('我的名字叫：'+this.name);
    };
    obj.showQQ = function (){
        alert('我的QQ是：'+this.qq);
    };
    //3.出厂 - 返回
    return obj;
}

//1.没有new。
var obj1 = userInfo('小白', '89898989');
var obj2 = userInfo('小明', '1234567');

//调用的showName返回的函数都是相同的。
alert(obj1.showName);
alert(obj2.showName);

//2.函数重复。
alert(obj1.showName == obj2.showName);    //返回：false
</script>

　　通过上面的代码，我们可以看到，弹出这两个对象的 showName，调用的 showName 返回的函数是相同的，他们新创建对象所使用的方法都是一样的，尽管这两个函数长的是一样的，但其实他们并不是一个东西，我们将 对象1 和 对象2 做相等比较，结果返回 false。这时候就带来了一个相对严重的问题，一个网站中也不可能只有 2 个用户，比如有 1 万个用户对象，那么就会有 1 万 showName 和 showQQ 方法，每一个对象都有自己的函数，但明明这两个函数都是一样的，结果却并非如此。这样就很浪费系统资源，而且性能低，可能还会出现一些意想不到的问题。该怎么解决这个问题呢？方法也很简单，就是使用原型。

　　(1)、什么是原型

　　JS 对象都有一个之前我们没有讲过的属性，即 prototype 属性，该属性让我们有能力向对象添加属性和方法，包括 String对象、Array对象、Number对象、Date对象、Boolean对象，Math对象 并不像 String 和 Date 那样是对象的类，因此没有构造函数 Math()，该对象只用于执行数学任务。

　　所有 JS 的函数都有一个prototype属性，这个属性引用了一个对象，即原型对象，也简称原型。这个函数包括构造函数和普通函数，我们讲的更多是构造函数的原型，但是也不能否定普通函数也是有原型的。

　　在看实例之前，我们先来看几个小东西：typeof运算符、constructor属性、instanceof运算符。

　　typeof 大家都熟悉，JS 中判断一个变量的数据类型就会用到 typeof 运算符，返回结果为 JS 基本的数据类型，包括 number、string、boolean、object、function、undefined，语法：typeof obj。

　　constructor 属性返回所有 JS 变量的构造函数，typeof 无法判断 Array对象 和 Date对象 的类型，因为都返回 object，所以我们可以利用 constructor 属性来查看对象是否为数组或者日期，语法：obj.constructor。

<script>
var arr = [1,2,3,4,5];
function isArray(obj) {
    return arr.constructor.toString().indexOf("Array") > -1;
}
alert(isArray(arr));    //返回：ture

var d = new Date();
function isDate(obj) {
    return d.constructor.toString().indexOf("Date") > -1;
}
alert(isDate(d));    //返回：ture
</script>

 　　这里需要注意，constructor 只能对已有变量进行判断，对于未声明的变量进行判断会报错，而 typeof 则可对未声明变量进行判断（返回 undefined）。

　　instanceof 这东西比较高级，可用于判断一个对象是否是某一种数据类型，查看对象是否是某个类的实例，返回值为 boolean 类型。另外，更重要的一点是 instanceof 还可以在继承关系中用来判断一个实例是否属于他的父类型，语法：a instanceof b。

<script>
// 判断 a 是否是 A 类的实例 , 并且是否是其父类型的实例
function A(){} 
function B(){} 
B.prototype = new A();    //JS原型继承

var a = new B();
alert(a instanceof A);    //返回：true
alert(a instanceof B);    //返回：true 
</script>

 　　上面的实例中判断了一层继承关系中的父类，在多层继承关系中，instanceof 运算符同样适用。

　　下面我们就来看看普通函数的原型：

1 <script>2 function A(){}3 alert(A.prototype instanceof Object);    //返回：true4 </script>

　　上面代码中 A 是一个普通的函数，我们判断函数 A 的原型是否是对象，结果返回 true。

　　说了这么多，原型到底是个什么东西，说简单点原型就是往类的上面添加方法，类似于class，修改他可以影响一类元素。原型就是在已有对象中加入自己的属性和方法，原型修改已有对象的影响，prototype 属性可返回对象类型原型的引用，如果对象创建在修改原型之前，那么该对象不会拥有修改后的原型方法，就是说原型链的改变，不会影响之前产生的对象。有关原型链的知识，下面我们在讲继承时，再做分析。

　　下面我们通过实例的方式，进一步的理解原型。

　　实例：给数组添加方法

<script>
var arr1 = new Array(2,8,8);
var arr2 = new Array(5,5,10);

arr1.sum = function (){
    var result = 0;
    for(var i=0; i<this.length; i++){
        result += this[i];
    }
    return result;
};

alert(arr1.sum());　　//返回：18
alert(arr2.sum());　　//报错：arr2没有sum方法
</script>

　　上面的实例只给 数组1 添加了 sum 方法，这就类似于行间样式，只给 arr1 设置了，所以 arr2 肯定会报错，这个并不难理解。

　　实例：给原型添加方法

<script>
var arr1 = new Array(2,8,8);
var arr2 = new Array(5,5,10);

Array.prototype.sum = function (){
    var result = 0;
    for(var i=0; i<this.length; i++){
        result += this[i];
    }
    return result;
};

alert(arr1.sum());    //返回：18
alert(arr2.sum());    //返回：20
</script>

　　通过上面的实例，我们可以看到，通过原型 prototype 给 Array 这个类添加一个 sum 方法，就类似于 class，一次可以设置一组元素，那么所有的 Array 类都具有这个方法，arr1 返回结果为 18，而 arr2 在加了原型之后，也返回了正确的计算结果 20。

　　(2)、解决历史遗留问题

　　现在我们就可以使用原型，来解决没有 new 和函数重复定义的问题了。

<script>
function UserInfo(name, qq){

    //1.原料 - 创建对象
    //var obj = new Object();

    //加了new之后，系统(浏览器)会自动替你声明一个变量：
    //var this = new Object();

    //2.加工 - 添加属性和方法
    /*
    obj.name = name;
    obj.qq = qq;
    obj.showName = function (){
        alert('我的名字叫：'+this.name);
    };
    obj.showQQ = function (){
        alert('我的QQ是：'+this.qq);
    };
    */
    this.name = name;
    this.qq = qq;

    //3.出厂 - 返回
    //return obj;

    //系统也会自动替你返回：
    //return this;
}

//2.函数重复的解决：userInfo给类加原型。
UserInfo.prototype.showName = function (){
    alert('我的名字叫：' + this.name);
};

UserInfo.prototype.showQQ = function (){
    alert('我的QQ是：' + this.qq);
};


//1.加上没有new。
var obj1 = new UserInfo('小白', '89898989');
var obj2 = new UserInfo('小明', '1234567');

obj1.showName();
obj1.showQQ();
obj2.showName();
obj2.showQQ();

//加了原型之后
alert(obj1.showName == obj2.showName);    //返回：true
</script>

 

　　上面的代码看着有点复杂，我们把不必要的省略，如下：

<script>
function UserInfo(name, qq){
    this.name = name;
    this.qq = qq;
}

UserInfo.prototype.showName = function (){
    alert('我的名字叫：' + this.name);
};
UserInfo.prototype.showQQ = function (){
    alert('我的QQ是：' + this.qq);
};

var obj1 = new UserInfo('小白', '89898989');
var obj2 = new UserInfo('小明', '1234567');

obj1.showName();
obj1.showQQ();
obj2.showName();
obj2.showQQ();

alert(obj1.showName == obj2.showName);    //返回：true
</script>

　　现在代码是不是比最初的样子，简洁了很多，new 关键字也使用了，而且每个对象都是相等的。通过上面的实例，我们可以看到，再加上 new 之后，使用就方便了很多，代码明显减少了，因为在加了 new 之后，系统也就是浏览器自动为你做两件事，这就是 new 的使命，第一件事是替你创建了一个空白对象，也就是替你声明了一个变量：var this = new Object();，第二件事就是再提你返回这个对象：return this;，这里需要注意，在之前我们也讲过，在调用函数的时候，前边加个 new，构造函数内部的 this 就不是指向 window 了，而是指向一个新创建出来的空白对象。

　　这种方式就是流行的面向对象编写方式，即混合方式构造函数，混合的构造函数/原型方式(Mixed Constructor Function/Prototype Method)，他的原则是：用构造函数加属性，用原型加方法，也就是用构造函数定义对象的所有非函数属性，用原型方式定义对象的函数方法。用原型的作用，就是此对象的所有实例共享原型定义的数据和(对象)引用，防止重复创建函数，浪费内存。原型中定义的所有函数和引用的对象都只创建一次，构造函数中的方法则会随着实例的创建重复创建(如果有对象或方法的话)。这里需要注意，不管在原型中还是构造函数中，属性(值)都不共享，构造函数中的属性和方法都不共享，原型中属性不共享，但是对象和方法共享。所以创建类的最好方式就是用构造函数定义属性，用原型定义方法。使用该方式，类名的首字母要大写，这也是一种对象命名的规范。

 

7、面向对象实例

　　通常我们在写程序时，都使用的是面向过程，即要呈现出什么效果，基于这样的效果，一步步编写实现效果的代码，接下来我们就把面向过程的程序，改写成面向对象的形式。面向过程的程序写起来相对容易些，代码也比较直观，易读性强，我们先看一个面向过程的实例。

　　实例：面向过程的选项卡

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript实例</title>
<style>
#div1 input{background:white;}
#div1 input.active{background:green;color:white;}
#div1 div{
    width:200px;
    height:200px;
    background:#ccc;
    display:none;
}
</style>
<script>
window.onload = function (){
    //1、获取所需元素。
    var oDiv = document.getElementById('div1');
    var oBtn = oDiv.getElementsByTagName('input');
    var aDiv = oDiv.getElementsByTagName('div');
    
    //2、循环遍历所有按钮。
    for(var i=0; i<oBtn.length; i++){
        //5、给按钮定义index属性，当前按钮的索引号为按钮的索引号i
        oBtn[i].index = i;
        //3、给当前按钮添加点击事件。
        oBtn[i].onclick = function (){
           //4、再循环所有按钮，清空当前按钮的class属性，并将当前内容的样式设置为隐藏
           //在执行清空和设置之前，需要给当前按钮定义一个索引
           //这一步的目的：主要就是实现切换效果，点击下一个按钮时，当前按钮失去焦点，内容失去焦点
             for(var i=0; i<oBtn.length; i++){
                oBtn[i].className = '';
                aDiv[i].style.display = 'none';
            }
            //6、最后给当前按钮class属性，再设置当前展示内容的样式为显示
            this.className = 'active';
            aDiv[this.index].style.display = 'block';
       };
    }
};
</script>
</head>
<body>
<div id="div1">
    <input class="active" type="button" value="新闻">
    <input type="button" value="热点">
    <input type="button" value="推荐">
    <div style="display:block;">天气预报</div>
    <div>历史实事</div>
    <div>人文地理</div>
</div>
</body>
</html>

　　这样一个简单的效果，谁都可以做的出来，那要怎么写成面向对象的形式呢，我们先来看代码，再做分析。

　　实例：面向对象的选项卡

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript实例</title>
<style>
#div1 input{background:white;}
#div1 input.active{background:green;color:white;}
#div1 div{
    width:200px;
    height:200px;
    background:#ccc;
    display:none;
}
</style>
<script>
window.onload = function(){
    new TabShow('div1');
};

function TabShow(id){
    var _this = this;
    var oDiv = document.getElementById(id);
    this.oBtn = oDiv.getElementsByTagName('input');
    this.aDiv = oDiv.getElementsByTagName('div');
    for(var i=0; i<this.oBtn.length; i++){
        this.oBtn[i].index = i;
        this.oBtn[i].onclick = function (){
            _this.fnClick(this);
        };
    }
}

TabShow.prototype.fnClick = function (oBtn){
    for(var i=0; i<this.oBtn.length; i++){
        this.oBtn[i].className = '';
        this.aDiv[i].style.display = 'none';
    }
    oBtn.className = 'active';
    this.aDiv[oBtn.index].style.display = 'block';
};
</script>
</head>
<body>
<div id="div1">
    <input class="active" type="button" value="新闻">
    <input type="button" value="热点">
    <input type="button" value="推荐">
    <div style="display:block;">天气预报</div>
    <div>历史实事</div>
    <div>人文地理</div>
</div>
</body>
</html>

 　　将面向过程的程序，改写成面向对象的形式，原则就是不能有函数套函数，但可以有全局变量，其过程是先将 onload 改为构造函数，再将全局变量改为属性，函数改为方法，这就是面向对象的思维，所以第一步就是把嵌套函数单独出来，当函数单独出去之后，onload 中定义的变量在点击函数中就会报错，onload 也相当于一个构造函数，初始化整个程序，所以再对 onload 函数作出一些修改，让他初始化这个对象，然后就是添加属性和方法，我们说变量就是属性，函数就是方法，所以这里也只是改变所属关系。这个过程中最需要注意的是 this 的指向问题，通过闭包传递 this，以及函数传参，把对象作为参数传递。之前的 this 都是指向当前发生事件的对象，将函数改为方法后，我们给这个方法添加的是按钮点击事件，所以这时候 this 就指向这个按钮，本应该这个 this 是指向新创建的对象，这就需要转换 this 的指向 var _this = this;。TabShow 函数就是 onload 函数的改造，fnClick 方法是第一步单独出去的函数，最后被改为了选项卡函数 (TabShow函数) 的方法。

 

8、继承和原型链

　　(1)、继承

　　前边我们简单的说过继承是从已有对象上，再继承出一个新对象，继承就是在原有类的基础上，略作修改，得到一个新的类，不影响原有类的功能。继承的实现有好几种方法，最常用的就是 call() 方法和原型实现继承。下面看一个继承的实例：

 1 <script> 
 2 function A(){ 
 3     this.abc = 12; 
 4 } 
 5 A.prototype.show = function (){ 
 6     alert(this.abc); 
 7 }; 
 8  
 9 function B(){
 10     A.call(this);
 11 }
 12 
 13 for(var i in A.prototype){
 14     B.prototype[i]=A.prototype[i];
 15 }
 16 
 17 B.prototype.fn=function (){
 18     alert('abc');
 19 };
 20 
 21 var objB = new B();
 22 alert(objB.abc);    //返回：12
 23 objB.show();        //返回：12
 24 objB.fn();            //返回：abc
 25 
 26 var objA = new A();
 27 objA.fn();    //报错：A没有该方法
 28 </script>

　　上面的代码，B函数 继承了 A函数 的属性，通过 call 方法，该方法有一个功能，可以改变这个函数在执行时里边的 this 的指向，如果 B函数 中不使用 call，this 则指向 new B()，使用 call 后，this 则指向 A。方法继承 B.prototype = A.prototype;，A 的方法写在原型里，赋给 原型B，原型也是引用，将 A的原型 引用给 B的原型，就相当于 原型A 和 原型B 公用引用一个空间，所以 原型B 自己的方法，原型A 也可以用，给 原型B 添加一个方法，也就是给 原型A 添加一个方法。所以可以使用循环遍历 原型A 中的内容，再将这些内容赋给 原型B，这样 原型A 就没有 原型B 的方法了，也就是给 B 再添加方法，A 将不会受到影响(objA.fn() 报错)，B 不仅有从父级继承来的方法(objB.show())，还有自己的方法(obj.fn())。

　　(2)、原型链

　　在 JS 中，每当定义一个对象（函数）时，对象中都会包含一些预定义的属性。其中函数对象的一个属性就是原型对象 prototype。这里需要注意：普通对象没有 prototype，但有__proto__ 属性。原型对象的主要对象就是用于继承。

 1 <script> 
 2 var A = function(name){ 
 3     this.name = name; 
 4 }; 
 5 A.prototype.getName = function(){ 
 6     alert(this.name); 
 7 } 
 8 var obj = new A('小明'); 
 9 obj.getName();    //返回：小明
 10 
 11 </script>

 　　上面的代码，通过给 A.prototype 定义了一个函数对象的属性，再 new 出来的对象就继承了这个属性。

　　JS 在创建对象（不论是普通对象还是函数对象）时，都有一个叫做 __proto__ 的内置属性，用于指向创建它的函数对象的原型对象 prototype。

 1 <script> 
 2 var A = function(name){ 
 3     this.name = name; 
 4 } 
 5 A.prototype.getName = function(){ 
 6     alert(this.name); 
 7 } 
 8 var obj = new A('小明'); 
 9 obj.getName();    //返回：小明
 10 
 11 alert(obj.__proto__ === A.prototype);    //返回：true
 12 </script>

　　同样，A.prototype 对象也有 __proto__ 属性，它指向创建它的函数对象（Object）的 prototype。

 1 <script> 
 2 var A = function(name){ 
 3     this.name = name; 
 4 } 
 5 A.prototype.getName = function(){ 
 6     alert(this.name); 
 7 } 
 8 var obj = new A('小明'); 
 9 obj.getName();        //返回：小明
 10 
 11 alert(A.prototype.__proto__ === Object.prototype);    //返回：true
 12 </script>

　　Object.prototype 对象也有 __proto__ 属性，但它比较特殊，为 null。

 1 <script> 
 2 var A = function(name){ 
 3     this.name = name; 
 4 } 
 5 A.prototype.getName = function(){ 
 6     alert(this.name); 
 7 } 
 8 var obj = new A('小明'); 
 9 obj.getName();        //返回：小明
 10 
 11 alert(Object.prototype.__proto__);    //返回：null
 12 </script>

　　综上，我们把这个由 __proto__ 串起来的直到 Object.prototype.__proto__ 为 null 的链就叫做原型链。

　　在 JS 中，可以简单的将值分为两种类型，即原始值和对象值。每个对象都有一个内部属性 (prototype)，通常称之为原型。原型的值可以是一个对象，也可以是 null。如果他的值是一个对象，则这个对象也一定有自己的原型，由于原型对象本身也是对象，而他自己的原型对象又可以有自己的原型，这样就组成了一条链，我们就称之为原型链。JS 引擎在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值，如果整个链都遍历且没有找到属性，则返回 undefined。原型链一般实现为一个链表，这样就可以按照一定的顺序来查找，如果对象没有显式的声明自己的 ”__proto__”属性，那么这个值默认的设置为 Object.prototype，而当 Object.prototype 的 ”__proto__”属性值为 ”null”时，则标志着原型链的终结。

 

9、JSON 的面向对象

　　JSON 的面向对象，就是把方法包含在一个 JSON 中，在仅仅只有一个对象时使用，整个程序只有一个对象，写起来比较简单，但是不适合多个对象。这种方式也被称为命名空间，所谓命名空间，就是把很多 JSON 用附加属性的方式创建，然后每个里边都有自己的方法，这种方法主要用来分类，使用方便，避免冲突。就相当于把同一类方法归纳在一起，既可以不冲突，而且找起来方便。

 1 <script> 
 2 //创建一个空的json 
 3 var json = {}; 
 4  
 5 //现在就有了3个空的json 
 6 json.a = {}; 
 7 json.b = {}; 
 8 json.c = {}; 
 9 
 10 //现在3个json里边各有一个getUser函数，而且各不相同。
 11 //在JS中，如果是相同命名的函数就会产生冲突，相互覆盖。
 12 //但是这3个json不会相互冲突，相互覆盖。
 13 json.a.getUser = function (){
 14     alert('a');
 15 };
 16 json.b.getUser = function (){
 17     alert('b');
 18 };
 19 json.c.getUser = function (){
 20     alert('c');
 21 };
 22 json.a.getUser();    //返回：a
 23 json.b.getUser();    //返回：b
 24 json.c.getUser();    //返回：c
 25 </script>

以上就是JavaScript学习总结【8】、面向对象编程 的内容，更多相关内容请关注PHP中文网（www.php.cn）！