javascript 정의 클래스에 대한 자세한 설명 및 Classes_javascript 스킬 구현 예

이 기사의 예에서는 자바스크립트 정의 클래스 및 클래스의 구현을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

최근 여러 그룹에서 클래스의 함수가 정의된 후 노출되는 메서드를 어떻게 호출하는지 묻는 사람들을 자주 봅니다. 이제 수업 구현에 대한 에세이가 생겼습니다.

먼저 수업에 대해 이야기해 보겠습니다. 수업에는 다음과 같은 특징이 있습니다.

1. 공개 방법
2. 비공개 메소드
3. 속성
4. 프라이빗 변수
5. 소멸자

예를 직접 살펴보겠습니다.

/***定义类***/
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(); //调用私用方法
  }
}

여기에 메모를 모두 적어두었으니 아마 다들 한 눈에 알아보실 수 있을 겁니다. JS를 거의 작성하지 않는 친구라면 내가 왜 _self 변수를 정의하는지 궁금할 것입니다. 왜냐하면 js에서는 이 변수가 다른 객체 언어에서 사용될 필요가 없고 구문 분석 및 실행 프로세스 중에 변경되기 때문입니다. 여기서는 js에서 이에 대한 정의에 대해 간략하게 설명하겠습니다. 필요한 경우 더 작성할 수 있습니다.

정의: 메소드로 호출될 때 이를 포함하는 함수가 속하는 객체입니다.
특징: 기능이 다른 개체에 할당됨에 따라 환경이 바뀔 수 있습니다!

관심 있는 친구는 온라인에서 정보를 검색하여 자세한 내용을 알아볼 수 있습니다. 주제로 돌아가서 여기서 _self의 목적은 추가 개인 변수를 열고 클래스 자체에 대한 참조를 직접 가리키는 것입니다.

코드를 사용하여 직접 구현할 수 있는 소멸자 문제에 대해 언급했습니다. 함수 끝에 직접 실행 코드를 작성하면 됩니다.

/***定义类***/
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();
}

이 수업을 이용해보세요

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

그렇습니다

Javascript 자체는 객체 지향을 지원하지 않고, 액세스 제어 문자가 없으며, 클래스를 정의하는 키워드 class가 없으며, 상속을 위해 확장이나 콜론을 지원하지 않으며, virtual을 사용하여 virtual을 지원하지 않습니다. 그러나 Javascript는 유연한 언어이므로 class라는 키워드가 없는 Javascript가 어떻게 클래스 정의를 구현하고 객체를 생성하는지 살펴보겠습니다.

1: 클래스를 정의하고 해당 클래스의 인스턴스 객체를 생성합니다

Javascript에서는 다음과 같이 함수를 사용하여 클래스를 정의합니다.

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

의심스럽다고 말할 수 있을까요? 이것은 정의 기능이 아닌가? 예, 이것은 정의 함수입니다. Shape 함수를 정의하고 x와 y를 초기화합니다. 그러나 다른 각도에서 보면 이는 x와 y라는 두 개의 속성을 갖는 Shape 클래스를 정의하는 것이며 초기값은 각각 1과 2이다. 클래스는 클래스가 아니라 함수입니다.

그런 다음 다음과 같이 Shape 클래스의 aShape 객체를 생성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var aShape = new Shape();

2: 공개 속성과 비공개 속성 정의

aShape 개체를 생성했지만 해당 속성에 액세스하려고 하면 다음과 같은 오류가 발생합니다.

코드 복사 코드는 다음과 같습니다.

aShape.x=1;

이는 var로 정의된 속성이 비공개임을 보여줍니다. 공개 속성을 정의하려면 이 키워드를 사용해야 합니다

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

이런 방식으로 Shape의 속성에 액세스할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

aShape.x=2;

위의 코드를 기반으로 요약할 수 있습니다. var를 사용하여 클래스의 비공개 속성을 정의하고 이를 사용하여 클래스의 공개 속성을 정의합니다.

3: 공개 메소드와 비공개 메소드 정의

Javascript에서 함수는 Function 클래스의 인스턴스입니다. 따라서 함수도 객체이므로 함수를 생성할 수 있습니다. 클래스에 함수를 할당하면 이 속성 변수는 실행 가능한 함수이므로 메서드라고 부를 수 있습니다. 코드는 다음과 같습니다.

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

위 코드에서 draw를 정의하고 여기에 함수를 할당했습니다. 다음으로 OOP에서 공개 메서드라고 하는 aShape를 통해 이 함수를 호출할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

aShape.draw();

var로 정의하면 그리기는 비공개가 되며, 이는 과 같이 OOP에서 비공개 메서드라고 합니다.

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程序设计有所帮助。