집 >웹 프론트엔드 >JS 튜토리얼 >Javascript로 객체를 생성하는 5가지 일반적인 방법에 대한 자세한 설명

Javascript로 객체를 생성하는 5가지 일반적인 방법에 대한 자세한 설명

php是最好的语言원래의: 2018-08-08 09:33:461029검색

Javascript에서 객체를 생성하는 5가지 일반적인 방법:

객체를 생성하는 7가지 일반적인 방법은 다음과 같습니다. 자주 사용되는 두 가지 방법의 예는 다음과 같습니다.

1. 객체 방법 직접 생성#🎜🎜 #

생성 구문은 다음과 같습니다.

var 对象变量名 = new Object();
对象变量名. property1 = value1;
…;
对象变量名. propertyN = valueN;
对象变量名. methodName1 = function([参数列表]){
    //函数体}
…;
对象变量名. methodNameN = function([参数列表]){
    //函数体}

먼저 객체를 생성한 다음 객체의 속성과 기능의 값을 정의하고 설정합니다.

참조 아래 참조 예제 및 호출:

var student =new Object();student.name="小李";student.age=21;student.dohomework=function(){
    console.log(this.name+"正在做作业");}
console.log(student.name);student.dohomework();

# 🎜🎜#

2. 객체 초기화 방법

생성 구문은 다음과 같습니다.

var 对象变量名 = {
    property1 : value1,
    property2 : value2,
    …, 
    propertyN : valueN,
    methodName1 : function([parameter_list]){
        //函数体
    },
    …, 
    methodNameN : function([parameter_list]){
        //函数体
    }
}

#🎜 🎜#중괄호 및 함수 함수 정의 내에서 직접 개체의 속성 할당

참조 예제 및 호출은 다음과 같습니다.

var teacher = {
    name:"Mr Li",
    age:21,
    teach:function(){
        console.log(this.name+"正在授课ing");
    }
}
teacher.teach();

참고: 다른 속성 값은 직접 쉼표로 구분되며 일반적으로 마지막 값 뒤에 구두점이 없습니다#🎜🎜 #

3. 생성자 방법

생성 구문은 다음과 같습니다.

function 构造函数([参数列表]){ 
    this.属性 = 属性值; 
    …    this.属性N = 属性值N;    this.函数1 = method1; 
    …    this.函数N = methodN; 
}function method1([参数列表]){
    //函数体}
…function methodN([参数列表]){
     //函数体}

또는

function  构造函数([参数列表]){ 
    this.属性 = 属性值; 
    …    this.属性N = 属性值N;    this.函数1 = function([参数列表]){
        //函数体
    } ;
    …    this.函数N = function([参数列表]){
        //函数体
    } ;
}

참고: 일부 값은 기본값으로 설정될 수 있으며 일부 값은 필요에 따라 매개변수 목록에 제공될 수 있습니다. # 🎜🎜#

요약:

1 및 위의 두 가지 방법 반대로 생성자 방법을 사용하여 객체를 생성하면 코드를 효과적으로 절약할 수 있습니다.

2. 이는 생략할 수 없습니다.
3 생성자 메소드 사용 객체를 생성하려면 코드 재사용이 더 용이하므로 참조 예제 및 호출은 다음과 같습니다.

function Student(name){
    this.name=name;    this.age=21;    this.play=function(){
        console.log(this.name+"正在玩");
    }
}var student=new Student("仔仔");
student.play();

4.prototype 프로토타입 방법# 🎜🎜#

생성 구문은 다음과 같습니다. # 🎜🎜#

function 对象构造器( ){} 
对象构造器.prototype.属性名=属性值;
对象构造器.prototype.函数名 = function([参数列表]){
    //函数体}

새 함수를 선언한 후 함수(JavaScript에서는 함수도 객체임)는 프로토타입 속성을 갖게 되며 이를 통해 새 속성과 메서드를 객체에 추가할 수 있습니다.

아래 참조 예제 및 호출을 참조하세요.

function Student(){}
Student.prototype.name="仔仔";
Student.prototype.age=21;
Student.prototype.dohomework=function(){
    console.log(this.name+"正在做作业");
}var student=new Student();
student.dohomework();

5 혼합 생성자/프로토타입 방법

Creation 구문은 다음과 같습니다.

function 对象构造器([参数列表]){} 
对象构造器.prototype.函数名 = function([参数列表]){
    //函数体}

생성자 메서드는 속성에 값을 동적으로 할당하는 데 편리하지만 이 메서드도 생성자 본문에 메서드를 정의하므로 코드가 더 복잡해집니다. 프로토타입 메소드는 속성에 값을 동적으로 할당하는 데 편리하지 않지만 이러한 방식으로 정의된 속성과 메소드는 서로 분리되므로 생성자는 속성을 정의하고 프로토타입은 메소드를 정의합니다.

참조 예제 및 호출은 아래를 참조하세요.

function Student(name){
    this.name=name;    this.age=21;
}
Student.prototype.dohomework=function(){
    console.log(this.name+"正在做作业");
}var student=new Student("仔仔");
student.dohomework();

동적 프로토타입 방법과 팩토리 모드는 일반적이지 않으므로 여기서는 설명하지 않습니다. 내 일을 보고 있어!

Javascript로 객체를 생성하는 5가지 일반적인 방법에 대한 자세한 설명

Javascript에서 객체를 생성하는 5가지 일반적인 방법:

관련 기사