Notes d'étude d'objet JS


avant-propos

Dans JS, les chaînes, les nombres, les tableaux et les fonctions sont tous des objets. Chaque objet contient plusieurs propriétés et méthodes.


1. Créer un objet

1. Créez des objets directement à l'aide de { }

// JS 中的语句的结尾可以加分号(;),也可以不加分号(;),但是建议大家都加上分号
var a = {
    
    };     // JS 中的空对象,类似 Java 中的空的 Map
var b = {
    
    
}

var student = {
    
    
 // 使用 冒号(:) 分割 key 和 value
    name: '小曹',
    age: 18
};

console.log(a);
console.log(student);

insérez la description de l'image ici

function someMethod() {
    
    
    console.log("去外婆家");
}

var person = {
    
    
    name: '小红帽',
    age: 8,
    doing: someMethod,  // 把已经定义的函数作为 doing key 的 value
    say: function (target) {
    
        // 把匿名函数作为 say key 的 value
        console.log("你好, " + target);
    }
};

console.log(a);
console.log(student);
console.log(person);

//或者也可以这样写
//console.log(person.name);
//console.log(person['name']);
//person.say();
//person['say']();

insérez la description de l'image ici

  • Caractéristiques dynamiques
// JS 中的对象,像 Map 一样是开放着的,可以随时随地的动态添加 key-value 进去
student.teacher = '小何';
student['master'] = '肖战';
console.log(student);
student['say'] = person.say;
student.say('世界');

insérez la description de l'image ici

2. Lorsqu'il y a plusieurs objets

Méthode 1 ※ Recommandé

function createStudent(name, age) {
    
    
    var s = {
    
    
        name: name,
        age: age
    };

    s.sayHello = function (target) {
    
    
        console.log("你好," + target);
    };

    return s;
}

var o1 = createStudent('张三', 13);
var o2 = createStudent('李四', 14);

insérez la description de l'image ici

Méthode 2 : Constructeur

// JS 中本身是没有类的概念的,可以把(大写) Student 这个函数暂时当成类 + 构造方法去使用   
// 构造函数的函数名首字母一般是大写的
function Student(name, age) {
    
    
    // this 代表当前对象 :把整个函数当成构造函数
    this.name = name;
    this.age = age;
    this.sayHello = function (target) {
    
    
        console.log("Hello," + target);
    };
    // 不需要 return :理解 整个函数是构造函数,所以没有返回值
}

var o1 = new Student('王五', 15);
var o2 = new Student('赵六', 16);

Méfiez-vous des erreurs faciles

insérez la description de l'image ici

Méthode 3 : forme de sucre syntaxique

//在ES6中引入了class关键字,可以按照Java的方式来创建类和对象
//没有访问限定,认为都是 public 的

class Student {
    
    
    // 由于 js 对象中的属性是开放的,可以随时随地添加,所以不规定属性

    // constructor : 构造方法,无论 class 叫什么名字
    constructor(name, age) {
    
    
        this.name = name;
        this.age = age;
    }

    // 规定:这里不用写 function 了
    sayHello(target) {
    
    
        console.log('你好 ' + target);
    }
}

var o1 = new Student('钱七', 17);

insérez la description de l'image ici

cette utilisation

class Student {
    
    
    constructor(name, age) {
    
    
        this['name'] = name;    // 这种形式也可以
        this.age = age;   // this.age 当前对象中的 age
    }

    introduce() {
    
    
        // 规定:必须是 this.name,不能省略 this,写成 name
        console.log(this.name + ", " + this['age']);
    }
}

var o1 = new Student('李一', 111);
o1.introduce();

insérez la description de l'image ici

Deuxièmement, la différence entre les objets JavaScript et les objets Java

1. Il n'y a pas de concept de "classe" dans JS

  • Les objets sont en fait des "propriétés" + "méthodes" (clé-valeur). Les objets en Java sont des valeurs-clés limitées. Lorsque la clé est définie au début de la classe, les classes sont spécifiées et le type est également déterminé.
  • La classe équivaut à extraire séparément les propriétés et les méthodes de certains objets communs, ce qui équivaut à un "moule à gâteau de lune".
  • Un "constructeur" en JavaScript peut avoir un effet similaire. Et même si vous n'utilisez pas de constructeur, vous pouvez spécifier certains objets à tout moment par { }.

2. Les objets JS ne font pas la distinction entre "propriétés" et "méthodes"

  • Les fonctions en JavaScript sont des "citoyens de première classe", tout comme les variables ordinaires. Les variables qui stockent des fonctions peuvent être appelées et exécutées via ( ).

3. Les objets JS n'ont pas de mécanismes de contrôle d'accès tels que privé/public

  • Tous les objets en JS sont publics.

4. Les objets JS n'ont pas "d'héritage"

  • L'essence de l'héritage est "d'associer deux objets" ou de laisser un objet réutiliser les propriétés/méthodes d'un autre objet. Un effet similaire est obtenu en JavaScript en utilisant le mécanisme "prototype".

chaînes prototypes

  • tel que celui présenté précédemment
    insérez la description de l'image ici

5. JavaScript n'a pas de "polymorphisme"

  • Trois principes d'orientation objet :

    • Paquet : Il y a un paquet, qui est relativement superficiel, et c'est un paquet très préliminaire.
    • Héritage : La façon d'utiliser la chaîne de prototypes.
    • Polymorphisme : JS est intrinsèquement polymorphe en raison de son absence de restrictions de type.
  • Les langages typés statiquement tels que Java sont plus stricts sur les contraintes de type et la validation. Par conséquent, l'effet du polymorphisme est obtenu en héritant de la classe parent et en remplaçant les méthodes de la classe parent.

  • Les types dynamiques sont pris en charge dans JS et il n'est pas nécessaire de faire une distinction claire entre les types d'objets lors de l'utilisation d'une méthode d'un objet. Il n'est donc pas nécessaire de prendre en charge le polymorphisme au niveau syntaxique.

Exemple

  • Il est d'usage d'appeler cette approche un type de canard. Lorsqu'il s'agit d'un objet, peu importe qu'il s'agisse d'un canard ou non, du moment qu'il répond aux caractéristiques (cheveux jaunes, son « couac » et ailes), c'est l'objet que nous voulons.
function f(o) {
    
    
   o.say();
}

f({
    
    
    say: function () {
    
     console.log('我是临时构造的对象')}
});

insérez la description de l'image ici

function f(o) {
    
    
    // 根本不管 o 是什么类型,只要求: o 这个对象有 key 是 say 的 value
    // 并且 value 的值是 function 
    o.say();
}

function Student() {
    
    
    this.say = function() {
    
     console.log('我是学生'); }
}
var o = new Student();
f(o);

insérez la description de l'image ici

Je suppose que tu aimes

Origine blog.csdn.net/ccyzq/article/details/122211053
conseillé
Classement