Rumah  >  Artikel  >  hujung hadapan web  >  Penyusunan kemahiran JavaScript point_javascript

Penyusunan kemahiran JavaScript point_javascript

WBOY
WBOYasal
2016-05-16 15:26:491055semak imbas

JavaScript ialah bahasa skrip literal Ia adalah bahasa berasaskan prototaip yang ditaip secara dinamik, ditaip lemah dengan sokongan terbina dalam untuk jenis. Jurubahasanya dipanggil enjin JavaScript, yang merupakan sebahagian daripada penyemak imbas dan digunakan secara meluas dalam bahasa penskripan sisi klien Ia pertama kali digunakan pada halaman web HTML (aplikasi di bawah Bahasa Penanda Universal Standard) untuk menambah fungsi dinamik pada halaman web HTML. .

Pertama sekali, mari gunakan penerangan teks yang lebih rasmi untuk menerangkan JavaScript:

JavaScript ialah bahasa skrip literal Ia adalah bahasa berasaskan prototaip yang ditaip secara dinamik, ditaip lemah dengan sokongan terbina dalam untuk jenis.
Penterjemahnya dipanggil enjin JavaScript, yang merupakan sebahagian daripada penyemak imbas dan digunakan secara meluas dalam bahasa skrip sebelah klien. Yang paling awal ialah
Digunakan pada halaman web HTML (aplikasi di bawah Standard Universal Markup Language) untuk menambah fungsi dinamik pada halaman web HTML.

JavaScript mempunyai ciri-ciri berikut:

· Bahasa skrip. JavaScript ialah bahasa skrip yang ditafsirkan Bahasa seperti C dan C disusun dahulu dan kemudian dilaksanakan, manakala JavaScript ditafsirkan baris demi baris semasa program dijalankan.
· Berasaskan objek. JavaScript ialah bahasa skrip berasaskan objek yang bukan sahaja boleh mencipta objek tetapi juga menggunakan objek sedia ada.
· Mudah. Bahasa JavaScript menggunakan jenis pembolehubah yang ditaip lemah dan tidak mengenakan keperluan ketat pada jenis data yang digunakan Ia adalah bahasa skrip berdasarkan pernyataan dan kawalan asas Java, dan reka bentuknya ringkas dan padat.
· Dinamik. JavaScript ialah bahasa skrip dipacu peristiwa yang boleh bertindak balas kepada input pengguna tanpa melalui pelayan Web. Apabila melawat halaman web, JavaScript boleh bertindak balas secara langsung kepada peristiwa ini apabila tetikus diklik, dialihkan ke atas atau ke bawah atau dialihkan dalam tetingkap.
· Merentas platform. Bahasa skrip JavaScript tidak bergantung pada sistem pengendalian dan hanya memerlukan sokongan penyemak imbas. Oleh itu, selepas menulis skrip JavaScript, ia boleh dibawa ke mana-mana mesin untuk digunakan, dengan syarat penyemak imbas pada mesin menyokong bahasa skrip JavaScript Pada masa ini, JavaScript disokong oleh kebanyakan penyemak imbas.

JavaScript terdiri daripada bahagian berikut:

·ECMAScript, menerangkan sintaks dan objek asas bahasa.
· Model Objek Dokumen (DOM), yang menerangkan kaedah dan antara muka untuk memproses kandungan web.
· Model Objek Pelayar (BOM), yang menerangkan kaedah dan antara muka untuk berinteraksi dengan penyemak imbas.

Apakah jenis data yang terdapat dalam JavaScript?

· objek objek termasuk Fungsi, Rentetan, Tatasusunan, Objek, Tarikh, dsb.
· rentetan
· nombor
· boolean
· batal
· tidak ditentukan

Bahagian kod berikut membuktikan perkara di atas:

String dan Nombor ialah objek, rentetan dan nombor ialah format data yang berbeza...

var str = "abc";
var Str = new String("abc");
var num = 100;
var Num = Nombor baharu(100);
console.log(typeof str, typeof Str, typeof num, typeof Num); // rentetan objek nombor objek

Apakah rantai prototaip objek?

Apabila kita menggunakan objek baharu (dicipta menggunakan pembina) atau mencipta objek menggunakan Object.create, maka objek tersebut akan mempunyai rantai prototaip dan prototaip.
Sebagai contoh: kami mencipta pembina _obj, dan kemudian menggunakan _obj untuk mencipta obj baharu Kemudian rantai prototaip pada masa ini ialah: obj → _obj → Object.prototype → null.

Mari kita menggambarkannya melalui kod:

 function _obj(){};
 _obj.prototype.name = "野兽"; //每个函数都包含一个prototype属性,这个属性指向一个对象的引用,这个对象就是“原型对象”。
 _obj.prototype.age = 21;
 _obj.prototype.sayHello = function(){
   console.log("Hello "+this.name);
 };
 var obj = new _obj();
 console.log(obj); //_obj{} 而其的__proto__里包含了_obj里的各个属性,包括name,age,sayHello 
 console.log(obj.__proto__ == _obj.prototype); //true
 obj.sayHello(); // Hello 野兽
 console.log(Object.prototype.__proto__); // null 当我们追究到Object(也就是object的源头时)其指向的是null 

Perlu diambil perhatian bahawa rantaian prototaip Object.create(null) adalah langsung batal, yang bermaksud bahawa rantai prototaip adalah sangat pendek...

Bagaimana untuk bermain dengan skop dalam JavaScript?

Apabila kami menggunakan var untuk mengisytiharkan pembolehubah dalam JavaScript, kami sebenarnya menambah atribut dan nilai atribut pada objek yang ditunjukkan oleh skop.
Tiada skop peringkat blok dalam JavaScript Pembolehubah yang diisytiharkan dalam skop semasa hanya tersedia dalam skop semasa dan fungsi dalam skop semasa, manakala pembolehubah yang diisytiharkan dalam fungsi hanya tersedia dalam fungsi (jika tiada operasi dilakukan ), memanggil pembolehubah ini di luar fungsi akan melaporkan ralat yang tidak ditentukan.

Mari jalankan kod untuk memahami skop:

 var firstNum = 1;
 ~function(){
   var secondNum = 2;
   console.log("在里面打印:"+firstNum ,secondNum); // 在里面打印:1 2
 }();
 console.log("在外面打印:"+firstNum ,secondNum); // Uncaught ReferenceError: secondNum is not defined(…) 

Skop juga mempunyai rantai skop:

 var firstNum = 1;
 console.log("在最外层打印:"+firstNum); // 在最外层打印:1
 ~function(){
   var secondNum = 2;
   console.log("在中间层打印:"+firstNum,secondNum); // 在中间层打印:1 2
   ~function(){
     var thirdNum = 3;
     console.log("在最里层打印:"+firstNum,secondNum,thirdNum); // 在最里层打印:1 2 3
   }();
   console.log("在中间层打印:"+firstNum,secondNum,thirdNum); // Uncaught ReferenceError: thirdNum is not defined(…)
 }();
 console,log("在最外层打印:"+firstNum,secondNum,thirdNum); // 由于上面已经报错,而浏览器执行JavaScript又是单线程的,所以压根没执行到这句... 

Dalam erti kata lain, pembolehubah yang diisytiharkan dalam skop semasa masih akan tersedia dalam sub-skopnya, yang hebat, haha...

Apakah itu penutupan? Bagaimana untuk bermain?

Pelaksanaan fungsi bergantung pada skop pembolehubah Skop ini ditentukan apabila fungsi ditakrifkan, bukan apabila fungsi dipanggil. Untuk mencapai skop leksikal jenis ini, keadaan dalaman objek fungsi JavaScript bukan sahaja mengandungi kod logik fungsi, tetapi juga mesti merujuk rantai skop semasa. Objek fungsi boleh dikaitkan antara satu sama lain melalui rantai skop, dan pembolehubah di dalam badan fungsi boleh disimpan dalam skop fungsi. Ciri ini sebenarnya adalah "penutupan".
Mari teruskan melihat kod:

function counter(){
  var num = 0;
  return {
   count : function(){ return num++; },
   reset : function(){ return num = 0; }
  }
 };
 var firstNum = counter();
 var secondNum = counter();
 console.log(firstNum.count()); // 0
 console.log(secondNum.count()); // 0
 firstNum.reset();
 console.log(firstNum.count()); // 0 num已被重置,所以返回的为0
 console.log(secondNum.count()); // 1 num未被重置,所以返回的是1
 console.log(firstNum,secondNum); // 都为 Object{ count:function(),reset:function(),__proto__} 并且并不能在其中找到counter里var的n,这也实现了函数里的私有变量,只将需要暴露的两个方法给暴露在外。 

闭包用的多的两个作用:读取函数内部的变量值;让这些变量值始终保存着(在内存中)。
同时需要注意的是:闭包慎用,不滥用,不乱用,由于函数内部的变量都被保存在内存中,会导致内存消耗大。

JavaScript中的this

在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是,指向该函数所属的对象。

全局的this → 指向的是Window
函数中的this → 指向的是函数所在的对象
对象中的this → 指向其本身

验证代码:

 console.log(this); // Window {external: Object, chrome: Object, document: document, global: Window, cr: Object…} 全局下执行console.log,所以此处指向的是Window
 ~function seeThis(){
  console.log(this); // Window {external: Object, chrome: Object, document: document, global: Window, cr: Object…} 由于我是在全局下写的这个函数,所以此处指向的还是Window
 }();
 var obj = {
  name:"野兽",
  showThis:function(){
   console.log(this); // Object {name: "野兽",showThis:function(),__proto__} 此处打印的是对象本身
  }
 };
 obj.showThis(); 

arguments

在Javascript函数体内,arguments像数组一样(并不是真的数组),有length属性,可以代表传给函数的参数的个数。

简单来说,arguments函数执行时所传的实际参数。
比如:arguments[0]表示传入第一个参数。

用代码验证

 function argumentsTest(){
  console.log(arguments[0]?arguments[0]:"Hello World",arguments[1]?arguments[1]:"你好 世界")
 };
 argumentsTest(); // Hello World 你好 世界
 argumentsTest("This is firstValue => arguments[0].","This is secondValue => arguments[1]."); // This is firstValue => arguments[0]. This is secondValue => arguments[1]. 

好了,关于javascript知识点先给大家整理这么些,全当温习下知识点,本文写的不好,还望各位朋友多多指教。

Kenyataan:
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