자바스크립트 객체를 선언하는 방법에는 몇 가지가 있나요? 자바스크립트 객체를 선언하는 6가지 방법

이 글에서 알 수 있는 점은 JavaScript에서 객체를 선언하는 방법이 얼마나 많은가입니다. JavaScript 개체를 선언하는 6가지 방법에는 특정 참조 값이 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

-- 지식이 처음이라면 ES6로 작성할 필요는 없습니다.

1. 리터럴 선언

var obj = {
        属性名1 : 属性值,
        属性名2 : 属性值,
        属性名3 : 属性值,
        方法名1 : function() {
            .....
        },
        方法名2 : function() {
            .....
        }
    }

obj.property 이름 또는 obj.method 이름()을 통해 개체의 속성/메서드를 읽거나 호출할 수 있습니다. obj.属性名或obj.方法名()就可以读取或调用对象的属性/方法了。

二、用new操作符构造Object对象

var obj = new Object();
obj.属性名1 = 属性值1;
obj.属性名2 = 属性值2;
obj.属性名3 = 属性值3;
obj.属性名4 = 属性值4;
obj.方法名1 = function() {
    ....
};
obj.方法名2 = function() {
    ....
};
....

首先用new Object()创建一个空对象，然后用多条语句给对象添加属性/方法。

三、用函数声明的方式构造对象

函数Function本身就是对象Object的实例

var fn = new Function(); //new一个空函数
function myFn() {}; //声明一个空函数
console.log(fn instanceof Object); //true
console.log(myFn instanceof Object); //true

所以可以模仿new Objcet()构造对象的方式，用function myFn() {}声明一个自定义的函数，然后通过new myFn()构造对象，比如：

function person(name, age) {
        this.name = name;
        this.age = age;
        this.say = function() {
            console.log('My name is '+ this.name + ', I\'m ' + this.age + ' years old');
        }
    }
    var xiaoMing = new person('xiaoming', 16);
    xiaoMing.say(); //"My name is xiaoming, I'm 16 years old"

通过这种方式声明的对象，每一次new出来的对象都是独立的，互相不会有影响，属性、方法中的this指向的就是新创建的、调用他们的对象。

四、工厂模式声明对象

工厂模式声明对象可以理解成二、三两种方法的结合体，用三的思想套进二的内容。仿照上面例子举例：

function person(name, age) {
        var obj = new Object(); 
        obj.name = name;
        obj.age = age;
        obj.say = function() {
            console.log('My name is '+ obj.name + ', I\'m ' + obj.age + ' years old');
        };
        return obj;
    }
    var xiaoMing = person('xiaoming', 16);
    xiaoMing.say(); //"My name is xiaoming, I'm 16 years old"
    var xiaoHong = person('xiaohong', 18);
    xiaoHong.say(); //"My name is xiaohong, I'm 18 years old"

工厂模式之所以叫工厂模式，就是类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果。他的写法与三、用函数声明的方式构造对象比较像，但是稍有不同。

每一次调用function 声明的函数时，它在内部new Object()，最后将这个新建的对象return回来，调用时就像普通函数调用一样，实例化的时候不用再new了（内部new过）。虽然多次调用该函数走的都是一样的流程，但是生产出来的两个产品互不影响。

五、原型方式声明对象

function person() {/*空*/};
    person.prototype.height = "1.80m";
    person.prototype.grade = "Senior 3";
    person.prototype.say = function() {
        console.log( 'I\'m ' + this.height + ' tall and I\'m in '+ this.grade);
    }
    var xiaoMing = new person();
    xiaoMing.say(); //"I'm 1.80m tall and I'm in Senior 3"

原型方式是将该对象的属性/方法写在他的prototype属性所指的对象上。（每一个函数或者说对象都有一个prototype属性，这个属性以对象的形式存在）。

每次new实际上有这么一些操作：

1)创建一个空对象
2)把这个空对象的__proto__指向构造函数的prototype
3)把这个空对象赋值给this
4)执行构造函数内的代码

new出来的新对象的__proto__属性都会指向person.prototype，然后就可以执行person.prototype

2. new 연산자를 사용하여 객체 객체를 생성합니다

function person(name, height) {
        this.name = name;
        this.height = height;
    };
    person.prototype.age = 18;
    person.prototype.grade = "Senior 3";
    person.prototype.say = function() {
        console.log('Hello, my name is ' + this.name + '. I\'m ' + this.age + ' years old, ' + this.height + ' tall and I\'m in '+ this.grade + '.');
    }
    var xiaoMing = new person('Xiaoming', '1.80m');
    xiaoMing.say();
    //"Hello, my name is Xiaoming. I'm 18 years old, 1.80m tall and I'm in Senior 3."
    var xiaoHong = new person('Xiaohong', '1.65m')
    xiaoHong.say();
    //"Hello, my name is Xiaohong. I'm 18 years old, 1.65m tall and I'm in Senior 3."

먼저 new Object()를 사용하여 빈 객체를 만든 다음 여러 문을 사용하여 객체에 속성/메서드를 추가합니다.

3. 함수 선언을 사용하여 객체 생성

Function 함수 자체는 Object

rrreee

객체의 인스턴스이므로 new Objcet()을 모방할 수 있습니다. code>객체를 생성하려면 function myFn(){}을 사용하여 사용자 정의 함수를 선언한 다음 new myFn()을 통해 객체를 생성합니다. 예:

rrreee

Pass 이런 방식으로 선언된 객체의 경우 각 new 객체는 독립적이며 서로 영향을 주지 않습니다. 속성과 메소드의 this는 새로 생성된 객체를 가리킵니다. . , 개체를 호출합니다.

4. 팩토리 패턴 선언 객체

팩토리 패턴 선언 객체는 2가지의 내용을 통합하는 3가지 아이디어를 사용하여 2가지 방법과 3가지 방법의 조합으로 이해될 수 있습니다. 위의 예를 들어보세요: rrreee
공장 모델을 공장 모델이라고 부르는 이유는 유사한 제품을 대량으로 생산하고 동일한 작업을 수행하며 동일한 효과를 얻을 수 있는 실제 공장과 유사하기 때문입니다. . 그의 작성 방식은 3.함수 선언을 이용한 객체 생성과 유사하지만 약간 다릅니다.

function으로 선언된 함수가 호출될 때마다 내부적으로 new Object()하고 마지막으로 새로 생성된 객체를 다시 반환하여 호출합니다. 이는 일반적인 함수 호출과 같습니다. 인스턴스화할 때 new가 필요하지 않습니다(new는 내부적으로 수행됩니다). 이 함수를 여러 번 호출하는 것은 동일한 과정을 따르지만, 생성된 두 제품은 서로 영향을 미치지 않습니다. 5. 프로토타입 메소드는 객체를 선언합니다

rrreee

프로토타입 메소드는 prototype 속성이 가리키는 객체에 객체의 속성/메서드를 작성하는 것입니다. (모든 함수나 객체에는 객체 형태로 존재하는 prototype 속성이 있습니다.)

🎜new에 실제로 다음 작업이 있을 때마다: 🎜🎜1) 빈 개체 만들기🎜2) 이 빈 개체의 __proto__를 생성자 프로토타입🎜3) 이 빈 객체를 this에 할당🎜4) 생성자🎜🎜new의 코드를 새 객체의 __proto__에 실행합니다. object 속성은 모두 person.prototype을 가리키며, 그러면 person.prototype의 함수 내용이 실행될 수 있습니다. 🎜🎜JS에서 자주 언급되는 이벤트 프록시/대리인과 약간 비슷합니다. 이벤트는 DOM 요소에 직접 바인딩되지 않고 상위 요소에 바인딩됩니다. DOM 요소에 형제 요소를 추가하면 버블링으로 인해 형제 요소가 동일한 이벤트를 트리거할 수 있습니다. 🎜🎜6. 혼합 모드🎜🎜혼합 모드는 프로토타입 모드 + 생성자로 이해될 수 있습니다. 예: 🎜rrreee🎜 혼합 모드와 프로토타입 모드를 비교하면 혼합 모드 함수 본문이 비어 있지 않으며, 함수 몸체는 Construction 메소드 이전에 언급한 것입니다. 🎜🎜이 방법은 실제 개발에서 더 일반적으로 사용됩니다. 🎜🎜관련 권장 사항: 🎜🎜🎜JavaScript_javascript 기술을 사용하여 개체를 선언하는 여러 방법 요약🎜🎜🎜🎜🎜JavaScript_기본 지식을 기반으로 전역 변수를 선언하는 세 가지 방법에 대한 자세한 설명🎜🎜🎜🎜

위 내용은 자바스크립트 객체를 선언하는 방법에는 몇 가지가 있나요? 자바스크립트 객체를 선언하는 6가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!