Rumah  >  Artikel  >  hujung hadapan web  >  Penjelasan terperinci tentang kelas definisi javascript dan contoh pelaksanaan kemahiran classes_javascript

Penjelasan terperinci tentang kelas definisi javascript dan contoh pelaksanaan kemahiran classes_javascript

WBOY
WBOYasal
2016-05-16 15:28:29954semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan kelas dan kelas definisi javascript. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Baru-baru ini, saya sering melihat orang bertanya dalam beberapa kumpulan bagaimana fungsi dalam kelas memanggil kaedah ini yang terdedah selepas ditakrifkan. Sekarang saya mempunyai esei mengenai pelaksanaan kelas.

Mula-mula mari kita bercakap tentang kelas. Dalam kelas kita akan mempunyai ciri-ciri berikut:

1. Kaedah awam
2. Kaedah persendirian
3. Atribut
4. Pembolehubah persendirian
5. Pemusnah

Mari kita lihat contoh secara langsung:

/***定义类***/
var Class = function(){
  var _self = this;//把本身引用负值到一变量上
  var _Field = "Test Field"; //私有字段
  var privateMethod = function(){ //私有方法
    alert(_self.Property); //调用属性
  }
  this.Property = "Test Property"; //公有属性
  this.Method = function(){ //公有方法
    alert(_Field); //调用私用字段
    privateMethod(); //调用私用方法
  }
}

Saya telah menulis semua nota di sini, jadi semua orang mungkin boleh memahaminya sepintas lalu. Bagi rakan yang jarang menulis JS, anda mungkin tertanya-tanya mengapa saya mentakrifkan pembolehubah _self, kerana dalam js, ini tidak perlu digunakan dalam bahasa objek lain, dan ini akan berubah semasa proses penghuraian dan berjalannya. Di sini saya akan bercakap secara ringkas tentang definisi ini dalam js saya boleh menulis lebih banyak jika perlu.

Definisi: ini ialah objek yang mempunyai fungsi yang mengandunginya apabila ia dipanggil sebagai kaedah.
Ciri-ciri: Persekitaran ini boleh berubah apabila fungsi diberikan kepada objek yang berbeza!

Rakan yang berminat boleh mencari maklumat dalam talian untuk mengetahui lebih lanjut. Berbalik kepada topik, tujuan _self di sini adalah untuk membuka pembolehubah peribadi tambahan dan menunjuk rujukan terus ke kelas itu sendiri.

Saya baru sahaja menyebut isu pemusnah, yang boleh dilaksanakan terus menggunakan kod. Hanya tulis kod pelaksanaan terus di penghujung fungsi.

/***定义类***/
var Class = function(){
  var _self = this;//把本身引用负值到一变量上
  var _Field = "Test Field"; //私有字段
  var privateMethod = function(){ //私有方法
    alert(_self.Property); //调用属性
  }
  this.Property = "Test Property"; //公有属性
  this.Method = function(){ //公有方法
    alert(_Field); //调用私用字段
    privateMethod(); //调用私用方法
  }
  /***析构函数***/
  var init = function(){
    privateMethod();
  }
  init();
}

Gunakan kelas ini

var c = new Class();
c.Method(); //使用方法

Tidak mengapa

Javascript itu sendiri tidak menyokong berorientasikan objek, ia tidak mempunyai aksara kawalan akses, ia tidak mempunyai kelas kata kunci untuk menentukan kelas, ia tidak menyokong lanjutan atau bertindih untuk warisan, dan ia tidak menggunakan maya untuk menyokong maya functions. Walau bagaimanapun, Javascript ialah Bahasa yang fleksibel, mari kita lihat bagaimana Javascript tanpa kelas kata kunci melaksanakan definisi kelas dan mencipta objek.

1: Tentukan kelas dan cipta objek contoh kelas

Dalam Javascript, kami menggunakan fungsi untuk menentukan kelas, seperti berikut:

function Shape()
{
var x=1;
var y=2;
}

Anda mungkin berkata, ragu-ragu? Bukankah ini fungsi penentu? Ya, ini ialah fungsi takrifan Kami mentakrifkan fungsi Bentuk dan memulakan x dan y. Walau bagaimanapun, jika anda melihatnya dari sudut lain, ini adalah untuk mentakrifkan kelas Shape, yang mempunyai dua atribut x dan y, dan nilai awal masing-masing adalah 1 dan 2 Walau bagaimanapun, kata kunci yang kami gunakan untuk mentakrifkan kelas adalah fungsi bukannya kelas.

Kemudian, kita boleh mencipta objek aShape kelas Shape, seperti berikut:

Salin kod Kod adalah seperti berikut:
var aShape = new Shape();

Dua: Tentukan atribut awam dan atribut peribadi

Kami telah mencipta objek aShape, tetapi apabila kami cuba mengakses sifatnya, ralat berlaku, seperti berikut:

Salin kod Kod adalah seperti berikut:
aShape.x=1;

Ini menunjukkan bahawa sifat yang ditakrifkan dengan var adalah peribadi. Kita perlu menggunakan kata kunci ini untuk mentakrifkan atribut awam
function Shape()
{
this.x=1;
this.y=2;
}

Dengan cara ini, kita boleh mengakses atribut Shape, seperti.

Salin kod Kod adalah seperti berikut:
aShape.x=2;

Nah, kita boleh meringkaskan berdasarkan kod di atas: gunakan var untuk mentakrifkan atribut peribadi kelas, dan gunakan ini untuk mentakrifkan atribut awam kelas.

3: Tentukan kaedah awam dan kaedah persendirian

Dalam Javascript, fungsi adalah contoh kelas Fungsi secara tidak langsung mewarisi daripada Object Oleh itu, kita boleh menggunakan kaedah tugasan untuk mencipta fungsi menetapkan fungsi kepada kelas Pembolehubah atribut, maka pembolehubah atribut ini boleh dipanggil kaedah kerana ia adalah fungsi boleh laku. Kodnya adalah seperti berikut:

function Shape()
{
var x=0;
var y=1;
this.draw=function()
{
//print;
};
}

Kami menentukan cabutan dalam kod di atas dan menetapkan fungsi padanya Seterusnya, kami boleh memanggil fungsi ini melalui aShape, yang dipanggil kaedah awam dalam OOP, seperti:

Salin kod Kod adalah seperti berikut:
aShape.draw();

Jika ditakrifkan dengan var, maka cabutan menjadi peribadi, yang dipanggil kaedah persendirian dalam OOP, seperti
function Shape()
{
var x=0;
var y=1;
var draw=function()
{
//print;
};
}

这样就不能使用aShape.draw调用这个函数了。

三:构造函数

Javascript并不支持OOP,当然也就没有构造函数了,不过,我们可以自己模拟一个构造函数,让对象被创建时自动调用,代码如下:

function Shape()
{
var init = function()
{
//构造函数代码
};
init();
}

在Shape的最后,我们人为的调用了init函数,那么,在创建了一个Shape对象是,init总会被自动调用,可以模拟我们的构造函数了。

四:带参数的构造函数

如何让构造函数带参数呢?其实很简单,将要传入的参数写入函数的参数列表中即可,如

function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//构造函数
x=ax;
y=ay;
};
init();
}

这样,我们就可以这样创建对象:

复制代码 代码如下:
var aShape = new Shape(0,1);

五:静态属性和静态方法

在Javascript中如何定义静态的属性和方法呢?如下所示

function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//构造函数
x=ax;
y=ay;
};
init();
}
Shape.count=0;//定义一个静态属性count,这个属性是属于类的,不是属于对象的。
Shape.staticMethod=function(){};//定义一个静态的方法

有了静态属性和方法,我们就可以用类名来访问它了,如下

alert ( aShape.count );
aShape.staticMethod();

注意:静态属性和方法都是公有的,目前为止,我不知道如何让静态属性和方法变成私有的

六:在方法中访问本类的公有属性和私有属性

在类的方法中访问自己的属性,Javascript对于公有属性和私有属性的访问方法有所不同,请大家看下面的代码

function Shape(ax,ay)
{
var x=0;
var y=0;
this.gx=0;
this.gy=0;
var init = function()
{
x=ax;//访问私有属性,直接写变量名即可
y=ay;
this.gx=ax;//访问公有属性,需要在变量名前加上this.
this.gy=ay;
};
init();
}

七:this的注意事项

根据笔者的经验,类中的this并不是一直指向我们的这个对象本身的,主要原因还是因为Javascript并不是OOP语言,而且,函数和类均用function定义,当然会引起一些小问题。

this指针指错的场合一般在事件处理上面,我们想让某个对象的成员函数来响应某个事件,当事件被触发以后,系统会调用我们这个成员函数,但是,传入的this指针已经不是我们本身的对象了,当然,这时再在成员函数中调用this当然会出错了。

解决方法是我们在定义类的一开始就将this保存到一个私有的属性中,以后,我们可以用这个属性代替this。我用这个方法使用this指针相当安全,而且很是省心~

我们修改一下代码,解决this问题。对照第六部分的代码看,你一定就明白了

function Shape(ax,ay)
{
var _this=this; //把this保存下来,以后用_this代替this,这样就不会被this弄晕了
var x=0;
var y=0;
_this.gx=0;
_this.gy=0;
var init = function()
{
x=ax;//访问私有属性,直接写变量名即可
y=ay;
_this.gx=ax;//访问公有属性,需要在变量名前加上this.
_this.gy=ay;
};
init();
}

希望本文所述对大家JavaScript程序设计有所帮助。

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