집 > 기사 > 웹 프론트엔드 > js에서 클래스를 정의하는 방법은 무엇입니까?

js에서 클래스를 정의하는 방법은 무엇입니까?

php中世界最好的语言원래의: 2018-04-23 10:43:381737검색

이번에는 js에서 클래스를 정의하는 방법과 js에서 클래스를 정의할 때 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

ECMAScript6은 이미 클래스를 지원하지만 이전 버전에서는 클래스를 지원하지 않았지만 몇 가지 방법을 통해 클래스를 시뮬레이션할 수 있습니다.

JS 수업은 중요하면서도 모호하게 느껴질 때가 많습니다.

먼저 js에서 중요한 세 가지 지식 포인트인 this, 프로토타입, 생성자를 강조하겠습니다.

(시뮬레이션) 클래스를 정의하는 여러 가지 방법을 요약해 보겠습니다.

1.Factory 패턴

function createObject(name,age){
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.getName = function(){
    return this.name;
  };
  obj.getAge = function(){
    return this.age;
  }
  return obj;
}
var obj2 = createObject("王五",19);
console.log(obj2.getName());
console.log(obj2.getAge());
console.log(obj2.constructor);

Factory 패턴 방법객체 생성, 허용된 매개변수를 기반으로 팩토리 패턴을 생성할 수 있습니다. 필요한 정보가 포함된 객체 이 메서드는 횟수 제한 없이 호출할 수 있으며, 매번 2개의 속성과 2개의 메서드가 포함된 객체를 반환합니다. 팩토리 패턴은 유사한 객체를 생성하는 문제는 해결하지만 객체 식별 문제는 해결하지 못합니다. 즉, 객체의 범주를 결정하고 객체로 통합할 수 없습니다.

2.ConstructorMethod

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
}
Person.prototype = {
  constructor:Person,
  getName:function(){
    return this.name;
  },
  getAge:function(){
    return this.age;
  },
  getJob:function(){
    return this.job;
  }
}
var p = new Person("二麻子",18,"worker");
console.log(p.constructor);
console.log(p.getName());
console.log(p.getAge());
console.log(p.getJob());

생성자 메서드가 개체의 소유권을 결정하고 개체의 유형을 결정할 수 있지만 생성자의 메서드를 각 개체에서 다시 만들어야 합니다.

3.프로토타입 패턴

function Person(){
}
Person.prototype = {
  constructor:Person,
  name:"张三",
  age:21,
  job:"teacher",
  getName:function(){
    return this.name;
  },
  getJob:function(){
    return this.job;
  }
}
var p = new Person();
console.log(p.getName()); //张三
console.log(p.getJob()); //teacher
var p2 = new Person();
p2.name = "李四";
console.log(p2.getName()); //李四

예제 코드를 보면 객체 인스턴스가 프로토타입의 값에 액세스할 수 있지만 객체 인스턴스의 값이 동일하면 덮어쓸 수 없다는 것을 알 수 있습니다. 이름을 프로토타입 정의 속성으로 지정하면 이 속성은 프로토타입에서 해당 속성을 마스킹하지만 재정의하지는 않습니다.

4. 캡슐화(지금은 그렇게 부르자)

var Dog = {
  createDog:function(){
    var dog = {};
    dog.name = "汪汪";
    dog.sayHello = function(){
      console.log("Hello World!");
    };
    return dog;
  }
};
var dog = Dog.createDog();
dog.sayHello();

는 코드를 캡슐화하고 인스턴스 객체를 전체적으로 반환하는 것으로 팩토리 패턴과 다소 유사합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!