Rumah >hujung hadapan web >tutorial js >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); //读取全局变量 }
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. objekApabila 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();
1. Gunakan penutupan dengan berhati-hati dan perhatikan penggunaan memori, kerana ia akan menyimpan keadaan fungsi induk
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 windowContoh 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'); }) ();
( function () { alert(2); } () );
void function(){ console.log('void') } ();
3. Mengenai prototaip
Prototaip prototaipUntuk 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
var People = {}; //等于一个对象 {} 或者 function 数组都可以 此时People需要是引用类型 People.sayhi = function(to_who){ console.log('hi '+ to_who); } People.sayhi('lee'); //调用时这样调用
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