JavaScript의 생성자에 대해 자세히 알아보기

생성자를 잘 이해하는 것이 JavaScript 언어를 마스터하는 열쇠입니다. 우리 모두는 JavaScript가 다른 언어와 다르다는 것을 알고 있습니다. class 키워드는 없지만 함수와 매우 유사한 생성자를 가지고 있습니다. 이번 글에서는 자바스크립트 생성자가 객체를 생성하는 방법을 자세히 알아보겠습니다.

생성자는 일반 함수와 매우 유사하지만 new 키워드를 통해 사용합니다. 생성자에는 실행 환경에서 자동으로 생성될 수 있는 기본 생성자(배열, 개체)와 고유한 메서드 및 속성을 정의할 수 있는 사용자 지정 생성자의 두 가지 주요 유형이 있습니다.

생성자를 사용하는 것은 (동일한 속성과 메서드를 사용하여) 유사한 객체를 많이 생성하려는 경우 매우 효과적입니다. 대부분의 프로그래머는 생성자를 일반 함수와 구별하기 위해 대문자를 사용하는 규칙을 따릅니다. 아래 코드를 살펴보세요.

function Book() { 
    // unfinished code
} 
var myBook = new Book();

코드의 마지막 줄은 Book 객체를 생성하고 이를 변수에 할당합니다. 이 작업이 완료된 후 myBook은 Book 생성자가 아무 작업도 수행하지 않더라도 Book 인스턴스이기도 합니다. 보시다시피 첫 글자를 대문자로 표기하고 new 키워드를 사용하는 것 외에는 생성자와 일반 함수 사이에 차이가 없습니다.

인스턴스 유형을 확인하려면

객체가 어떤 종류의 인스턴스인지 확인하려면 instanceof 연산자를 사용할 수 있습니다. instanceof操作符：

myBook instanceof Book    // => true
myBook instanceof String  // => false

注意：如果右边不是一个函数的实例，那么将会报错：

myBook instanceof {}; // => TypeError: invalid 'instanceof' operand ({})

另一种方法是使用constructor属性，所有对象实例都有一个constructor属性，这个属性指向创建它的构造函数。

myBook.constructor == Book;   // => true

就像myBook的constructor指向Book一样。 所有对象都从它们的原型上继承了constructor这个属性：

var s = new String("text");
s.constructor === String;      // => true
"text".constructor === String; // => true
var o = new Object();
o.constructor === Object;      // => true
var o = {};
o.constructor === Object;      // => true
var a = new Array();
a.constructor === Array;       // => true
[].constructor === Array;      // => true

尽管使用constructor可以用来检测实例类型，但是建议还是使用instanceof方法。因为constructor属性是可以被重写的..用起来不太靠谱。

自定义构造函数

构造函数就像饼干印模。同一印模制作出来的，都是同一个diao样(男人没一个好东西也是这个道理)。

function Book(name, year) {
    this.name = name;
    this.year = '(' + year + ')';
}

Book构造器需要两个参数，当使用new关键字构造对象时，会把两个形参传给Book对象的name 和 year。

var firstBook = new Book("Pro AngularJS", 2014);
var secondBook = new Book("Secrets Of The JavaScript Ninja", 2013); 
var thirdBook = new Book("JavaScript Patterns", 2010);

console.log(firstBook.name, firstBook.year);           
console.log(secondBook.name, secondBook.year);           
console.log(thirdBook.name, thirdBook.year);

如你所见，我们可以通过传不同参数，快速创建另一本书。JavaScript的Array(),Date()也是这个道理。

Object.defineProperty 方法

Object.defineProperty 方法可以在构造器中被使用来配置属性。

function Book(name) { 
    Object.defineProperty(this, "name", { 
        get: function() { 
            return "Book: " + name;       
        },        
        set: function(newName) {            
            name = newName;        
        },               
        configurable: false     
    }); 
}
var myBook = new Book("Single Page Web Applications");
console.log(myBook.name);    // => Book: Single Page Web Applications
// we cannot delete the name property because "configurable" is set to false
delete myBook.name;    
console.log(myBook.name);    // => Book: Single Page Web Applications
// but we can change the value of the name property
myBook.name = "Testable JavaScript";
console.log(myBook.name);    // => Book: Testable JavaScript

上面的代码中是调用了祖先的方法。它提供了getter和setter接口。getter方法负责返回封装的值，setter方法接受参数，并把值赋给属性。当我们在某个属性上操作存取时，调用的就是这两个方法。通过配置configurable，我们可以设置该值能否被删除。

对象字面量表示法是首选的构造函数

JavaScript语言九种内建的构造器：Object(), Array(), String(), Number(), Boolean(), Date(), Function(), Error() 以及 RegExp()。当我们需要创建这些值的时候，我们可以自由选择使用字面量或者构造器。但是相同情况下，字面量对象不仅易读，而且运行速度更快，因为他们可以在解析的时候被优化。所以当你需要使用简单对象的时候就使用字面量吧。

// a number object
// numbers have a toFixed() method
var obj = new Object(5);
obj.toFixed(2);     // => 5.00
// we can achieve the same result using literals
var num = 5;
num.toFixed(2);     // => 5.00
// a string object
// strings have a slice() method 
var obj = new String("text");
obj.slice(0,2);     // => "te"
// same as above
var string = "text";
string.slice(0,2);  // => "te"

使用new关键字是必不可少的

记得使用构造器的时候要用new关键字，如果你不小心忘记了，那么构造器中的this指向的是global对象(浏览器中默认为window)。

function Book(name, year) {
    console.log(this);
    this.name = name;
    this.year = year;
}
var myBook = Book("js book", 2014);  
console.log(myBook instanceof Book);  
console.log(window.name, window.year);
var myBook = new Book("js book", 2014);  
console.log(myBook instanceof Book);  
console.log(myBook.name, myBook.year);

上面的代码运行结果如下所示：

如果是在严格模式下，上面的代码将会抛出错误，因为严格模式不允许我们不使用new关键字调用构造器。

适用范围更高的构造器

为了解决可能会忘记使用new关键字的风险，我们可以通过判断this的值创建适用范围更高的构造器。

function Book(name) { 
    if (!(this instanceof Book)) { 
        // the constructor was called without "new".
        return new Book(name);
    } 
}

加上这段代码之后，我们就可以‘肆无忌惮’地使用构造器了。

function Book(name, year) { 
    if (!(this instanceof Book)) { 
        return new Book(name, year);
    }
    this.name = name;
    this.year = year;
}
var person1 = new Book("js book", 2014);
var person2 = Book("js book", 2014);
console.log(person1 instanceof Book);    // => true
console.log(person2 instanceof Book);    // => true

很多内建的构造器都是这么做的。通过判断this是否为当前类型。如果程序员忘记加new关键字，那么我们就返回一个通过newrrreee

참고: 오른쪽이 인스턴스가 아닌 경우 함수의 인스턴스이면 오류가 보고됩니다. 🎜rrreee🎜또 다른 방법은 생성자 속성을 사용하는 것입니다. 모든 개체 인스턴스에는 생성자를 가리키는 생성자 속성이 있습니다. 🎜rrreee🎜 myBook의 생성자가 Book을 가리키는 것과 같습니다. 모든 객체는 프로토타입에서 생성자 속성을 상속합니다. 🎜rrreee🎜 생성자를 사용하면 인스턴스 유형을 감지할 수 있지만, instanceof 메서드를 사용하는 것이 좋습니다. 생성자 속성은 재정의될 수 있기 때문에... 사용하기에 그다지 안정적이지 않습니다. 🎜🎜🎜Custom Constructor🎜🎜🎜생성자는 쿠키 스탬퍼와 같습니다. 모두 같은 인상(남자들이 좋은 게 하나도 없는 이유와 같은 이유)에서 만들어진 것이다. 🎜rrreee🎜Book 생성자는 객체를 생성하기 위해 new 키워드를 사용할 때 두 개의 매개변수가 필요합니다. 두 개의 형식 매개변수는 Book 객체의 이름과 연도에 전달됩니다. 🎜rrreee

🎜🎜보시다시피, 다양한 매개변수를 전달하여 다른 책을 빠르게 만들 수 있습니다. JavaScript의 Array() 및 Date()도 마찬가지입니다.
🎜🎜🎜Object.defineProperty 메소드🎜🎜🎜Object.defineProperty 메소드를 생성자에서 사용하여 속성을 구성할 수 있습니다. 🎜rrreee🎜위 코드는 조상 메소드를 호출합니다. getter 및 setter 인터페이스를 제공합니다. getter 메소드는 캡슐화된 값을 반환하는 역할을 담당하고, setter 메소드는 매개변수를 받아들이고 값을 속성에 할당합니다. 속성에 대한 액세스를 수행할 때 이 두 가지 메서드가 호출됩니다. configurable을 구성하여 값을 삭제할 수 있는지 여부를 설정할 수 있습니다. 🎜🎜🎜객체 리터럴 표현이 선호되는 생성자입니다. 🎜🎜🎜JavaScript 언어에는 Object(), Array(), String(), Number(), Boolean(), Date(), Function() 등 9개의 내장 생성자가 있습니다. , 오류() 및 RegExp(). 이러한 값을 생성해야 할 때 리터럴이나 생성자를 자유롭게 사용할 수 있습니다. 그러나 동일한 상황에서 리터럴 객체는 읽기 쉬울 뿐만 아니라 구문 분석 중에 최적화될 수 있기 때문에 더 빠릅니다. 따라서 간단한 객체를 사용해야 할 때는 리터럴을 사용하세요. 🎜rrreee🎜🎜new 키워드를 사용하는 것은 필수입니다🎜🎜🎜생성자를 사용할 때 new 키워드를 사용해야 한다는 점을 기억하세요. 실수로 잊어버린 경우 생성자의 이 키워드는 전역 객체를 가리킵니다(브라우저에서는 기본값은 window입니다). 🎜rrreee🎜위 코드를 실행한 결과는 다음과 같습니다. 🎜

🎜🎜엄격 모드인 경우 위 코드는 오류를 발생시킵니다. 왜냐하면 엄격 모드에서는 new 키워드 생성자를 호출합니다. 🎜🎜🎜더 높은 적용 범위의 생성자🎜🎜🎜new 키워드 사용을 잊어버릴 위험을 해결하기 위해 이 값을 판단하여 더 높은 적용 범위의 생성자를 만들 수 있습니다. 🎜rrreee🎜이 코드를 추가하면 생성자를 '부주의하게' 사용할 수 있습니다. 🎜rrreee🎜많은 내장 생성자가 이 작업을 수행합니다. 이것이 현재 유형인지 판단합니다. 프로그래머가 new 키워드 추가를 잊어버린 경우 new를 통해 전달된 개체를 반환합니다. 🎜

결론

JavaScript에는 클래스가 없으므로(그러나 객체 지향적일 수 있음) 클래스를 사용하는 데 익숙한 프로그래머에게는 혼란스럽습니다. 물론 JavaScript 생성자는 일반 함수와 다르지 않으며 단지 new 키워드를 사용하여 생성됩니다. "쿠키를 인쇄"해야 하는 경우 매우 유용합니다.

추천 튜토리얼: "JavaScript 비디오 튜토리얼"

위 내용은 JavaScript의 생성자에 대해 자세히 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!