JavaScript 생성자에 대한 자세한 설명

생성자를 잘 이해하는 것이 JavaScript 언어를 마스터하는 열쇠입니다. 우리 모두는 JavaScript가 다른 언어와 다르다는 것을 알고 있습니다. class 키워드는 없지만 function과 매우 유사한 생성자가 있습니다. 이번 글에서는 JavaScript 생성자가 객체를 생성하는 방법을 자세히 알아보겠습니다. class关键字，但是它有跟function非常相似的构造函数。这篇文章我们一起来详细地了解JavaScript构造函数如何构造对象。

构造函数跟普通函数非常相似，但是我们通过new关键字来使用它们。主要有两种类型的构造函数，native构造函数（Array,Object）它们可以在执行环境中自动生成，还有自定义的构造函数，你可以定义自己的方法和属性。

当你想要创建很多相似的对象（拥有相同的属性和方法）的时候，使用构造函数是非常有效的。大部分程序员都遵循公约，使用大写字母开头来将构造函数和普通函数区分开。看看下面的代码。

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

最后一行代码创建了一个Book对象，并把它赋值给变量；这样完成之后，即使Book构造器没有做任何操作，myBook也是Book实例。正如你看到的，除了首字母大写和使用new关键字之外，构造函数和普通函数并没有什么区别。

判断实例的类型

判断某个对象是否为某种实例，我们可以使用instanceof操作符：

myBook instanceof Book    // => truemyBook 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; // => truevar o = new Object();
o.constructor === Object;      // => truevar o = {};
o.constructor === Object;      // => truevar 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 falsedelete myBook.name;    
console.log(myBook.name);    // => Book: Single Page Web Applications// but we can change the value of the name propertymyBook.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() methodvar obj = new Object(5);
obj.toFixed(2);     // => 5.00// we can achieve the same result using literalsvar 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 abovevar 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

생성자는 일반 함수와 매우 유사하지만 new 키워드를 통해 사용합니다. 생성자에는 두 가지 주요 유형이 있는데, 실행 환경에서 자동으로 생성될 수 있는 네이티브 생성자(Array, Object)와 self-With 정의된 생성자를 사용하여 자신만의 메서드와 속성을 정의할 수 있습니다.

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

function Book(name) { 
    if (!(this instanceof Book)) { 

        // the constructor was called without "new".        return new Book(name);
    } 
}

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

인스턴스 유형 결정

🎜객체가 특정 유형의 인스턴스인지 확인하려면 instanceof 연산자를 사용할 수 있습니다: 🎜

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);    // => trueconsole.log(person2 instanceof Book);    // => true

🎜참고: 오른쪽이 함수의 인스턴스가 아닌 경우 오류가 보고됩니다. 🎜rrreee🎜또 다른 방법은 constructor 속성을 ​​사용하는 것입니다. 모든 객체 인스턴스에는 생성자가 있습니다. 속성은 생성자 생성을 가리킵니다. 🎜rrreee🎜 myBook의 생성자가 Book을 가리키는 것과 같습니다. 모든 객체는 프로토타입에서 constructor 속성을 ​​상속합니다. 🎜rrreee🎜constructor를 사용하면 인스턴스 유형을 감지할 수 있지만 instanceof를 사용하는 것이 좋습니다. >방법. constructor 속성은 재정의될 수 있기 때문에... 사용하기에 그다지 안정적이지 않습니다. 🎜

맞춤 생성자

🎜생성자는 쿠키 스탬퍼와 같습니다. 같은 인상으로 제작된, 모두 같은 모델입니다(좋은 점이 없는 남자도 마찬가지입니다). 🎜rrreee🎜 Book 생성자에는 두 개의 매개변수가 필요합니다. new 키워드를 사용하여 객체를 생성하면 두 개의 형식 매개변수가 Book에 전달됩니다. 개체의 이름 및 연도입니다. 🎜rrreee🎜🎜🎜보시다시피, 다른 매개변수를 전달하여 빠르게 다른 것을 생성할 수 있습니다. 책. JavaScript의 Array() 및 Date()도 마찬가지입니다. 🎜

Object.defineProperty 메소드

🎜Object.defineProperty 메소드는 생성자에서 속성을 구성하는 데 사용할 수 있습니다. 🎜rrreee🎜위 코드는 조상 메소드를 호출합니다. getter 및 setter 인터페이스를 제공합니다. getter 메소드는 캡슐화된 값을 반환하는 역할을 하며, setter 메소드는 매개변수를 받아들이고 값을 속성에 할당합니다. 특정 속성에 대한 액세스를 수행할 때 이 두 가지 메서드가 호출됩니다. configurable을 구성하여 해당 값을 삭제할 수 있는지 여부를 설정할 수 있습니다. 🎜

객체 리터럴 표현이 선호되는 생성자입니다

🎜JavaScript 언어에는 9개의 내장 생성자가 있습니다: Object(), Array() , String(), Number(), Boolean(), Date(), Function( ) code>, <code>Error() 및 RegExp(). 이러한 값을 생성해야 할 때 리터럴이나 생성자를 자유롭게 사용할 수 있습니다. 그러나 동일한 상황에서 리터럴 객체는 읽기 쉬울 뿐만 아니라 구문 분석 중에 최적화될 수 있기 때문에 더 빠릅니다. 따라서 간단한 객체를 사용해야 할 때는 리터럴을 사용하세요. 🎜rrreee

new 키워드 사용은 필수

🎜 생성자를 사용할 때 new 키워드를 사용해야 한다는 점을 기억하세요. 실수로 잊어버린 경우 this가 가리킵니다. 전역 개체에 추가합니다(기본값은 브라우저의 window입니다). 🎜rrreee🎜위 코드를 실행한 결과는 다음과 같습니다. 🎜🎜🎜🎜 엄격 모드인 경우 엄격 모드에서는 new 키워드를 사용하지 않고 생성자를 호출할 수 없기 때문에 위 코드에서 오류가 발생합니다. 🎜

적용 범위가 더 높은 생성자

🎜 new 키워드 사용을 잊어버릴 위험을 해결하기 위해 this 더 높은 범위의 생성자입니다. 🎜rrreee🎜이 코드를 추가하면 생성자를 제약 없이 사용할 수 있습니다. 🎜<pre class="javascript">function Book(name, year) { if (!(this instanceof Book)) { return new Book(name, year); } this.name = name; this.year = year; }var person1 = new Book(&quot;js book&quot;, 2014);var person2 = Book(&quot;js book&quot;, 2014); console.log(person1 instanceof Book); // =&gt; trueconsole.log(person2 instanceof Book); // =&gt; true</pre><p>很多内建的构造器都是这么做的。通过判断<code>this是否为当前类型。如果程序员忘记加new关键字，那么我们就返回一个通过new出来的对象。

结论

JavaScript没有类这种说法（但是它可以使面向对象的），所以对于习惯了使用类的程序员来说是种困惑。当然JavaScript的构造函数跟普通函数没什么区别，只是通过new关键字生成出来而已。如果我们需要”印饼干”的话，它就非常有用了。

相关推荐：

JavaScript构造器模式实例分析

什么是构造器？引用类型是什么？

有关查询构造器的文章推荐7篇

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