Ringkasan pembelajaran JavaScript objek prototaip (tersusun dan dikongsi)

Artikel ini membawakan anda pengetahuan yang berkaitan tentang objek prototaip dalam JavaScript saya harap ia akan membantu anda.

Kelas anda faham? Apakah ciri-ciri kelas? (Encapsulation, inheritance, polymorphism)

Kelas sebenarnya ialah "fungsi khas". Sama seperti ungkapan fungsi dan pengisytiharan fungsi yang anda boleh takrifkan, sintaks kelas juga terdiri daripada dua Komponen: Pengisytiharan kelas dan ekspresi kelas. Badan kelas dilaksanakan dalam mod ketat.

Isi kelas kelas ialah bahagian yang dikelilingi oleh sepasang pendakap kerinting {}, iaitu tempat ahli kelas ditakrifkan. [Ahli terutamanya kaedah atau pembina]

Semua kaedah kelas adalah setara dengan ditakrifkan pada atribut prototaip kelas. Memanggil kaedah pada contoh kelas adalah sama dengan memanggil kaedah pada prototaip.

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

Komposisi:

• Pembina:

Kaedah pembina ialah kaedah khas cipta dan mulakan objek yang dicipta oleh kelas. Kelas hanya boleh mempunyai satu pembina Jika terdapat berbilang pembina, ralat akan dilaporkan Jika tiada pembina, pembina kosong akan ditambah secara lalai. Pembina mengembalikan objek lajur sebenar [iaitu ini] secara lalai. Pembina boleh menggunakan kata kunci super untuk memanggil pembina kelas induk.

• Atribut

• Kaedah prototaip: Kaedah ini tidak perlu menambah kata kunci fungsi, cuma letakkan definisi fungsi secara terus. Kaedah tidak boleh dipisahkan dengan koma, jika tidak ralat akan dilaporkan.

• Kaedah statik: Gunakan statik untuk menentukan kaedah statik dan memanggil kaedah statik Mereka tidak boleh dipanggil oleh contoh kelas, tetapi hanya boleh dipanggil dengan menggunakan kelas.

• Penetap fungsi nilai dan fungsi storan: Gunakan kata kunci dapatkan dan tetapkan dalam kelas untuk menetapkan fungsi storan dan nilai untuk atribut tertentu dan memintas akses kepada Kelakuan.

Sintaks kelas:

• Pengisytiharan kelas: Gunakan kata kunci kelas

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

Nota: Perbezaan antara pengisytiharan fungsi dan pengisytiharan kelas: pengisytiharan kelas tidak akan dinaikkan pangkat, pengisytiharan fungsi akan dinaikkan pangkat.

Ungkapan kelas: Ungkapan kelas boleh dinamakan atau tanpa nama. Nama yang diberikan kepada ungkapan kelas bernama ialah nama tempatan badan kelas.

 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;
        }
 }

Gunakan lanjutan untuk mencipta subkelas:

Kata kunci extends digunakan dalam pengisytiharan kelas atau ungkapan kelas untuk mencipta kelas sebagai subkelas kelas lain.

Gunakan super untuk memanggil kelas super:

Kata kunci super digunakan untuk memanggil fungsi pada objek induk objek

Ciri-ciri kelas:

- Enkapsulasi: Terutamanya melalui fungsi, penetapan sifat persendirian dan kaedah terutamanya dicapai melalui skop peringkat blok

- Polimorfisme: Boleh dipanggil melalui fungsi, kerana parameter boleh Berubah

- Warisan: terutamanya melalui rantai prototaip

Apa yang berlaku apabila kita baharu fungsi normal?

• Buat objek baharu menggunakan atribut prototaip pembina (perhatikan perbezaan daripada medan persendirian [[prototaip]]) sebagai prototaip;

Lulus ini dan parameter panggilan kepada pembina dan laksanakan;
• baharu Tingkah laku ini cuba menjadikan sintaks objek fungsi serupa dengan kelas Walau bagaimanapun, ia secara objektif menyediakan dua cara Satu ialah menambah Atribut, yang kedua ialah menambah atribut kepada atribut prototaip pembina.

Adakah nama fungsi selepas nama baharu perlu menggunakan huruf besar?

Tidak, ia adalah terutamanya untuk kemudahan membezakan kategori. Kekangan umum adalah huruf besar

Bagaimana untuk memahami ProtoType Proses mencari atribut tertentu objek?

prototaip:Setiap fungsi mempunyai atribut khas yang dipanggil objek prototaip [prototaip]

js adalah berdasarkan In bahasa prototaip, setiap objek mempunyai objek prototaip, dan objek menggunakan prototaipnya sebagai templat dan mewarisi kaedah dan sifat daripada prototaip. Sifat dan kaedah ini ditakrifkan pada atribut prototaip di atas pembina objek, bukan pada contoh objek itu sendiri. Objek prototaip boleh mempunyai objek prototaip dan mewarisi kaedah dan sifat daripadanya, lapisan demi lapisan, lapisan demi lapisan sehingga objek prototaip objek adalah nol Ini ialah rantaian prototaip.

Apabila mencipta tika objek, pautan diwujudkan antara tika objek dan pembinanya [__proto__ atribut, yang diperoleh daripada atribut prototaip pembina. Iaitu, __proto__ dan prototaip pembina menghala ke objek yang sama] Object.getPrototypeof(new Foobar()) dan Foobar.prototype adalah sama.

Object.create(). Mencipta objek baharu daripada objek prototaip yang ditentukan. var newObj=Object.create(obj). Kemudian newObj's __proto__=obj

Setiap objek lajur sebenar mewarisi atribut pembina daripada prototaip. Harta ini menunjuk kepada pembina yang membina contoh ini.

Secara amnya, atribut ditakrifkan dalam pembina dan kaedah ditakrifkan dalam prototaip.

一般由构造函数实列化出一个新对象，新对象的原型对象是一个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学习教程】

Atas ialah kandungan terperinci Ringkasan pembelajaran JavaScript objek prototaip (tersusun dan dikongsi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!