JavaScriptにおける通常の関数とコンストラクタの比較_javascriptスキル

質問

コンストラクターとは何ですか?
コンストラクターと通常の関数の違いは何ですか?
新しいキーワードを使用したとき、具体的には何をしましたか?
コンストラクターに戻り値がある場合はどうすればよいですか?
コンストラクターは通常の関数として呼び出すことができますか?

以下は私の理解の一部です。誤解がある場合は修正してください。ありがとうございます。

これ
これは常に、現在実行されている関数またはメソッドの所有者を指します。例:

function test(){
  console.log(this);
}
test();
//Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

上記のコードでは、ページ内で test() 関数を定義し、ページ内でそれを呼び出します。関数がグローバルに定義されている場合、その所有者は現在のページ (ウィンドウ オブジェクト) になります。

これが示すいくつかの状況

1. グローバルに電話をかける

this.name //this はウィンドウ オブジェクトを指します

2. 関数呼び出し

test();//test() 関数内のこれもウィンドウ オブジェクトを指します

3. オブジェクトメソッド呼び出し

obj1.fn();//obj1 オブジェクトの fn() メソッド内のこれは obj1
を指します
4. コンストラクター
を呼び出します var Dog=new Dog();//コンストラクター内の this は、新しく作成されたインスタンス オブジェクトを指します。これは、dogcall であり、ここでは apply

です

call と apply の機能は同じですが、call は複数の単一パラメータを受け入れますが、apply はパラメータの配列を受け入れます。
call と apply の役割は、簡単に言うと、オブジェクト インスタンスに関数/メソッドがない場合、これをこのオブジェクト インスタンスに置き換えて関数の実行時コンテキストを変更することで、他のオブジェクトの既製の関数/メソッドを呼び出すことができます。
例:

function Dog(){
  this.sound="汪汪汪";
}
Dog.prototype.bark=function(){
  alert(this.sound);
}

これで、別の猫オブジェクトができました:

var cat={sound:'ニャーニャー'}

この cat オブジェクトが bark メソッドを呼び出せるようにしたいのですが、現時点では、call/apply を使用して Dog クラスの bark メソッドを呼び出すことができます。

Dog.prototype.bark.call(cat);

または:

dog.bark.call(cat);

パラメーターを使用して栗に変える何かを追加します:

function Dog(){
  this.sound="汪汪汪";
}
Dog.prototype.bark=function(words){
  alert(this.sound+" "+words);
}
var dog=new Dog();
dog.bark("有小偷");//alert:汪汪汪  有小偷
Dog.prototype.bark.call(cat,"饿了");//alert：喵喵喵  饿了

共通機能
これは単純な通常の関数です:

function fn(){
  alert("hello sheila");
}
fn();//alert:hello sheila

通常の関数には、コンストラクターと比較して 4 つの明らかな特徴があります。

1.

を呼び出すために新しいキーワードを使用する必要はありません。

fn();2. return ステートメントを使用して値

を返すことができます。

 function fn(a,b){
    return a+b;
  }
  alert(fn(2,3));//alert:5

3. 関数内で this キーワードを使用することはお勧めしません
使用は推奨されていませんが、必要に応じて使用することももちろん可能です。現時点で何が起こるかに注意してください。通常の関数内で this キーワードを使用して変数または関数を定義すると、この時点ではウィンドウ グローバル オブジェクトを指しているため、一部のグローバル変数または関数が意図せずウィンドウに追加されます。

function greeting(){
    this.name="sheila";
    alert("hello "+this.name);
  }
  greeting();//alert:hello sheila
  alert(window.name);//alert:sheila

4. 関数名はキャメルケースで、最初の文字は小文字です

コンストラクター
JavaScript では、 new キーワードを使用して、定義されたコンストラクターを呼び出します。デフォルトで返されるのは、コンストラクターによって定義された変数と関数/メソッドを含む新しいオブジェクトです。

例を挙げてください:

function Prince(name,age){
  this.gender="male";
  this.kind=true;
  this.rich=true;
  this.name=name;
  this.age=age;
}
Prince.prototype.toFrog=function(){
  console.log("Prince "+this.name+" turned into a frog.");
}
var prince=new Prince("charming",25);
prince.toFrog();//Prince charming turned into a frog.
prince.kind;//true

与普通函数相比，构造函数有以下明显特点：

1.用new关键字调用

var prince=new Prince("charming",25);

2.函数内部可以使用this关键字
在构造函数内部，this指向的是构造出的新对象。用this定义的变量或函数/方法，就是实例变量或实例函数/方法。需要用实例才能访问到，不能用类型名访问。

prince.age;//25
Prince.age;//undefined

3.默认不用return返回值
构造函数是不需要用return显式返回值的，默认会返回this，也就是新的实例对象。当然，也可以用return语句，返回值会根据return值的类型而有所不同，细节将在下文介绍。

4.函数命名建议首字母大写，与普通函数区分开。
不是命名规范中的，但是建议这么写。

使用new关键字实例化的时候发生了什么？
以上文中的Prince()函数举个栗子：

1.第一步，创建一个空对象。

var prince={}

2.第二步，将构造函数Prince()中的this指向新创建的对象prince。
3.第三步，将prince的_proto_属性指向Prince函数的prototype，创建对象和原型间关系
4.第四步，执行构造函数Prince()内的代码。

构造函数有return值怎么办？
构造函数里没有显式调用return时，默认是返回this对象，也就是新创建的实例对象。
当构造函数里调用return时，分两种情况：

1.return的是五种简单数据类型：String，Number，Boolean，Null，Undefined。
这种情况下，忽视return值，依然返回this对象。

2.return的是Object
这种情况下，不再返回this对象，而是返回return语句的返回值。

function Person(name){
    this.name=name;
    return {name:"cherry"}
  }
  var person=new Person("sheila");
  person.name;//cherry
  p;//Object {name: "cherry"}