Résumé de l'apprentissage JavaScript des objets prototypes (organisés et partagés)

Cet article vous apporte des connaissances pertinentes sur les objets prototypes en JavaScript. J'espère qu'il vous sera utile.

Les cours tu comprends ? Quelles sont les caractéristiques des cours ? (Encapsulation, héritage, polymorphisme)

Une classe est en fait une "fonction spéciale". Tout comme les expressions de fonction et les déclarations de fonction que vous pouvez définir, la syntaxe de classe se compose également de deux composants : la déclaration de classe et le mode d'expression de classe. Le corps de la classe est exécuté en mode strict.

Le corps d'une classe est la partie entourée d'une paire d'accolades {}, où les membres de la classe sont définis. [Les membres sont principalement des méthodes ou des constructeurs]

Toutes les méthodes d'une classe sont équivalentes et sont définies sur l'attribut prototype de la classe. Appeler une méthode sur une instance d’une classe équivaut à appeler une méthode sur le prototype.

class A(){
    constructor(){}
    a(){}
    b(){}
}
//等价于
A.prototype={constructor(){},a(){},b(){}}

Composition :

• Constructeur :

La méthode constructeur est une méthode spéciale, qui est utilisée pour créer et initialiser un objet créé par la classe. Une classe ne peut avoir qu'un seul constructeur. S'il y a plusieurs constructeurs, une erreur sera signalée. S'il n'y a pas de constructeur, un constructeur vide sera ajouté par défaut. Le constructeur renvoie le véritable objet colonne [c'est-à-dire ceci] par défaut. Un constructeur peut utiliser le mot-clé super pour appeler un constructeur de classe parent.

• Attributs

• Méthode prototype : Cette méthode n'a pas besoin d'ajouter le mot-clé fonction, il suffit de mettre directement la définition de la fonction. Les virgules ne peuvent pas être utilisées pour séparer les méthodes. Une erreur sera signalée.

• Méthode statique : utilisez static pour définir une méthode statique et appeler une méthode statique. Elle ne peut pas être appelée par l'instance de la classe, mais ne peut être appelée qu'en utilisant la classe.

• Getter de fonction de valeur et setter de fonction de stockage : utilisez les mots-clés get et set dans la classe pour définir les fonctions de stockage et de valeur pour un certain attribut et intercepter le comportement d'accès de l'attribut.

Syntaxe de classe :

• Déclaration de classe : utilisez le mot-clé class

class Rectangle{
    constructor(height,width){
        this.height=height;
        this.width=width;
    }
}

Remarque : La différence entre la déclaration de fonction et la déclaration de classe : la déclaration de classe ne sera pas promue, la déclaration de fonction sera promue.

Expressions de classe : les expressions de classe peuvent être nommées ou anonymes. Le nom donné à une expression de classe nommée est le nom local du corps de la classe.

 let Rectangle=class{//匿名类
      constructor(height,width){
            this.height=height;
            this.width=width;
        }
 }
 let Rectangle= class Rectangle{//命名类
      constructor(height,width){
            this.height=height;
            this.width=width;
        }
 }

Créer des sous-classes à l'aide d' extends :

Le mot-clé extends est utilisé dans une déclaration de classe ou une expression de classe pour créer une classe en tant que sous-classe d'une autre classe.

Utilisez super pour appeler la super classe :

Le mot-clé super est utilisé pour appeler des fonctions sur l'objet parent de l'objet

Caractéristiques de la classe :

- Encapsulation : Principalement via le paramétrage des fonctions, propriétés et méthodes privées Il est obtenu grâce à une portée au niveau du bloc

- Polymorphisme : il peut être appelé via des fonctions, car les paramètres peuvent être modifiés

- Héritage : principalement via la chaîne de prototypes

Que se passe-t-il lorsque nous créons un nouveau normal fonction?

• Créez un nouvel objet en utilisant l'attribut prototype du constructeur (notez la différence avec le champ privé [[prototype]]) comme prototype

• Transmettez-le ainsi que les paramètres d'appel au constructeur et exécutez ;

• Si le constructeur renvoie un objet, renvoyez-le, sinon renvoyez l'objet créé lors de la première étape.

nouveau Ce type de comportement tente de rendre la syntaxe des objets fonction similaire à celle des classes. Cependant, il propose objectivement deux manières, l'une consiste à ajouter des attributs dans le constructeur et l'autre à ajouter des attributs à l'attribut prototype. du constructeur. Ajoutez des propriétés.

Le nom de la fonction après new doit-il être en majuscule ?

Non, c'est principalement pour faciliter la distinction des catégories. Les contraintes générales sont en majuscules

Comment comprendre ProtoType ? Le processus de recherche d'un certain attribut d'un objet ?

prototype :

Chaque fonction a un attribut spécial appelé objet prototype [prototype]

js est un langage basé sur un prototype. Chaque objet a un objet prototype et l'objet utilise son prototype comme modèle d'héritage. méthodes et propriétés du prototype. Ces propriétés et méthodes sont définies sur l'attribut prototype au-dessus du constructeur de l'objet, et non sur l'instance d'objet elle-même.

Les objets prototypes peuvent avoir des objets prototypes et en hériter des méthodes et propriétés, couche par couche, couche par couche jusqu'à ce que l'objet prototype d'un objet soit nul. Il s'agit de la chaîne de prototypes.

Lors de la création d'une instance d'objet, un lien est établi entre l'instance d'objet et son constructeur [attribut __proto__, qui est dérivé de l'attribut prototype du constructeur. Autrement dit, __proto__ et le prototype du constructeur pointent vers le même objet] Object.getPrototypeof(new Foobar()) et Foobar.prototype sont égaux.

Object.create(). Crée un nouvel objet à partir de l'objet prototype spécifié. var newObj=Object.create(obj). Ensuite, __proto__=obj

de newObj. Chaque objet colonne réel hérite d'un attribut constructeur du prototype. Cette propriété pointe vers le constructeur qui construit cette instance.

Généralement, les attributs sont définis dans le constructeur et les méthodes sont définies dans le prototype.

一般由构造函数实列化出一个新对象，新对象的原型对象是一个constructor和一个Object的原型对象组成。而函数构造函数的原型对象是也是由另外一个constructor和一个Function的原型对象组成。

    var F=function(){};
    Object.prototype.a=function(){};
    Function.prototype.b=function(){};
    var f=new F();
    //上面的结果是，f能取到a,不能取到b.
    详解：
        1.f.__proto__===F.prototype
        2.F.prototype.__proto__===Object.prototype(所以f可以访问a)
        3.f.constructor===F
        4.F.__proto__===Function.prototype(所以f.constructor.b可以访问)

查找属性的过程：

1.先查找自己身属性是否由包含该属性。

2.如果没有，才会沿着原型链，层层向上搜索，直到找到名字的属性

3.如果找到最后原型链的末尾，即最后的原型为null，那就是没有找到该属性。就会返回undefined

不同方法创建对象和原型链

1.使用语法结构创建对象

var o = {a: 1};
// o 这个对象继承了 Object.prototype 上面的所有属性
// o 自身没有名为 hasOwnProperty 的属性
// hasOwnProperty 是 Object.prototype 的属性
// 因此 o 继承了 Object.prototype 的 hasOwnProperty
// Object.prototype 的原型为 null
// 原型链如下:
// o ---> Object.prototype ---> null
var a = ["yo", "whadup", "?"];
// 数组都继承于 Array.prototype 
// (Array.prototype 中包含 indexOf, forEach 等方法)
// 原型链如下:
// a ---> Array.prototype ---> Object.prototype ---> null
function f(){
return 2;
}
// 函数都继承于 Function.prototype
// (Function.prototype 中包含 call, bind等方法)
// 原型链如下:
// f ---> Function.prototype ---> Object.prototype ---> null

2.使用构造函数创建对象

function A() {
this.a = 1;
this.b = 2;
}
A.prototype = {
write: function(){
    console.log(this.a);
}
};
var a = new A();
// a 是生成的对象，他的自身属性有 'a' 和 'b'。

3.使用Object.create()创建对象(ES5)

var a = {a: 1}; 
// a ---> Object.prototype ---> null
var b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 (继承而来)
var c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null
var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); // undefined, 因为d没有继承Object.prototype
使用

4.使用class创建对象(ES6)

class A {
constructor(a, b) {
    this.a = a;
    this.b = b;
}
}
class B extends A {
constructor(a,b,c) {
    super(a, b);
    this.c=c;
}
get ab() {
    return this.a + this.b;
}
set d(d) {
    this.a = d;
    this.b = d;
    this.c = d;
}
}
var a= new A('a','b');//a的原型对象是 A.prototype
var b = new B('a','b','c');//    //b的原型对象是 B.prototype

当一个对象设置属性时都发生了什么？

如果对象包含普通数据访问属性，直接赋值只会修改属性值

    var a={b=1}//因为b是a的普通属性，数据类型为Number

    a.b="a"；  //直接更改b的类型为String,且赋值为'a'.

如果对象找不到该属性，且原型链也找不到，就直接默认添加一个属性到该对象上。

    var a={}//b不是a的普通属性，且原型链上也没有

    a.b="a"；  //直接在a上添加b的类型，为String,且赋值为'a'.

如果属性b，存在于原型链上

//在原型链上层存在名为b的普通数据访问属性并且没有标记为只读(writable:false)，那就会直接在a中添加一个名为b的新属性,且值为'a'。而原型链上的b就会被屏蔽掉：

    function A(){};
    A.prototype.b=1;
    var a=new A();
    a.b='a';

//在原型链上层存在b，但是他被标记为只读，那么无法修改已有属性，或者在a中创建屏蔽属性。如果运行在严格模式下，代码会抛出一个错误，否则，这条赋值语句会被忽略，总之，不会发生屏蔽。

    function A(){
    };
A.prototype.b=1
    Object.defineProperty(A.prototype,'b',{
        configurable:true,
        writable:false
    })
    var a=new A();
    a.b='a';//结果a.b还是1

【相关推荐：javascript学习教程】

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!