JavaScript コンストラクターの簡単な説明

「構築関数」というと、ほとんどの人はJavaクラスの概念を思い浮かべるでしょう。JavaScriptにもコンストラクターがあり、その使用構文はJavaなどのオブジェクト作成の構文に似ています。クラスベースの言語。

JavaScript コンストラクターは、次の特徴を持つ特別なタイプの関数です:

• Use <a href="http://www.php.cn/wiki/165.html" target="_blank">new <code><a href="http://www.php.cn/wiki/165.html" target="_blank">new</a>关键字调用函数

• 函数首字母大写

面试中，我经常针对构造函数问两个问题：

1. 构造函数首字母必须大写吗？

2. 不用new关键字，直接运行构造函数，是否会出错？如果不会出错，那么，用new和不用new调用构造函数，有什么区别？

问题1基本100%都能答对（大小写都可以），问题2有20%同学会答错，尤其是第二问。

那么，让我们看看new操作符到底起到什么作用？

1. 使用new操作符调用函数

例子：

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = new Person('nicole');
person1.say(); // "I am nicole"

用new调用构造函数，函数内部会发生如下变化：

• 创建一个this变量，该变量指向一个空对象。并且该对象继承函数的原型；

• 属性和方法被加入到this引用的对象中；

• 隐式返回this对象（如果没有显性返回其他对象）

用伪程序来展示上述变化：

function Person(name){
  // 创建this变量，指向空对象
  var this = {}; 
  // 属性和方法被加入到this引用的对象中
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  // 返回this对象
  return this;
}

可以看出，用new调用构造函数，最大特点为，this对象指向构造函数生成的对象，所以，person1.say()会返回字符串： "I am nicole"。

小贴士

如果指定了返回对象，那么，"this"对象可能被丢失。

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  var that = {};
  that.name = "It is that!";
  return that;
}

var person1 = new Person('nicole');
person1.name; // "It is that!"

2. 直接调用函数

如果直接调用函数，那么，this对象指向window，并且，不会默认返回任何对象（除非显性声明返回值）。

还是拿Person函数为例，直接调用Person函数：

var person1 = Person('nicole');
person1; // undefined
window.name; // nicole

可见，直接调用构造函数的结果，并不是我们想要的。

3.小结

为了防止因为忘记使用new关键字而调用构造函数，可以加一些判断条件强行调用newキーワードは関数を呼び出します

関数の最初の文字は大文字です🎜🎜インタビュー中、私はコンストラクターについてよく 2 つの質問をします:🎜🎜🎜コンストラクターの最初の文字は大文字にする必要がありますか? 🎜🎜🎜 new キーワードを使用せずにコンストラクターを直接実行すると、エラーが発生しますか?エラーが発生しない場合、new を使用してコンストラクターを呼び出す場合と new を使用しない場合の違いは何ですか? 🎜🎜 基本的に、100% の生徒が質問 1 (大文字と小文字の両方) に正しく答えることができ、20% の生徒が質問 2、特に 2 番目の質問に誤答します。 🎜🎜それでは、new演算子🎜 が実際にどのような効果をもたらすかを見てみましょう。 🎜

1. new 演算子を使用して関数を呼び出します

🎜例: 🎜

function Person(name){
  if (!(this instanceof Person)) {
    return new Person(name);
  }
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = Person('nicole');
console.log(person1.say()); // I am nicole
var person2 = new Person('lisa');
console.log(person2.say()); // I am lisa

🎜new を使用してコンストラクターを呼び出すと、関数内で次の変更が行われます: 🎜🎜🎜 🎜空のオブジェクトを指す this変数 🎜 を作成します。 オブジェクトは 🎜 関数のプロトタイプを継承します🎜🎜属性とメソッド 🎜 がこれに追加されますオブジェクト参照内で 🎜;🎜🎜🎜このオブジェクトを暗黙的に返します (他のオブジェクトが明示的に返されない場合)🎜🎜疑似プログラムを使用して、上記の変更点: 🎜rrreee🎜 new を使用してコンストラクターを呼び出す最大の特徴は、this オブジェクトが、コンストラクターなので、person1.say() は 文字列を返します。 🎜:「私はニコールです」。 🎜rrreee

2. 関数を直接呼び出す

🎜 関数を直接呼び出す場合、this オブジェクトは window を指し、オブジェクトは存在しません。デフォルトで返されます (戻り値が明示的に宣言されていない限り)。 🎜🎜person 関数を例として、person 関数を直接呼び出してみましょう: 🎜rrreee🎜 コンストラクターを直接呼び出した結果は、私たちが行ったものではないことがわかります。欲しい。 🎜

3. 概要

🎜 new キーワードの使用を忘れてコンストラクターが呼び出されるのを防ぐために、 への呼び出しを強制するためのいくつかの判定条件を追加できます。 new キーワード コードは次のとおりです: 🎜rrreee🎜 🎜

以上がJavaScript コンストラクターの簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。