최근 한동안 우유 스크립트에 장난을 치고 어떤 글에 답글을 달았는데, 모두가 볼 수 있는 내용이 하나도 없어서 조금 불안해서 이렇게 글을 썼습니다. : 비교적 추운 곳인 것을 고려하여 수업 캡슐화 영역에 게시했어야 했는데, 이 글이 더 많은 친구들에게 도움이 되기를 바라서 여기에 올립니다. >>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>>>> >>>>>>>>>>>
수업은 무엇인가요?
프로그래밍을 처음 접하는 많은 친구들은 클래스를 이해하지 못할 수도 있습니다. 사실 클래스는 "카테고리" 또는 "유형"이라고 부르는 것이 더 이해하기 쉬울 수도 있습니다. 예를 들어, "인간"과 같은 동물은 클래스이고, 특정 사람은 "인간" 클래스의 인스턴스입니다. (지구상에는 60억 명이 넘는 인구가 있습니다.) "인간" 클래스에는 하나만 있습니다. 남자와 여자도 인간이 아닌가? 왜 하나만 있을 수 있나요? 사실 여기서는 상속에 대해 이야기할 예정인데, 이에 대해서는 나중에 논의할 것이므로 계속해서 읽어보시기 바랍니다.
수업은 어떻게 생성하나요?
C에서는 클래스가 클래스로 선언됩니다. C와 달리 JavaScript는 함수와 동일한 함수를 사용하여 선언합니다. 이로 인해 Jscript를 배우는 친구들은 클래스와 함수를 혼동하게 됩니다. 그러나 오랫동안 사용해보면 자연스럽게 이해하게 될 것입니다. 이 글은 객체지향 프로그래밍을 공격하고 싶은 친구들을 위해 쓴 글이므로 한꺼번에 너무 깊게 논의할 생각은 없습니다.
아래에서 이 클래스의 정의를 살펴보세요.
function WuYouUser()
{
this.Name; //名字
} 그러면 클래스 인스턴스를 선언하는 방법은 무엇입니까? 매우 간단합니다.
var Wo = new WuYouUser(); //实例一：“我”
var Biyuan = new WuYouUser(); //实例二：“碧原”（Biyuan哥，不好意思。。。嘿嘿）
이 Wo(나)는 WuYouUser 클래스의 인스턴스입니다. 여기에는 WuYouUser가 제공하는 모든 것(이름 속성, 성별 속성 및 연령 속성)이 포함됩니다.
Wo.Name = "울고있는 홍각";
아주 간단하죠? 내 이름이 출력되는지 확인하려면
window.document.write(Wo.Name);
> out out of 10. > "Biyuan"이 출력되는 것을 볼 수 있습니다. 이는 Biyuan과 Wo도 WuYouUser 클래스의 인스턴스이지만 서로 다른 속성 값을 가진 서로 다른 개체임을 의미합니다.
속성은 기본값으로 설정할 수 있습니다. Wuyou에는 각 사람이 게시한 게시물 수에 대한 기록이 있습니다. 또한 WuYouUser 클래스에 게시물 수 속성을 추가합니다. 🎜> 새로운 Wuyou 사용자가 방금 등록한 후 게시물 수는 0입니다. 위 코드에서 ArticleCount 속성이 직접 0으로 설정되어 있는 것을 볼 수 있습니다.
다음 코드를 실행할 수 있습니다:
var Wo = new WuYouUser();
window.document.write(Wo.ArticleCount); 可以看到输出了0，说明ArticleCount属性被我们成功设置默认值为0
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
类的方法
方法这个词不大好理解，我觉得说成行为会更容易理解。一个人具有许多共同的行为，比如睡觉、吃饭、走路等等，现在我们给WuYouUser类添加一个发贴的方法。
function WuYouUser()
{
this.Name;
this.ArticleCount = 0;
this.NewArticle = function()
{
/*
*
* 具体如何发贴我们大家都知道，不就是打打字，加加图片再按一下保存之类的按钮么？
* 关于具体如何发贴的代码没有必要在这里写出来，我们要了解的仅仅是方法的定义与使用
* 我们在这里实现一个最简单的功能，也是很重要的功能：给我们的发贴数量加上1！
* 注意：恐龙等级就是这样加出来的，因此呀……大家狂发贴吧。。。
*/
this.ArticleCount++;
}
} 既然定义好了这个方法，我们来试试效果如何：
var Wo = new WuYouUser();
Wo.NewArticle();
document.write(Wo.ArticleCount); 可以看到输出了1，说明我们发贴成功了！真是有历史纪念意义的一刻，离恐龙等级又近一步了。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
静态属性
静态属性又称公共属性，它不属于某个类的实例，而是直接属于某个类。
比如说无忧用户有一个属性：注册用户的数量，它是属于整个无忧用户的，而不是属于泣红亭或者谁的
静态属性的声明方法是：
类名.prototype.属性名 = 属性值;
比如给WuYouUser类定义一个注册用户的数量Count：
WuYouUser.prototype.Count = 0;
那么如何读取它呢？有两种方法：
1. 直接用 WuYouUser.prototype.Count
2. 使用Wo.Count
这两者没有区别，都是得到0
虽然读取方法可以有两种，但在改变它的时候却得特别小心了，请看下边代码
var Biyuan = new WuYouUser();
WuYouUser.prototype.Count++;
document.write(Wo.Count);
document.write(Biyuan.Count); 你会发现两者的Count属性都是1，也就是说WuYouUser.prototype.Count改变了会影响到各个实例的相应属性，其实原理就是Wo、Biyuan的Count属性与WuYouUser.prototype.Count根本就是同一个！
现在来看另外一段代码：
var Biyuan = new WuYouUser();
Biyuan.Count++; //特别注意一下这里，这是直接改变Biyuan的Count属性
document.write(Biyuan.Count); // 输出 1
document.write(WuYouUser.prototype.Count); //输出 0
document.write(Wo.Count); //同样输出0，为什么？ 可以看到如果直接修改实例的静态属性值，那么会出现其它实例甚至类的静态属性与它不同步了？这是因为直接修改的时候，该实例会生成一个属于该实例的属性Count，这个时候Biyuan.Count不再与WuYouUser.prototype.Count是同一个了，也不与Wo.Count是同一个，这个Count属性是属于Biyuan自己所有的，以后改变了它也只是影响它自己而已。
因此如果不是特别的需要，建议不管在读取还是赋值的时候，都统一使用WuYouUser.prototype.Count这样的方式，以做到万无一失！
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
静态方法
与静态属性相似，它也有个另称：公共方法，同样属于类本身的。
静态方法的定义方式是：
类名.方法名 = function(参数1,参数2...参数n)
{
//方法代码
}
我们现在就来定义一个无忧用户类的注册新用户静态方法：
WuYouUser.prototype.AddOne = function()
{
//*** 同样具体代码不写出来，给静态属性Count增加1，表示注册用户数量又多一个
WuYouUser.prototype.Count++;
} 现在我们来看看如何用它，同样有两种方法：
1.直接使用WuYouUser.prototype.AddOne()
2.使用某实例的AddOne()
这两种方法没有什么不同：
var Wo = new WuYouUser();
var Biyuan = new WuYouUser();
document.write(WuYouUser.prototype.Count); // 0
Wo.AddOne();
document.write(WuYouUser.prototype.Count); // 1
document.write(Wo.Count); // 1
document.write(Biyuan.Count); // 1
WuYouUser.prototype.AddOne();
document.write(WuYouUser.prototype.Count); // 2
document.write(Wo.Count); // 2
document.write(Biyuan.Count); // 2 可以看出不管是使用Wo.AddOne()还是WuYouUser.prototype.AddOne()效果都是一样的，都是给WuYouUser.prototype.Count加上1
现在再看一段代码：
function NewClass() //由于上边的WuYouUser类不合适当这个例子的代码，我声明了一个新类NewClass
{
this.Name = "泣红亭"; //这里默认值为我的名字
}
NewClass.prototype.ChangeName = function(NewName)
{
this.Name = NewName;
}
var Wo = new NewClass();
Wo.ChangeName("郑运涛"); //我的真名 可以看到Wo.Name确实已经变成了"郑运涛"，这个方法似乎是可以用的，但里边是不是内有天机呢？
再看下边的代码，类的定义以及ChangeName的定义我们照样，但改变一下下边的代码：
NewClass.prototype.ChangeName("郑运涛");
document.write(NewClass.Name); //undefined，即未定义
document.write(NewClass.prototype.Name); //郑运涛
var Wo = new NewClass();
document.write(Wo.Name); //泣红亭 可以看到我们并没有定义NewClass.prototype.Name这个静态属性，但编译器给我们自己加了一个。
可是再看下边输出Wo.Name，它并不是为"郑运涛"，而是原来的默认值"泣红亭"，说明了什么？
其实很简单，看一下NewClass的定义里已经有Name这个属性，因此Wo也有自己的Name属性，它跟NewClass.prototype.Name并不是同一个的，因此就还是那样子。
那为什么前一个例子运行了Wo.ChangeName("郑运涛")却能够实现改变Wo.Name属性呢？其实在这里跟改变Wo.Count的值是同一个道理，编译器自动给Wo增加了一个方法ChangeName，这个方法代码与NewClass.prototype.ChangeName一样，但Wo.ChangeName是Wo这个实例所特有的，而非NewClass.prototype.ChangeName！
分析可知道在静态方法里尽量不要使用this这样的关键字来引用实例本身的属性，除非你有特别的目的，而且能够清楚地明白这里边的运行机制！
如果真的需要在静态方法里使用this，可以直接把this当作参数传进去：
NewClass.ChangeName = function(This,NewName) //注意这里是This,不是this
{
This.Name = NewName;
}>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
构造函数
一个类在初始化的时候其实也是一个函数的执行过程，这个函数就是构造函数，我们看一下下边的代码：
function WuYouUser()
{
this.Name = "泣红亭"; //默认定义为泣红亭
alert(this.Name);
}
var Wo = new WuYouUser();//可以看到出现一个窗口显示泣红亭三个字 可以看出类的定义不仅仅是定义了它的属性与方法，还同时可以加入一些代码，而这些代码就是该类的构造函数的代码，在实例声明过程中被执行！
其实说起来，类的属性与类的方法都是在构造函数里执行定义的，看下边的代码：
function WuYouUser()
{
this.Name = "泣红亭";
return;
this.Sex = "男";
}
var Wo = new WuYouUser();
document.write(Wo.Name); //泣红亭
document.write(Wo.Sex); //undefined，即未定义 看得出什么？Sex属性是在return;之后的，而WuYouUser类的构造函数遇到return即停止运行，换句话说this.Sex = "男";这一行是没有被执行，即Sex属性根本没有被定义！
构造函数可以有参数，参数值在声明实例的时候被传入：
function WuYouUser(Name)
{
this.Name = Name;
}
var Wo = new WuYouUser("泣红亭");
document.write(Wo.Name); //泣红亭
构造函数不需要返回值，但如果你设置了返回值，可以把它当成一个函数来使用。
function Sum(a, b)
{
this.a = a;
this.b = b;
return this.a + this.b;
}
document.write(Sum(12, 23)); //输出的是12与23的和35
var Obj = new Sum(12,23);
document.write(Obj.a) // 12
document.write(Obj.b) // 23 感觉挺奇妙，对吧？我写这文章写着写着也觉得挺奇妙的，呵呵！
但强烈建议不要把一个类当成一个函数来使用！如果你需要的是一个函数，请直接写成函数而不要写成类，以免搞混了。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
继承
继承这个词在面向对象的编程里是非常重要的，虽然JavaScript并不是真正面向对象的语言，而是跟VB一样是基于对象的语言，它同样提供了继承机制。
文章开头时谈到了男人与女人，这也同样是两个不同的类，但却具有相同的一些属性以及方法，而这些相同的特性是来自“人”这个类的，换句话说男人与女人继承了“人”的所有特性！但是男人与女人却有其不同的地方，编程语言里的继承也一样，一个类A继承了另一个类B，那么类B就是类A的父类，类A就是类B的派生类，也称为子类。比如男人就是人的派生类，而人就是男人的父类。最高一级的类称为基类，想象一下就可以明白，男人继承自人，男孩继承自男人，人就是男孩的基类，男人就是男孩的父类。
>>>>>>>>>>>>>>>>>>>>
题外：多重继承
这里再涉及一个多重继承的话题，但如果你仅仅是学JavaScript的话就没有必要看下去，因为JavaScript不提供多重继承，准确一点说没有一种简单而标准的方法来实现多重继承（其实是有办法实现的，只不过麻烦了一点，而且确实没有必要）。
在C++中是有多重继承的概念的，这里是讨论JavaScript，因此不打算讲，只是说说它的一点点思想以供参考。
在上边男孩的继承问题中，男孩其实不仅仅是继承自男人，还继承自孩子（有男孩子，也有女孩子）这个类，因此，它同时继承了两个类：男人与男孩，这就是所谓的多重继承。
好，这个问题打住，我们还是回归主题。
>>>>>>>>>>>>>>>>>>>>
先看第一个类的定义：
function A()
{
this.Name = "泣红亭";
alert(this.Name);
}
这个类定义了一个属性Name，默认值为"泣红亭"
现在看第二个类的定义：
function B()
{
this.Sex = "男";
alert(this.Sex);
} 定义了一个属性Sex,默认值为"男"
继承的方式就是 子类.prototype = new 父类();
现在我们来让B类继承A类：
B.prototype = new A();
运行这一段代码：
var Obj = new B(); //首先打开警告窗口显示"泣红亭",再显示"男"
可以从上边的结果看出B类继承了A类，拥有了A类的属性Name，并且执行了A类的构造函数，而且A类的构造函数在B类的构造函数执行之前执行。因此我们利用这个可以实现重写父类的方法以及重设置父类某属性的默认值：
function A()
{
this.Name = "泣红亭";
this.Show = function()
{
alert("这是A类的Show方法");
}
alert(this.Name);
}
function B()
{
this.Name = "郑运涛";
this.Show = function()
{
alert("这是B类的Show方法");
}
alert(this.Name);
}
var Obj = new B();
Obj.Show(); 结果出现了三次警告窗口，第一个内容为泣红亭,是执行A类的构造函数里的alert(this.Name)，那时候Name属性值还为"泣红亭",因为B类的构造函数还没执行，第二次内容为"郑运涛",这是B类里的alert(this.Name)，因为B类的构造函数里给Name重赋值为"郑运涛"。最后是调用了Obj.Show()，执行了不是A类的Show方法里的Show（显示"这是A类的Show方法"），而是执行了B类的Show（显示"这是B类的Show方法"），很明显Show方法被重写了。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
类作为一个对象时的属性与方法（不知道如何简洁地表达，因此用了这么长的题目）
不知道在这里谈这个话题是否有点混人耳目，但又觉得不谈这篇文章就不算完整，因为文章目的就是要让人搞清楚类的方方面面。
看了这一小节的题目，或许你会觉得奇怪，类就是类，怎么会“作为一个对象”呢？在JavaScript里，一切都是对象，包括类！对象可以有属性，可以有方法，类也同样可以有，但这个非常容易跟前边说到的静态属性与静态方法搞混了，因此要仔细看清楚两者的分别！
定义一个类：
function WuYouUser()
{
this.Name = "泣红亭";
}
定义类作为一个对象时的属性：
WuYouUser.Url = "http://www.51js.com"; //静态属性的定义是：WuYouUser.prototype.Url = "http://www.51js.com";
var Wo = new WuYouUser();
document.write(WuYouUser.Url); //http://www.php.cn/
document.write(Wo.Url); //undefined,即未定义！注意这里的未定义 从这里可以看出Url这个属性是WuYouUser自个所有，改变了它与其它类以及它的子类完全无关！
引用类的属性只有一个办法，就是类名.属性名，改变它也一样。
定义类作为一个对象时的方法：
WuYouUser.ChangeUrl = function()
{
this.Url = "http://51js.com";
} 你或许会觉得奇怪，这里的this是什么？因为ChangeUrl这个方法是属于对象WuYouUser的，因此this指的就是WuYouUser本身！
可以运行下边的代码试试：
document.write(WuYouUser.Url); // http://www.php.cn/
WuYouUser.ChangeUrl();
document.write(WuYouUser.Url); // http://www.php.cn/ 明显ChangeUrl直接修改了WuYouUser.Url的值，因此后边才能输出http://www.php.cn/
如果你这一节看不明白，也不要着急，编程嘛，许多东东都只能意会不能言传，而且我又没口才，说不清楚，只要以后多写写代码，多用用类自然而然会体会到这一些，还有可以去看看JSVM的代码，里边几乎每个类都有用到类作为一个对象时的属性与方法。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
后言
首先感谢你能够有耐心看到这里，我也没想到写了这么多才能够写得像样一点，请别介意。
不管是哪种语言，只要是支持类的，类都在这种语言中占了非常重要的地位，但不是谁都能够掌握它，为了让无忧还没学过类以及对类这个东东还搞不清楚的网友能够清楚一点了解类的概念以及用法，也为了对无忧做点贡献，我写了这篇文章，希望大家能够喜欢。
최근 JavaScript의 OO에 대해 자주 이야기하지만 JavaScript는 기껏해야 "객체 기반"이라고밖에 말할 수 없는 "객체 지향" 언어라는 점을 기억하시기 바랍니다.
'객체 지향'과 '객체 기반'의 차이점을 간단하고 정확하게 설명할 수 있는 단어를 찾기가 어렵습니다.
객체지향이라고 하면 먼저 c를 떠올리고, 그 다음은 java, 나중에는 닷넷을 생각하게 됩니다. (여기서 다른 사이드 언어에 대해서는 논하지 않겠습니다.)
사실 c는 구현하는 것입니다. "객체 지향" 아직 "프로세스" 유형이 많기 때문에 사고 측면에서 Java보다 열등합니다. Java는 다중 상속, 오버로드된 연산자 및 기타 "복잡하고 비실용적인" 것들을 버리고 인터페이스에 디자인을 집중합니다. 이는 프로그래머의 지루한 작업을 단순화할 뿐만 아니라 전체 프레임워크를 더욱 명확하게 만듭니다. 가장 중요한 것은 Java의 모든 것이 클래스 형태로 존재하며 두 번째 형태가 없다는 것입니다. 닷넷의 최신 C#은 ms 브랜드 java처럼 보입니다.
너무 멀리 가네요. javascript로 돌아가겠습니다
Javascript가 객체지향이 아니라고 말하는 것은 단지 객체지향이 아니라는 뜻이 아닙니다. 실제 의미에서는 구현되지 않습니다: 추상 객체, 상속, 오버로딩 등과 같은 객체 지향 기능.
그러나 JavaScript의 "클래스"는 넓은 의미의 "클래스" 개념이 아닙니다. 클래스는 원래 추상적인 정의일 뿐이지만, JavaScript에서 "Function"을 통해 정의된 클래스는 본질적으로 "객체"입니다!
그리고 JavaScript의 구문 영역은 전체 IE 프로세스가 아니라 Window 개체를 기반으로 합니다.
다른 Window 객체 아래의 동일한 함수 정의는 동일한 "클래스"가 아닙니다.
예:
a.htm에서는 클래스 A 함수 A(){}를 정의하고, b.htm에서는 클래스 A 함수 A(){}도 정의합니다.
a.htm에서 인스턴스를 만듭니다: var a = new A();
b.htm에서 a.htm의 winAhandle 핸들을 얻습니다.
그런 다음 a.htm에서 a의 인스턴스를 얻습니다.
var a = winAhandle.a;
A 인스턴스가 false이고 이를 winAhandle.A 인스턴스로 바꾸는 것이 true임을 알 수 있습니다.
이유는 매우 간단합니다. b.htm의 A 클래스는 그렇지 않습니다. not a.htm의 A 클래스와 동일하지 않습니다. 이 "클래스"의 구문 영역은 동일한 Window 객체로 제한됩니다(동일한 Window 객체는 동일한 페이지를 참조할 뿐만 아니라)
이것은 클래스가 넓은 의미에서 추상적인 정의라는 개념과는 분명히 반대입니다
VB를 아는 사람도 이해해야 합니다. 이는 VB4 이후 및 이전 VB(VBS 포함)의 클래스에도 해당됩니다. VB.NET은 Class를 통해 정의되지만.
예를 들어 새 A를 세션에 넣었다가 다음에 세션에서 꺼낼 때 원래 개체가 아닙니다.
사실 구문 도메인이 다르기 때문에 이번에는 이전에 정의한 클래스를 유지할 수 없으므로 파서가 무엇인지 알 수 없으므로 복원할 수 없습니다.
그런데 상속 방법은 JavaScript에서 사용된 프로토타입 상속에 대한 자세한 소개는 이 책
"Design Patterns Elements of Reusable Object Oriented Soffware"
중국어 버전은 "Reusable Object Oriented" Design이라고 하는 것 같습니다. 패턴'
좋은 책이에요! ! !
자바스크립트에는 다중 상속이 없습니다. 객체 지향 프로그래밍에서는 다중 상속이 필요하지 않습니다. 다중 상속은 더 나은 재사용성을 제공하지만 클래스 간의 관계가 지나치게 복잡해질 수 있습니다.
일반적으로 말하면, 일반적으로 특정 유형의 파생물이라고 생각할 수 있습니다. 다른 특성은 인터페이스를 사용하여 정의할 수 있습니다.
자바스크립트에는 인터페이스 개념이 없습니다. 자바스크립트는 해석된 언어이고 실제 매개변수의 유형을 미리 확인하지 않기 때문에 인터페이스가 필요하지 않습니다. 매개변수 객체로서 런타임까지 로딩 과정에서 특정 메소드가 있는지 확인하지 않고 존재하면 호출하고, 존재하지 않으면 예외를 발생시킨다. 매개변수로 호출되기 전에 어떤 인터페이스가 상속되는지 강제로 선언할 필요가 없습니다.
그러나 실제로는 전체 프레임워크를 쉽게 읽을 수 있도록 주로 뷰를 고려하여 일부 인터페이스를 디자인해야 합니다!
위 내용은 JavaScript class_javascript 스킬을 얕은 것부터 깊은 것까지 이해하는 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
