Rumah  >  Artikel  >  hujung hadapan web  >  Memahami ciri dan kegunaan prototaip dan rantai prototaip

Memahami ciri dan kegunaan prototaip dan rantai prototaip

王林
王林asal
2024-01-10 12:15:001176semak imbas

Memahami ciri dan kegunaan prototaip dan rantai prototaip

Terokai ciri dan aplikasi prototaip dan rantai prototaip

1 Apakah prototaip dan rantai prototaip

Dalam JavaScript, setiap objek mempunyai objek prototaip. Objek prototaip juga merupakan objek, dan ia boleh mempunyai sifat dan kaedah. Objek dalam JavaScript adalah berasaskan prototaip, bermakna satu objek boleh mewarisi sifat dan kaedah objek lain.

Objek prototaip objek boleh menunjuk ke objek prototaip objek melalui atribut __proto__属性来访问。这个__proto__, yang merupakan rujukan kepada objek prototaip. Melalui rantai prototaip, objek boleh mencari sifat dan kaedah di sepanjang rantai prototaip.

2. Ciri-ciri prototaip

  1. Objek prototaip objek dikongsi. Dalam JavaScript, apabila kita mencipta objek baharu, ia secara automatik dikaitkan dengan objek prototaip. Berbilang objek boleh dikaitkan dengan objek prototaip yang sama, dengan itu berkongsi sifat dan kaedah dalam objek prototaip.

Contoh Kod:

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

Person.prototype.greet = function() {
  console.log('Hello, ' + this.name + '!');
};

var person1 = new Person('Alice', 20);
var person2 = new Person('Bob', 25);

console.log(person1.__proto__ === person2.__proto__);  // true
  1. Objek boleh menggunakan sifat dan kaedah objek prototaip. Apabila kita mengakses sifat objek atau memanggil kaedah pada objek, jika objek itu sendiri tidak mempunyai sifat atau kaedah ini, ia akan mencari di sepanjang rantai prototaip.

Contoh kod:

person1.greet();  // Hello, Alice!

console.log(person1.hasOwnProperty('name'));  // true,对象自身有name属性
console.log(person1.hasOwnProperty('greet'));  // false,对象自身没有greet方法

console.log(person1.__proto__.hasOwnProperty('greet'));  // true,原型对象有greet方法

person1.name = 'Eve';

console.log(person1.hasOwnProperty('name'));  // true,对象自身有name属性,不会修改原型对象的属性

3. Ciri-ciri rantai prototaip

  1. Rantai prototaip ialah hubungan antara objek. Melalui rantai prototaip, objek boleh mencari sifat dan kaedah peringkat demi tahap sehingga ia menemui atau mencapai bahagian atas rantai prototaip.
  2. Rantai prototaip adalah linear. Dalam rantaian prototaip, setiap objek hanya mempunyai satu prototaip, objek induknya.

Contoh kod:

function Animal(name) {
  this.name = name;
}

function Cat(name, color) {
  this.name = name;
  this.color = color;
}

Cat.prototype = new Animal();

var cat = new Cat('Tom', 'blue');

console.log(cat instanceof Cat);  // true
console.log(cat instanceof Animal);  // true

console.log(cat.hasOwnProperty('name'));  // true,对象自身有name属性
console.log(cat.hasOwnProperty('color'));  // true,对象自身有color属性

console.log(cat.__proto__ === Cat.prototype);  // true
console.log(Cat.prototype.__proto__ === Animal.prototype);  // true
console.log(Animal.prototype.__proto__ === Object.prototype);  // true,原型链的顶端是Object.prototype

4. Aplikasi prototaip dan rantai prototaip

  1. Pewarisan: Melalui rantaian prototaip, hubungan pewarisan antara objek dapat direalisasikan. Objek prototaip objek kanak-kanak menghala ke objek induk, supaya objek anak boleh mewarisi sifat dan kaedah objek induk.

Contoh kod:

function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function() {
  console.log(this.name + ' is eating.');
};

function Cat(name, color) {
  this.name = name;
  this.color = color;
}

Cat.prototype = new Animal();

var cat = new Cat('Tom', 'blue');

cat.eat();  // Tom is eating.
  1. Perkongsian sifat dan kaedah: Melalui objek prototaip, perkongsian sifat dan kaedah antara berbilang objek boleh dicapai. Ini menjimatkan ruang memori, terutamanya jika berbilang kejadian perlu berkongsi sifat dan kaedah yang sama.

Contoh kod:

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

Person.prototype.sayHi = function() {
  console.log('Hi, I am ' + this.name);
};

var person1 = new Person('Alice', 20);
var person2 = new Person('Bob', 25);

person1.sayHi();  // Hi, I am Alice
person2.sayHi();  // Hi, I am Bob

Ringkasan:

Prototaip dan rantai prototaip ialah konsep penting dalam JavaScript Ia membentuk mekanisme pewarisan dan perkongsian antara objek. Melalui prototaip dan rantaian prototaip, kami boleh mengatur dan mengurus sifat dan kaedah objek dengan lebih baik, serta meningkatkan kebolehgunaan semula dan kebolehselenggaraan kod. Dalam pembangunan sebenar, pemahaman dan kecekapan yang mendalam dalam menggunakan ciri dan aplikasi prototaip dan rantai prototaip akan membantu meningkatkan kemahiran pengaturcaraan JavaScript.

Atas ialah kandungan terperinci Memahami ciri dan kegunaan prototaip dan rantai prototaip. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn