Rumah > hujung hadapan web > tutorial js > Penjelasan terperinci tentang ciri warisan berasaskan prototaip dalam pengetahuan JavaScript_Basic

Penjelasan terperinci tentang ciri warisan berasaskan prototaip dalam pengetahuan JavaScript_Basic

WBOY
Lepaskan: 2016-05-16 15:02:05
asal
1556 orang telah melayarinya

Warisan dalam JavaScript agak pelik. Warisan antara muka tidak boleh dilaksanakan dan hanya boleh bergantung pada warisan prototaip.

Rantai Prototaip
Prototaip ialah objek Contoh yang dibuat melalui pembina akan mempunyai penunjuk yang menunjuk ke prototaip untuk mendapatkan sifat dan kaedah prototaip. Dengan cara ini, objek contoh mempunyai kaedah atribut pembina dan kaedah atribut prototaip Kemudian arahkan prototaip pembina yang perlu diwarisi kepada contoh ini, dan anda boleh mempunyai semua kaedah atribut contoh ini. mencapai harta pusaka.
Lihat kod demo di bawah:

//声明超类,通过构造函数和原型添加有关属性和方法
function Super(){
  this.property = true;
}
Super.prototype.getSuperValue = function() {
  return this.property;
};

//声明子类的构造函数
function SubType() {
  this.subproperty = false;
}
//将子类的原型指向超类的实例,得到超类的一切
SubType.prototype = new Super();
SubType.prototype.constructor = SubType;
SubType.prototype.getSubValue = function(){
  return this.subproperty;
};
//由子类创建对象,测试是否继承超类方法和属性
var instance = new SubType();
console.log(instance.getSuperValue());

Salin selepas log masuk

Prototaip lalai bagi semua fungsi ialah contoh Object, jadi prototaip lalai akan mengandungi penunjuk dalaman yang menunjuk ke Object.prototype.
Gunakan instanceof dan isPrototypeOf untuk menentukan hubungan antara prototaip dan instance:

instance instanceof Object;
Object.prototype.isPrototypeOf(instance);
Salin selepas log masuk

Apabila menggunakan rantai prototaip, anda perlu menentukan kaedah dengan teliti. Jika subkelas perlu mengatasi kaedah atau lanjutan superjenis, ia mesti diletakkan selepas pernyataan yang menggantikan prototaip, supaya ia boleh berkuat kuasa. Selain itu, apabila melaksanakan pewarisan melalui rantai prototaip, anda tidak boleh menggunakan literal objek untuk mencipta kaedah prototaip, yang akan mengatasi rantai prototaip:

......
SubType.prototype = new Super();
SubType.prototype = {
  ....
};
Salin selepas log masuk

Ini akan menggantikan penuding yang menunjuk ke objek baharu, sekali gus menulis semula rantai prototaip.
Kaedah pewarisan rantai prototaip adalah cacat. Terdapat dua masalah utama:
1. Daripada prototaip yang mengandungi nilai jenis rujukan, ia akan dikongsi oleh semua kejadian.
Seperti yang dinyatakan dalam artikel sebelumnya, sifat prototaip yang mengandungi nilai jenis rujukan akan dikongsi oleh semua kejadian Jika satu kejadian diubah suai, keadaan lain akan berubah dengan sewajarnya, jadi sifat perlu ditakrifkan dalam pembina. Apabila mewarisi melalui rantaian prototaip, tidak kira sama ada atribut dalam kelas super ditakrifkan dalam pembina atau prototaip, semuanya menjadi objek contoh dan diwarisi oleh subkelas, sekali gus mempengaruhi kejadian subkelas.
2. Apabila mencipta contoh subjenis, parameter tidak boleh dihantar kepada pembina superjenis.
Pewarisan rantaian prototaip secara langsung menghalakan prototaip subkelas kepada contoh kelas super Pada masa ini, parameter boleh dihantar ke kelas super. Tetapi apabila subkelas mencipta contoh, parameter hanya boleh dihantar kepada pembina subkelas, tetapi bukan kepada pembina superclass.
Oleh itu, dalam aplikasi sebenar, rantai prototaip jarang digunakan secara bersendirian.

Beberapa amalan pengekodan yang berkaitan

Kenal pasti atribut prototaip

function hasPrototypeProperty(object, name) {
  return name in object && !object.hasOwnProperty(name);
}
Salin selepas log masuk

Gunakan objek prototaip dalam pembina

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

Person.prototype = {
  constructor: Person,
  sayName: function () {
    console.log(this.name);
  },
  toString: function() {

  }
};

var person1 = new Person('Nicholas');
var person2 = new Person('Greg);

console.log(person1 instanceof Person); // true
console.log(person1.constructor === Person); // true
console.log(person1.constructor === Object); // false

console.log(person2 instanceof Person); // true
console.log(person2.constructor === Person); // true
console.log(person2.constructor === Object); // false

Salin selepas log masuk

Pewarisan objek

var person1 = {
  name: 'Nicholas',
  sayName: function () {
    console.log(this.name);
  }
};

var person2 = Object.create(person1, {
  name: {
    configurable: true,
    enumerable: true,
    value: 'Greg',
    writable: true
  }
});

person1.sayName(); // Nicholas
person2.sayName(); // Greg

console.log(person1.hasOwnProperty('sayName')); // true
console.log(person1.isPropertyOf(person2)); // true
console.log(person2.hasOwnProperty('sayName')); // false

Salin selepas log masuk

Mod Modul

var person = (function () {
  var age = 25;

  function getAge() {
    return age;
  }

  function growOlder() {
    age++;
  }

  return {
    name: 'Nicholas',
    getAge: getAge,
    growOlder: growOlder
  };
}());

Salin selepas log masuk

Pembina skop

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

Person.prototype.sayName = function() {
  console.log(this.name);
};

var person1 = Person('Nicholas');

console.log(person1 instanceof Person); // false
console.log(typeof person1); // undefined
console.log(name); // Nicholas

Salin selepas log masuk
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan