Penjelasan terperinci tentang cara mentakrifkan kelas dalam kemahiran JavaScript

Contoh dalam artikel ini menerangkan cara mentakrifkan kelas dalam JavaScript. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

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 Takrifkan kelas dan cipta objek contoh kelas

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

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

Salin selepas log masuk

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();

2. Tentukan atribut awam dan 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 ;
}

Salin selepas log masuk

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

Salin kod Kod adalah seperti berikut:

aShape.x = 2;

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

Salin selepas log masuk

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 ini menjadi peribadi, yang dipanggil kaedah persendirian dalam OOP, seperti

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

Salin selepas log masuk

Dengan cara ini anda tidak boleh menggunakan aShape.draw untuk memanggil fungsi ini.

3 Javascript tidak menyokong OOP, dan sudah tentu tiada pembina Walau bagaimanapun, kita boleh mensimulasikan pembina sendiri dan biarkan ia dipanggil secara automatik apabila objek dibuat seperti berikut:

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

Salin selepas log masuk

Pada penghujung Shape, kami secara buatan memanggil fungsi init Kemudian, apabila objek Shape dicipta, init akan sentiasa dipanggil secara automatik dan pembina kami boleh disimulasikan.

4. Pembina dengan parameter

Bagaimana untuk membuat pembina mengambil parameter? Sebenarnya, ia sangat mudah hanya tulis parameter yang akan dihantar ke dalam senarai parameter fungsi, seperti

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

Salin selepas log masuk

Dengan cara ini, kita boleh mencipta objek seperti ini:

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

5. Sifat statik dan kaedah statik

Bagaimana untuk menentukan sifat dan kaedah statik dalam Javascript? Seperti yang ditunjukkan di bawah

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 (){}; // 定义一个静态的方法

Salin selepas log masuk

Dengan sifat dan kaedah statik, kita boleh mengaksesnya menggunakan nama kelas, seperti berikut

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

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

在类的方法中访问自己的属性，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();
}

Salin selepas log masuk

七、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();
}

Salin selepas log masuk

以上我们聊了如何在Javascript中定义类，创建类的对象，创建公有和私有的属性和方法，创建静态属性和方法，模拟构造函数，并且讨论了容易出错的this。

关于Javascript中的OOP实现就聊到这里，以上是最实用的内容，一般用Javascript定义类，创建对象用以上的代码已经足够了。当然，你还可以用mootools或prototype来定义类，创建对象。我用过mootools框架，感觉很不错，它对Javascript的类模拟就更完善了，还支持类的继承，有兴趣的读者可以去尝试一下。当然，如果使用了框架，那么在你的网页中就需要包含相关的js头文件，因此我还是希望读者能够在没有框架的情况下创建类，这样，代码效率较高，而且你也可以看到，要创建一个简单的类并不麻烦～

补充：

JavaScript类定义的四种方式：

// 1、工厂方式
function createCar(name,color,price){
  var tempcar=new Object;
  tempcar.name=name;
  tempcar.color=color;
  tempcar.price=price;
  tempcar.getName=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
  return tempcar;
}
var car1=new createCar("工厂桑塔纳","red","121313");
car1.getName();
/*
定义了一个能创建并返回特定类型对象的工厂函数， 看起来还是不错的， 但有个小问题 ，
每次调用时都要创建新函数 showColor，我们可以把它移到函数外面，
function getName(){
  document.write(this.name+"-----"+this.color+"<br>");
}
在工厂函数中直接指向它 tempCar.getName = getName;
这样避免了重复创建函数的问题，但看起来不像对象的方法了。
*/
// 2、构造函数方式
function Car(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.getColor=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
}
var car2=new Car("构造桑塔纳","red","121313");
car2.getColor(); 
/*
可以看到与第一中方式的差别，在构造函数内部无创建对象，而是使用 this 关键字。
使用 new 调用构造函数时，先创建了一个对象，然后用 this 来访问。
这种用法于其他面向对象语言很相似了， 但这种方式和上一种有同一个问题， 就是重复创建函数。
*/
// 3、原型方式
function proCar(){
}
proCar.prototype.name="原型";
proCar.prototype.color="blue";
proCar.prototype.price="10000";
proCar.prototype.getName=function(){
  document.write(this.name+"-----"+this.color+"<br>");
};
var car3=new proCar();
car3.getName();
/*
首先定义了构造函数 Car，但无任何代码，然后通过 prototype 添加属性。优点：
  a. 所有实例存放的都是指向 showColor 的指针，解决了重复创建函数的问题
  b. 可以用 instanceof 检查对象类型
  alert(car3 instanceof proCar);//true
  缺点，添加下面的代码：
  proCar.prototype.drivers = newArray("mike", "sue");
  car3.drivers.push("matt");
  alert(car3.drivers);//outputs "mike,sue,matt"
  alert(car3.drivers);//outputs "mike,sue,matt"
  drivers 是指向 Array 对象的指针，proCar 的两个实例都指向同一个数组。
*/
// 4、动态原型方式
function autoProCar(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.drives=new Array("mike","sue");
  if(typeof autoProCar.initialized== "undefined"){
   autoProCar.prototype.getName =function(){
   document.write(this.name+"-----"+this.color+"<br>");
   };
   autoProCar.initialized=true;
  }
}
var car4=new autoProCar("动态原型","yellow","1234565");
car4.getName();
car4.drives.push("newOne");
document.write(car4.drives);
/*
这种方式是我最喜欢的， 所有的类定义都在一个函数中完成， 看起来非常像其他语言的
类定义，不会重复创建函数，还可以用 instanceof
*/

Salin selepas log masuk

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

Penjelasan terperinci tentang cara mentakrifkan kelas dalam kemahiran JavaScript_javascript