Perbandingan fungsi biasa dan pembina dalam kemahiran JavaScript_javascript

Soalan

Apakah itu pembina?
Apakah perbezaan antara pembina dan fungsi normal?
Apakah sebenarnya yang anda lakukan apabila anda menggunakan kata kunci baharu?
Apakah yang perlu saya lakukan jika pembina mempunyai nilai pulangan?
Bolehkah pembina dipanggil sebagai fungsi biasa?

Berikut adalah beberapa pemahaman saya. Sila betulkan saya jika saya mempunyai salah faham.

ini
ini sentiasa menunjuk kepada pemilik fungsi atau kaedah yang sedang dilaksanakan. Contohnya:

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

Dalam kod di atas, kami mentakrifkan fungsi test() dalam halaman dan kemudian memanggilnya dalam halaman. Apabila fungsi ditakrifkan secara global, pemiliknya ialah halaman semasa, iaitu objek tetingkap.

Beberapa situasi ini menunjukkan kepada

1. Panggil ke seluruh dunia

this.name //this menunjuk ke objek tetingkap
 
2. Panggilan fungsi

test();//ini dalam fungsi test() juga menunjuk ke objek tetingkap
 
3. Panggilan kaedah objek

obj1.fn();//ini dalam kaedah fn() objek obj1 menghala ke obj1
 
4. Panggil pembina
var dog=new Dog();//ini dalam pembina menunjuk ke objek contoh yang baru dibuat, iaitu dogcall dan gunakan

di sini

Fungsi panggilan dan guna adalah sama, tetapi cara menerima parameter adalah berbeza. Panggilan menerima berbilang parameter tunggal, manakala aplikasi menerima tatasusunan parameter.
Peranan panggilan dan aplikasi boleh dikatakan bahawa apabila contoh objek tidak mempunyai fungsi/kaedah, ia boleh memanggil fungsi/kaedah siap sedia untuk objek lain dengan menggantikannya dengan contoh objek ini dan menukar konteks fungsi.
Contohnya:

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

Kini saya mempunyai objek kucing lain:

var cat={bunyi:'meow meow'}

Saya juga mahu objek kucing ini boleh memanggil kaedah kulit kayu Pada masa ini, tidak perlu mentakrifkan semula kaedah kulit untuknya Anda boleh menggunakan panggilan/mohon untuk memanggil kaedah kulit anjing.

Dog.prototype.bark.call(cat);

atau:

dog.bark.call(kucing);

Tambahkan sesuatu untuk mengubahnya menjadi buah berangan dengan parameter:

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：喵喵喵  饿了

Fungsi biasa
Ini adalah fungsi biasa yang mudah:

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

Fungsi biasa mempunyai empat ciri yang jelas berbanding dengan pembina:

1. Tidak perlu menggunakan kata kunci baharu untuk memanggil

fn();2. Anda boleh menggunakan pernyataan pulangan untuk mengembalikan nilai

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

3. Tidak disyorkan untuk menggunakan kata kunci ini di dalam fungsi
Kami mengatakan bahawa ia tidak disyorkan untuk menggunakannya, tetapi sudah tentu ia adalah mungkin untuk menggunakannya jika anda mendesaknya. Anda hanya perlu memberi perhatian kepada apa yang berlaku pada masa ini. Jika anda menggunakan kata kunci ini untuk mentakrifkan pembolehubah atau fungsi di dalam fungsi biasa, kerana ini menunjukkan kepada objek global tetingkap pada masa ini, beberapa pembolehubah atau fungsi global akan ditambahkan pada tetingkap secara tidak sengaja.

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

4. Nama fungsi adalah dalam huruf besar unta, dengan huruf pertama dalam huruf kecil

Pembina
Dalam JavaScript, gunakan kata kunci baharu untuk memanggil pembina yang ditentukan. Apa yang dikembalikan secara lalai ialah objek baharu dengan pembolehubah dan fungsi/kaedah yang ditakrifkan oleh pembina.

Beri saya contoh:

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"}