JavaScript_javascript 기술의 기능에 대한 다양한 이해에 대해 이야기

JavaScript의 함수에는 여러 가지 의미가 있습니다. 객체 템플릿 역할을 하는 생성자(constructor)일 수 있습니다. 는 객체에 메시지를 보내는 역할을 하는 객체 (메서드)의 메서드일 수 있습니다. . 는 함수 일 수도 있습니다. 그렇습니다. 함수입니다. 독립적으로 존재하고 객체와 아무런 관계 없이 호출할 수 있는 함수입니다.

언어 디자이너의 타협으로 인해 일부 클래스 관련 기능이 JavaScript에 추가되어 JavaScript가 Java처럼 보이고 "객체 지향"이 될 수 있습니다. JavaScript에서 new와 this를 추가했지만 클래스가 없습니다(ES에서 추가했습니다). 마지막으로 함수는 일시적으로 클래스의 작업을 수행합니다.

의미 1: 생성자로서의 함수

/**
 * 页签
 *
 * @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');

여기서 클래스 탭이 정의되고 객체 탭이 생성됩니다. 위에서는 Function, this, new를 사용했습니다. this, new는 일반적인 객체지향 언어의 키워드이며, 여기서 기능은 전통적인 객체지향 언어에서 클래스의 역할을 합니다. 물론 이때 식별자의 명명은 일반적으로 "첫 글자 대문자 사용" 규칙을 따릅니다.

의미 2: 객체 메서드로서의 기능

객체는 클래스 없이 자바스크립트에서 직접 생성할 수 있기 때문에 객체에 메소드를 추가하는 방법에는 두 가지가 있습니다. 첫 번째는 클래스를 먼저 정의하고 위 예제의 Tab과 같이 프로토타입에 메서드를 걸어 두는 것입니다. 프로토타입에는 getNav, setNav 및 add 메서드가 있습니다. 함수 내에서 이에 직접 메서드를 추가하는 또 다른 방법이 있습니다.

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

여기서 Tab은 의미 체계이고, this.getNav/this.setNav/this.add는 객체의 메서드로서의 의미 체계입니다. 또한 객체와 그 메소드를 직접 정의할 수 있습니다

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

tab.getNav/tab.setNav/tab.add는 개체 탭의 메서드와 같은 의미를 갖습니다.

의미론 3: 독립된 함수로

/*
 * 判断对象是否是一个空对象
 * @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는 전역 함수로 존재하며 이제 모듈 정의에서는 로컬 함수로 존재합니다. isEmpty이든 지금이든 여기서 함수는 객체와 클래스에 의존하지 않으며 독립적으로 호출할 수 있습니다.

의미론 4: 익명 함수 정의 모듈

// 全局命名空间
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);

여기서 익명 함수가 실행되면 API 개체가 RUI에 노출됩니다. 익명 함수에서 아무리 많은 작업을 수행하더라도 해당 익명 함수 외부에서는 볼 수 없으므로 주의할 필요가 없습니다. 그것에. 마지막 관심사는 공개 API 메소드입니다. 이러한 메소드의 매개변수와 의미를 이해하면 즉시 사용할 수 있습니다.

의미론 5: 익명 함수는 너무 많은 변수를 노출하지 않고 일부 데이터를 처리하는 등 특정 특수 효과를 처리합니다.

// 判断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
}();

결국 IEVersion 결과는 하나 뿐이고 익명 함수 내부에 사용된 일부 지역 변수는 모두 격리될 수 있습니다. 이 방법은 일부 임시 데이터 처리에 매우 효과적이고 간단합니다.

요약:

JavaScript는 원래 짧고 간결한 스크립트/기능적 언어였지만 Java에 맞춰 일부 Java와 유사한 객체 지향 기능이 추가되었습니다. ). this와 new는 복사되지만 클래스의 기능은 function에 넘겨집니다. 결과적으로 JavaScript 함수는 클래스를 정의하는 데 사용되기도 하고 메서드나 함수로 사용되기도 합니다. 어떤 사람들은 모듈 등을 정의하는 데에도 사용할 수 있다는 사실을 발견했습니다.

이 모든 것은 ES의 등장으로 끝났습니다. ES에서 예약어 "class"가 마침내 구현되었습니다. 클래스를 정의하려면 클래스를 사용하는 것이 좋습니다. 기본적으로 "클래스 상속"을 가져오는 확장 키워드도 있습니다. Douglas는 Nordic.js 컨퍼런스에서 ES의 최악의 디자인 중 하나가 클래스라고 언급했습니다. 또한 this와 new를 사용하는 것은 권장되지 않습니다. 이는 그가 여전히 객체보다는 함수형 언어를 사용하는 것을 선호한다는 것을 보여줍니다. - 클래스를 기반으로 합니다.

위 내용은 JavaScript의 기능에 대한 개인적인 다중 이해입니다. 서로 다른 이해를 가진 친구들이 함께 공유하고 배우고 발전할 수 있습니다.