지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > JavaScript_javascript 팁에서 인라인 함수 사용 시 문제

JavaScript_javascript 팁에서 인라인 함수 사용 시 문제

WBOY
풀어 주다： 2016-05-16 19:17:54
원래의
1334명이 탐색했습니다.

前段时间被IE和JavaScript脚本引擎的Memory Leak问题弄得郁闷坏了，不过幸好现在总算是柳暗花明了，并且找到了一些IE中使用脚本避免ML问题的方法。继续研究JavaScript的编写，有发现一些不算ML问题，但是可以节约IE内存使用的方法，在此和大家讨论讨论。

    我们在JavaScript中编写代码，对于定义函数的语句：

JavaScript_javascript 팁에서 인라인 함수 사용 시 문제function foo()
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제{
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    // TODO: . . .
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    return x;
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제}

可以说是在熟悉不过了。当然除了这种定义函数的方法，我们还有另外几种方法也能定义函数：

JavaScript_javascript 팁에서 인라인 함수 사용 시 문제var foo = function()
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제{
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    // TODO: . . .
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    return x;
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제}

JavaScript_javascript 팁에서 인라인 함수 사용 시 문제var foo = new Function('{/*todo*/return x;}');

    后两种方法定义的JavaScript函数，在调用起来和第一种没有任何效果上的区别。

    不过由于JavaScript是解释性语言，当我们定义一个函数的时候，解析引擎生成一个Function对象实例，然后把函数内容保存下来。所以每执行一次函数定义语句，就会生成一个函数。而不像编译语言，一个函数编译一次后就被任何语句调用。啊？难道JavaScript不能调用定义好的函数？不是这个意思了，当我们在制作JavaScript控件时，如果动态输出DHTML来作为控件的内容，就容易出现这样的问题。比如我们在一个HTML对象生成过程中，使用了inline方式定义的函数，那么这个元素生成几次，那个函数也就要同时生成几次。

JavaScript_javascript 팁에서 인라인 함수 사용 시 문제 함수 TestObject.prototype.Render(doc, id)
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제 {
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    var span = doc.createElement('SPAN');
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    span.Object =  이것;
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    이것.m_Element = span;
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    if ( id == "NamedMethod" )
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    {
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제       span.onclick = asdf;
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    }
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    else
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    { 
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제        span.onclick = function()
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제        {
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제            var asdf01 = ['a', 's', 'd', 'f'];
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제            var asdf02 = ['a', 's', 'd', 'f'];
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제            var asdf03 = ['a', 's', 'd', 'f'];
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제            var asdf04 = ['a', 's', 'd', 'f'];
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제            var asdf05 = ['a', 's', 'd', 'f'];
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제            var asdf06 = ['a', 's', 'd', 'f'];
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제            var asdf07 = ['a', 's', 'd', 'f'];
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제            var asdf08 = ['a', 's', 'd', 'f'];
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제            var asdf09 = ['a', 's', 'd', 'f'];
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제            var asdf10 = ['a', 's', 'd', 'f'];
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제            var asdf11 = ['a', 's', 'd', 'f'];
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제            var asdf12 = ['a', 's', 'd', 'f'];
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제        };
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    }
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    span.Name = this.m_Description;
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    span.innerText = this.m_Name;
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    span.style.display = 'block';
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    return span;
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제 }

    函数span.onclick = function()中的内容是用来占位置的，这样inline方式定义函数，每次Render()都就会生成一个新的函数对象。使用inline方式有什么不好呢？当对象实例多了的时候，会很明显的浪费内存空间呀，试验数据如下：

   
 Normal Method   Inline Method 
 Initialized  27.4 M 27.4 M
 Rendered  33.4 M 35.2 M

// IE(PM VM)에서 소모하는 메모리량

절대적인 메모리 소모만으로는 큰 차이가 없지만 상대적으로 보면 메모리 소비: (35.2 -33.4)/(33.4-27.4) = 30% !!!, 이는 여전히 매우 인상적이며 메서드 자체가 클수록 중복되는 데이터가 많아집니다. 인라인이 됩니다.

    附测试代码：
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제<html>
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제<head>
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    <title>JScript Function Spendingtitle>
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    <meta name="author" content="birdshome@博客园" /> 
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제head>
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제<body onunload="ReleaseElements()">
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    <button id="NamedMethod" onclick="GenerateObjects(this)">
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제        Append Normal Elementsbutton>
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    <button id="AnonymousMethod" onclick="GenerateObjects(this)">
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제        Append Inline Elementsbutton>
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    <div id="container">
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    div>
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    <script language="Javascript">
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제function GenerateObjects(elmt)
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제JavaScript_javascript 팁에서 인라인 함수 사용 시 문제{
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    var room = document.getElementById('container');
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    for ( var i=0 ; i < 1000 ; ++i )
    {
        var obj = new TestObject('__Object__'   i);
         room.appendChild (obj.Render(문서, elmt.id));
    } 
}

function TestObject(name)
{
this.m_Name = name;
this.m_Description = '';
this.m_Element = null;

this.toString = function()
{
return '[class TestObject]';
    }
}

function TestObject.prototype.Render(doc, id)
{
var span = doc.createElement('SPAN');
span.Object = this;
this.m_Element = span;

if ( id == "NamedMethod" )
{
span.onclick = asdf;
    }
else
{
span.onclick = function()
{
var asdf01 = ['a', 's', 'd', 'f'];
var asdf02 = ['a', 's', 'd', 'f'];
var asdf03 = ['a', 's', 'd', 'f'];
var asdf04 = ['a', 's', 'd', 'f'];
var asdf05 = ['a', 's', 'd', 'f'];
var asdf06 = ['a', 's', 'd', 'f'];
var asdf07 = ['a', 's', 'd', 'f'];
var asdf08 = ['a', 's', 'd', 'f'];
var asdf09 = ['a', 's', 'd', 'f'];
var asdf10 = ['a', 's', 'd', 'f'];
var asdf11 = ['a', 's', 'd', 'f'];
var asdf12 = ['a', 's', 'd', 'f'];
};
    }
    span.Name = this.m_Description;
    span.innerText = 이것.m_Name;
    span.style.display = '차단';
    반환 span;
}

function asdf()
{
var asdf01 = ['a', 's', 'd', 'f'];
var asdf02 = ['a', 's', 'd', 'f'];
var asdf03 = ['a', 's', 'd', 'f'];
var asdf04 = ['a', 's', 'd', 'f'];
var asdf05 = ['a', 's', 'd', 'f'];
var asdf06 = ['a', 's', 'd', 'f'];
var asdf07 = ['a', 's', 'd', 'f'];
var asdf08 = ['a', 's', 'd', 'f'];
    var asdf09 = ['a', 's', 'd', 'f'];
    var asdf10 = ['a', 's', 'd', 'f'];
    var asdf11 = ['a', 's', 'd', 'f'];
    var asdf12 = ['a', 's', 'd', 'f'] ;
}
script>
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    <script language="javascript">
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제function ReleaseElements()
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제JavaScript_javascript 팁에서 인라인 함수 사용 시 문제{
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    var room = document.getElementById('container');
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    var spans = room.all.tags('SPAN');
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제    for ( var i=0 ; i < spans.length ; ++i )
{
spans[i].Object = '';
    }
}
script>
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제body>
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제html>
JavaScript_javascript 팁에서 인라인 함수 사용 시 문제

관련 라벨：
在JavaScript中使用inline函数的问题
원천：php.cn
이전 기사：프로토타입 메서드를 작성하는 다양한 방법은 실제로 디버깅 솔루션_자바스크립트 기술에 영향을 미칩니다. 다음 기사：JsEasy 소개 JsEasy와 download_javascript 기술은 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
opentbs를 사용하여 odt 파일을 생성할 때 발생하는 문제: 동일한 키의 값이 별도의 열이 아닌 동일한 행에 표시됩니다. PHP를 사용하여 odt를 만들기 위해 OpenTbs라는 라이브러리를 사용하고 있는데, 열과 행이 동적으로 생성되기 때문에 사용하고 있습니다. 행과 열을 만드는 ...
에서 2024-04-06 20:18:18
0
1
483
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
Vue3 웹 구성요소 프로덕션 빌드 문제 해결 vue2web 구성요소를 vue3으로 마이그레이션하려고 하는데 프로덕션용 빌드를 생성할 때 문제가 발생합니다. --targetwc와 함께 vue-cli를 사용하고...
에서 2024-04-06 12:43:37
0
1
473
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿