JavaScript의 기능에 대한 자세한 이해(코드 포함)

이 기사는 JavaScript의 기능에 대한 자세한 이해를 제공합니다(코드 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

JavaScript의 함수에는 여러 가지 의미가 있습니다. 이는 객체 템플릿 역할을 하는 생성자일 수도 있고, 객체에 메시지를 보내는 일을 담당하는 객체의 메서드일 수도 있습니다. 그것은 또한 함수일 수도 있습니다. 그렇습니다. 함수입니다. 독립적으로 존재하고 객체와 어떤 관계 없이 호출될 수 있는 함수입니다.

언어 디자이너의 타협으로 인해 일부 클래스 관련 기능이 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');

여기서 Tab 클래스가 정의되고 개체 탭이 생성됩니다. 위에서는 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() {
// ...
}
}

여기 탭은 의미 체계이고, 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 p = document.createElement('p')
 var all = p.getElementsByTagName('i')
 while (
p.innerHTML = &#39;<!--[if gt IE &#39; + (++v) + &#39;]><i></i><![endif]-->&#39;,
all[]
);
 return v > ? v : undef
}();

결국 IEVersion 결과는 하나 뿐이며 익명 함수 내부에서 사용되는 일부 지역 변수는 모두 격리될 수 있습니다. 이 방법은 일부 임시 데이터 처리에 매우 효과적이고 간단합니다. [관련 권장 사항: JavaScript 비디오 튜토리얼]

위 내용은 JavaScript의 기능에 대한 자세한 이해(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!