Perjalanan untuk mempelajari penutupan, prototaip dan fungsi tanpa nama JavaScript

Artikel ini memperkenalkan penutupan JavaScript, prototaip dan fungsi tanpa nama melalui contoh Sila lihat di bawah untuk mendapatkan butiran.

1. Mengenai penutupan

Pengetahuan yang diperlukan untuk memahami penutupan

1 Contoh 1:

var n =99; //建立函数外的全局变量
function readA(){
  alert(n); //读取全局变量
}

readA(); //Laksanakan fungsi ini

Contoh 2 :

function readB(){
  var c = 9;
  function readC(){
    console.log(c); //ok c可见
  }
  return readC;
}
alert(c); //error c is not defined.

nota: Apabila mengisytiharkan pembolehubah c di dalam fungsi, pastikan anda menambah var, jika tidak c akan menjadi pembolehubah global

Jadi pembolehubah global boleh dilihat dalam fungsi , pembolehubah tempatan dalam fungsi tidak kelihatan kepada dunia luar

Skop js dirantai Pembolehubah dalam objek induk sentiasa kelihatan kepada objek kanak-kanak, tetapi objek objek kanak-kanak tidak kelihatan kepada induk. objek

Apabila kita ingin mendapatkan pembolehubah Dalaman dalam fungsi

Jadi terdapat Contoh 3:

function readB(){
  var c = 9;
  function readC(){
    console.log(c);
  }
  return readC();
}
readB();

Penutupannya sangat serupa dan variasi adalah dibuat berdasarkan ini

function readB(){
  var c = 9;
  function readC(){
    console.log(c);
  }
  return readC;
}
var res = readB();
res();

nota:

1. Gunakan penutupan dengan berhati-hati dan perhatikan penggunaan memori, kerana ia akan menyimpan keadaan fungsi induk

2 Jangan ragu untuk menukar nilai pembolehubah dalaman fungsi induk

Memahami penutupan

nota: ini merujuk kepada objek yang mempunyai fungsi yang mengandunginya apabila ia dilaksanakan

Contoh 1:

var name = "The Window";

var object = {
  name : "My Object",

　　getNameFunc : function(){  //此时this (这个执行函数)是属于object对象的,是object对象下的一个属性的值
　　  return function(){   //此时this (这个执行函数)是一个匿名函数,从根对象window生成,是属于window
　　　　  return this.name;
　　　　};
　　}
};
console.log(object.getNameFunc()()); //the window

Contoh 2:

var name = "The Window";

var object = {
  name : "My Object",

  getNameFunc : function(){
    var that = this;
  　　return function(){
  　　  return that.name;
  　　};

  }
};
console.log(object.getNameFunc()());  //My Object

2. Fungsi tanpa nama Tentukan secara langsung fungsi tanpa nama dan kemudian panggil fungsi tanpa nama. Borang ini sangat biasa dalam definisi pemalam jquery

1. Kaedah abjad Fungsi Lulus mula-mula mengisytiharkan fungsi tanpa nama, dan kemudian melaksanakannya

( function(){
  console.log('excute self');
}) ();

2. Dengan mengutamakan ungkapan, memandangkan Javascript melaksanakan ungkapan Ia pergi dari dalam ke luar kurungan, jadi anda boleh menggunakan kurungan untuk memaksa pelaksanaan fungsi yang diisytiharkan

(
  function () {
    alert(2);
  }
  ()
);

3. operator void Gunakan operator void untuk melaksanakan Operan tunggal yang tidak dikelilingi oleh kurungan

void function(){ console.log('void') } ();

3. Mengenai prototaip

Prototaip prototaip

Untuk memahami prototaip dalam js, anda terlebih dahulu perlu memahami reka bentuk berorientasikan objek js

function People(name){
  this.name = name;

  console.log(this); //Window 或者 object { name: 'xxx' }
  this.introduce = function(){  //实例对象方法
    console.log(this.name);
  }
}
new People('leon').introduce();
//这里有一个非常有趣的现象,结合前面的来看的话,
//首先function people里的this指向的默认是Window对象
//当 调用 People();时 this 输出为 Window对象
//但一旦调用new People('xx')时, this 输出为 {name:'xx'}
//其实也很好理解,一旦new ,便新建了一个对象

Kaedah objek instance hanya boleh seperti People('leon') baharu ini.memanggil kaedah statik

kaedah prototaip objek kelas

var People = {}; //等于一个对象 {} 或者 function 数组都可以 此时People需要是引用类型
People.sayhi = function(to_who){
  console.log('hi '+ to_who);
}
People.sayhi('lee'); //调用时这样调用

kerana ia mesti dimulakan sebelum digunakan

var People = function(){};       // People 必须为一个 function(){} 即为一个类,不能是对象或值类型或其他引用类型
People.prototype.meet = function(meet_who) {
  console.log('I am '+this.name + ',going to meet ' + meet_who);
};
new People('lee').meet('xx');

Kaedah prototaip hanya boleh dipanggil oleh objek kelas ini

A.prototaip = new B();

Prototaip Ia kelihatan seperti warisan, tetapi tidak. Ia lebih seperti klon dan lebih tepat

Jika terdapat atribut dengan nama yang sama dalam kelas induk dan subkelas, pakai prinsip kedekatan Jika anda tidak menemuinya, naik satu peringkat pada satu masa . Cari, jika anda ingin menentukan atribut untuk memanggil atasan, gunakan kaedah panggilan

extendClass.prototype = new baseClass();
var instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);
obj1.func.call(obj);

Kandungan di atas ialah perjalanan mempelajari penutupan JavaScript, prototaip dan fungsi tanpa nama dikongsi oleh editor, saya harap ia berguna kepada semua orang Untuk lebih banyak tutorial berkaitan, sila layari

Tutorial Video JavaScript

!