> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 클래스를 생성하는 일반적인 방법 요약

JavaScript에서 클래스를 생성하는 일반적인 방법 요약

巴扎黑
풀어 주다: 2017-08-16 11:36:58
원래의
1142명이 탐색했습니다.
이 문서의 예제에서는 JS에서 클래스를 만드는 일반적인 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.
Javascript는 객체 기반 언어이며 접하는 거의 모든 것이 객체입니다. 그러나 구문에 클래스가 없기 때문에 진정한 객체 지향 프로그래밍(OOP) 언어가 아닙니다. (그러나 ES6에서는 객체의 템플릿으로 클래스 개념을 도입했습니다. 클래스는 class 키워드를 통해 정의할 수 있습니다. ES6 시작하기: http://es6.ruanyifeng.com/).
그러나 프로젝트 개발에서는 JS 객체 지향 개발이 자주 사용되며, 이를 위해서는 JS를 사용하여 일부 객체를 인스턴스화하는 클래스를 만들어야 합니다. 다음으로 JS에서 클래스를 생성하는 여러 가지 방법을 소개합니다.
1. 팩토리 메서드:
//通过工厂方式创建对象,先定义一个工厂方法
function createObj(){
  var obj = new Object();
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
//调用工厂方法创建对象:
var obj1 = createObj();
//也可以用这种形式
function createObj(){
  var obj = {}; //这样生成对象
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
var obj1 = createObj();
로그인 후 복사

이 메서드의 문제점은 팩토리 메서드를 통해 개체가 생성될 때마다 이 개체의 속성 이름과 메서드가 다음과 같이 표시된다는 것입니다. 모두 다시 생성해야 하므로 메모리가 낭비됩니다.
2. 생성자 방법:
//创建一个构造器,构造函数首字母大写
function Obj(){
  this.name="xxx";
  this.say=function(){
    alert("我是xxx");
  };
}
//利用构造器,通过new关键字生成对象
var obj1=new Obj();
로그인 후 복사

가장 기본적인 방법이지만 팩토리 방법과 동일한 단점도 있습니다.
3. 프로토타입 방법:
//用空函数创建一个类
function Obj(){
}
//在类的原型链上添加属性和方法
Obj.prototype.name="xxx";
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1=new Obj();
로그인 후 복사

이 방법의 단점은 참조 속성이 있을 때 한 객체의 이 속성을 변경하면 다른 객체의 이 속성도 변경된다는 것입니다. 참조 속성이 동일한 장소를 가리키기 때문입니다.
4. 프로토타입/생성자 조합 방법
//用构造函数定义对象的非函数属性
function Obj(name){
  this.name=name;
  this.arr=new Array('a','b');
}
//用原型方式定义对象的方法
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1 = new Obj('xxx');
로그인 후 복사

이것은 현재 클래스와 객체를 생성하고 다양한 방법으로 메서드와 속성을 캡슐화하는 데 가장 일반적으로 사용되는 방법입니다.
5. 동적 프로토타입 모드
//动态原型方式和原型/构造混合方式的原理相似,唯一的区别就是赋予对象方法的位置
function Person(name, sex) {
  this.name = name;
  this.sex = sex;
  if (typeof this.say != "function") {
    Person.prototype.say = function () {
      alert(this.name);
    }
  }
}
var man =new Person ("凯撒", "男");
man.say();//凯撒
로그인 후 복사

동적 프로토타입 모드는 생성자에 모든 정보를 캡슐화하며, 해당 정보가 존재하지 않는 경우에만 프로토타입에 추가됩니다. 이 코드는 처음 호출될 때만 실행됩니다.
obj 개체를 인스턴스화하는 세 가지 단계가 있습니다.
1. obj 개체 만들기:
obj=new Object();
로그인 후 복사

2. obj의 내부 __proto__를 동시에 구성하는 함수 Obj의 프로토타입을 가리킵니다. ==Obj.prototype.constructor, 이는 obj.constructor.prototype이 Obj.prototype(obj.constructor.prototype===A.prototype)을 가리키도록 만듭니다. obj.constructor.prototype과 내부 _proto_는 서로 다른 것입니다. _proto_는 객체를 인스턴스화할 때 사용됩니다. Obj에는 프로토타입 속성이 없지만 __proto__를 사용하여 프로토타입 체인에서 프로토타입 속성을 얻을 수 있습니다. . 및 프로토타이핑 방법.
3. obj를 사용하여 생성자 Obj를 호출하여 멤버(예: 개체 속성 및 개체 메서드)를 설정하고 초기화합니다.
이 세 단계가 완료되면 obj 개체는 생성자 Obj와 연결되지 않습니다. 이때 생성자 Obj가 멤버를 추가하더라도 더 이상 인스턴스화된 obj 개체에 영향을 미치지 않습니다.

위 내용은 JavaScript에서 클래스를 생성하는 일반적인 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿