Bercakap tentang pelbagai pemahaman tentang fungsi dalam kemahiran JavaScript_javascript

Fungsi dalam JavaScript mempunyai pelbagai makna. Ia mungkin pembina (pembina), yang memainkan peranan templat objek; mungkin kaedah objek (kaedah), yang bertanggungjawab untuk menghantar mesej kepada objek; . juga boleh menjadi fungsi , ya ia adalah fungsi, fungsi yang wujud secara bebas dan boleh dipanggil tanpa sebarang hubungan dengan objek.

Disebabkan oleh kompromi pereka bahasa, beberapa ciri berkaitan kelas telah ditambahkan pada JavaScript untuk menjadikan JavaScript kelihatan seperti Java dan boleh menjadi "berorientasikan objek". Walaupun JavaScript telah menambah baharu dan ini, tiada kelas (ES telah menambahnya). Akhirnya, fungsi mengambil tugas kelas buat sementara waktu.

Semantik 1: berfungsi sebagai pembina

/**
 * 页签
 *
 * @class Tab
 * @param nav {string} 页签标题的class
 * @param content {string} 页面内容的class
 *
 */
function Tab(nav, content) {
  this.nav = nav;
  this.content = content;
}
Tab.prototype.getNav = function() {
  return this.nav;
};
Tab.prototype.setNav = function(nav) {
  this.nav = nav;
};
Tab.prototype.add = function() {
};
// 创建对象
var tab = new Tab('tab-nav', 'tab-content');

Tab kelas ditakrifkan di sini dan tab objek dibuat. Fungsi, ini, baru digunakan di atas. ini, baru ialah kata kunci dalam bahasa berorientasikan objek biasa, dan fungsi di sini memainkan peranan kelas dalam bahasa berorientasikan objek tradisional. Sudah tentu, penamaan pengecam pada masa ini secara amnya mengikut peraturan "huruf besar pertama".

Semantik 2: berfungsi sebagai kaedah objek

Memandangkan objek boleh dibuat terus dalam JavaScript tanpa kelas, terdapat dua cara untuk menambah kaedah pada objek. Yang pertama adalah untuk menentukan kelas terlebih dahulu dan menggantung kaedah pada prototaip, seperti Tab dalam contoh di atas Prototaip mempunyai getNav, setNav dan kaedah tambah. Terdapat satu lagi cara untuk menambah kaedah secara langsung pada ini dalam fungsi.

function Tab(nav, content) {
  this.nav = nav
  this.content = content
  this.getNav = function() {
    // ...
  }
  this.setNav = function() {
    // ...
  }
  this.add = function() {
    // ...
  }
}

Tab di sini ialah semantik, this.getNav/this.setNav/this.add ialah semantik, sebagai kaedah objek. Selain itu, objek dan kaedahnya boleh ditakrifkan secara langsung

var tab = {
  nav: '',
  content: '',
  getNav: function() {
    // ...
  },
  setNav: function() {
    // ...
  },
  add: function() {
    // ...
  }
}

tab.getNav/tab.setNav/tab.add adalah semantik, sebagai kaedah tab objek.

Semantik 3: Sebagai fungsi bebas

/*
 * 判断对象是否是一个空对象
 * @param obj {Object}
 * @return {boolean}
 */
function isEmpty(obj) {
  for (var a in obj) {
    return false
  }
  return true
}
// 定义一个模块
~function() {
  // 辅助函数
  function now() {
    return (new Date).getTime()
  }
  // 模块逻辑...
}();
// 采用CommonJS规范的方式定义一个模块
define(require, exports, moduel) {
  // 辅助函数
  function now() {
    return (new Date).getTime()
  }
  // 模块逻辑...
})

isEmpty wujud sebagai fungsi global, dan kini dalam definisi modul wujud sebagai fungsi setempat Sama ada isEmpty atau sekarang, fungsi di sini merujuk kepada fungsi tidak bergantung pada objek dan kelas dan boleh dipanggil secara bebas.

Semantik 4: Modul definisi fungsi tanpa nama

// 全局命名空间
var RUI = {}
// ajax.js
~function(R) {
  // 辅助函数...
  ajax = {
    request: function() {
      // ...
    }
    getJSON: function() {
      // ...
    }
    ...
  }
  // 暴露出模块给 R
  R.ajax = ajax
}(RUI);
// event.js
~function(R) {
  // 辅助函数...
  // 事件模块定义...
  // 暴露出模块给 R
  R.event = event
}(RUI);
// dom.js
~function(R) {
  // 辅助函数...
  // DON模块定义...
  // 暴露出模块给 R
  R.dom = dom
}(RUI);

Selepas fungsi tanpa nama di sini dilaksanakan, objek API terdedah kepada RUI Tidak kira berapa banyak kerja yang dilakukan dalam fungsi tanpa nama, ia tidak boleh dilihat di luar fungsi tanpa nama yang sepadan dan tidak perlu memberi perhatian. kepadanya. Kebimbangan terakhir ialah kaedah API awam Selagi anda memahami parameter dan maksud kaedah ini, anda boleh menggunakannya dengan segera.

Semantik 5: Fungsi tanpa nama mengendalikan kesan khas tertentu seperti memproses beberapa data tanpa mendedahkan terlalu banyak pembolehubah

// 判断IE版本的hack方式
var IEVersion = function() {
  var undef, v = 
  var div = document.createElement('div')
  var all = div.getElementsByTagName('i')
  while (
    div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
    all[]
  );
  return v > &#63; v : undef
}();

Akhirnya, hanya terdapat satu hasil IEVersion dan beberapa pembolehubah tempatan yang digunakan dalam fungsi tanpa nama semuanya boleh diasingkan. Kaedah ini sangat berkesan dan padat untuk beberapa pemprosesan data sementara.

Ringkasan:

JavaScript direka oleh Eich dalam beberapa hari Ia pada asalnya merupakan skrip/bahasa fungsional yang pendek dan padat Atas sebab pemasaran, untuk memenuhi Java, beberapa ciri berorientasikan objek seperti Java telah ditambahkan (pembina, ini, baru. ). Ini dan baru disalin, tetapi fungsi kelas diserahkan kepada berfungsi. Akibatnya, fungsi JavaScript mengelirukan Kadangkala ia digunakan untuk menentukan kelas, dan kadangkala ia digunakan sebagai kaedah atau fungsi. Sesetengah orang juga mendapati bahawa ia boleh digunakan untuk menentukan modul dan sebagainya.

Semua ini berakhir dengan ketibaan ES Kata simpanan "kelas" dalam ES akhirnya dicadangkan untuk menggunakan kelas untuk mentakrifkan kelas. Terdapat juga kata kunci lanjutan, yang pada asasnya membawa "warisan kelas". Douglas mengulas pada persidangan Nordic.js bahawa salah satu reka bentuk ES yang paling teruk adalah kelas Selain itu, ia tidak disyorkan untuk menggunakan ini dan baru Ini menunjukkan bahawa dia masih menyukai penggunaan bahasa berfungsi untuk menulis JavaScript, dan bukannya objek -berorientasikan berdasarkan kelas .

Kandungan di atas adalah pemahaman peribadi saya tentang fungsi dalam JavaScript Rakan yang mempunyai pemahaman yang berbeza dialu-alukan untuk berkongsi dan belajar serta maju bersama.