Rumah > hujung hadapan web > tutorial js > Perjalanan untuk mempelajari penutupan, prototaip dan fungsi tanpa nama JavaScript

Perjalanan untuk mempelajari penutupan, prototaip dan fungsi tanpa nama JavaScript

PHPz
Lepaskan: 2018-09-28 16:54:23
asal
1072 orang telah melayarinya

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); //读取全局变量
}
Salin selepas log masuk
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.
Salin selepas log masuk
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();
Salin selepas log masuk
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();
Salin selepas log masuk
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
Salin selepas log masuk
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
Salin selepas log masuk

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');
}) ();
Salin selepas log masuk
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);
  }
  ()
);
Salin selepas log masuk
3. operator void Gunakan operator void untuk melaksanakan Operan tunggal yang tidak dikelilingi oleh kurungan

void function(){ console.log('void') } ();
Salin selepas log masuk

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 ,便新建了一个对象
Salin selepas log masuk
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'); //调用时这样调用
Salin selepas log masuk
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');
Salin selepas log masuk
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);
Salin selepas log masuk
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

!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan