Maison > interface Web > js tutoriel > Articles orientés objet Javascript (1)

Articles orientés objet Javascript (1)

黄舟
Libérer: 2017-02-07 14:30:57
original
919 Les gens l'ont consulté

1 Le concept d'expression

Concept général : Tous les blocs de code renvoyés peuvent devenir des expressions :

var a=0;var a, b;
a = 0;这个表达式的返回值为0;
b = a;这个表达式的返回值为a;
Copier après la connexion

La valeur de retour de l'expression d'affectation est = La valeur sur le. à droite ;


2 Concept orienté objet :

Une idée de programmation de base : lorsque vous résolvez un problème, essayez d'abord de trouver un objet pour aider à résoudre les problèmes. .

Avantages :

Identité : planificateur ;

Grande flexibilité du code;

Haute maintenabilité;

Haute évolutivité;


Inconvénients :

Cela peut augmenter la complexité du code

Relativement moins lisible Bon


3 Orienté processus :

Identité : Exécuteur

Séquence : Dans des circonstances normales, elle ne peut pas être perturbée, du haut à l'étape suivante Exécution en une étape.


4 Caractéristiques du langage Javascript :

Type faible

Multi-paradigme

Langage basé objet :En js, tout est objet

Langage basé sur un prototype


5 Le concept de prototype

Le soi-disant prototype est une fonction L'objet référencé par le prototype

Tant qu'une fonction est déclarée, le prototype existe

function foo(){};
foo.prototype['name']='ksir';
var f = new foo();
console.log(f.constructor ===foo.prototype.constructor);
Copier après la connexion

Lorsque chaque objet créé par la fonction partage ce prototype, c'est-à-dire que tous les objets créés ci-dessus peuvent accéder directement à n'importe quel membres (propriétés et méthodes) sur le prototype ;
(La caractéristique dynamique des objets est que les objets peuvent être créés dynamiquement avec . ou []);


6 Le essence du prototype

L'essence du prototype est l'objet

function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.talk = function(){
        console.log('hello');
     }
 }
 var kangfeng = new Person('小强',21,'男');
 var xiaoming = new Person('小明',20,'女');
 var xiaohong = new Person('小红','19','女');
 kangfeng.talk();
 xiaoming.talk();
 xiaohong.talk();
 //思考:这三个儿女的talk方法是否一样?
 console.log(xiaoming.talk === kangfeng.talk);
 console.log(xiaohong.talk === xiaohong.talk):
 //这三个对象的方法是不一样,相互独立的
 Person.prototype.addfu(){
    console.log('给原型添加一个函数');
}
Copier après la connexion

Le même code logique existe dans le constructeur, puis lorsque l'objet est créé, le code logique dans la fonction sera copié , et les méthodes du constructeur seront extraites et placées dans un lieu public accessible par les objets créés par le constructeur – Tous les objets du constructeur peuvent partager le prototype du constructeur.

Avantages : réaliser le partage de données d'objets similaires

7 façons d'obtenir des prototypes

Par fonction :

<fnName>.prototype;
Copier après la connexion

Par objet :

object.__proto__;
//两个下划线
Copier après la connexion

8 Les composants de l'objet

L'objet lui-même ; son prototype

Chaque objet possède l'attribut __proto__, c'est-à-dire Chaque l'objet a un prototype

Math.__proto__===object.prototype;
Copier après la connexion

Le type de l'objet est le nom du constructeur


9 Attributs du prototype et objets prototypes

Attribut prototype : Du point de vue d'une fonction, le prototype peut être appelé l'attribut prototype de la fonction

Objet prototype : Du point de vue de l'objet, le prototype peut être appelé l'objet prototype de l'objet


10 __proto__ norme de double soulignement


__proto__ Cette norme de double soulignement n'est pas une norme du w3c, ces attributs sont des propriétés non standard.

Il y a des problèmes de compatibilité. Si nous ne pouvons pas obtenir l'attribut prototype via des doubles traits de soulignement, nous devons l'obtenir via la fonction

function getPrototype(obj){
    //判断浏览器是否兼容__proto__属性
    //return !!obj.__proto__? obj.__proto__:obj.constructor.prototype;
    if(obj.__proto__){
    //支持
        return obj.__proto__;
    }else{
        //获取该对象的构造函数
        //在通过此函数的prototype属性获取其原型对象
        return obj.constructor.prototype;
    }
}
function A(){};
var a = A();
console.log(getPrototype(a).constructor);
//如果我们的函数中有if else return结构,我们可以用3元运算符来优化.
Copier après la connexion


11 Comment écrire le constructeur standard // Quels attributs sont requis Enregistrés à l'intérieur du constructeur, quels attributs doivent être extraits et placés sur le prototype

function B(name){};
B.prototype.name = &#39;tom&#39;;
var tom = new B;console.log(tom.name);
var jim = new jim;console.log(jim.name);
//结果都是tom
//所以和具体某个对象息息相关的称为私有属性,这写属性都必须写在构造函数内,那些共享的属性(每个对象都具有的属性,不会随对象变化而变化,
比如说一些方法(对象的行为)--公有属性)就可以定义在原型属性中.
//一般情况下,构造函数的方法放原型上
//不提倡在js原生对象上进行扩展成员
//坏处,会导致原生对象过于庞大,累赘,影响性能
Copier après la connexion

12 Notes


Ajout du constructeur les méthodes sont généralement ajoutées au prototype. Pour plus de commodité, la méthode est généralement ajoutée à .prototype{} sous la forme d'un objet. En même temps, n'oubliez pas d'ajouter constructor: constructor name dans le fichier. sous forme de paires clé-valeur.


13 Caractéristiques des prototypes

Dynamicité :

L'extension des membres au prototype reflétera directement l'objet créé

Le remplacement de l'objet prototype ne reflétera pas l'objet créé, mais affectera directement les objets créés ultérieurement

Unicité

Tous les objets créés par la même fonction Objets partagent le même objet prototype

Immuabilité :

Les objets ne peuvent modifier aucun membre de l'objet prototype

Héritage :

Tous les objets sont l'objet prototype hérité de celui-ci

Ce qui précède est le contenu de l'article orienté objet Javascript (1). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal