집 >웹 프론트엔드 >JS 튜토리얼 >Javascript - 발신자, 수신자, 통화에 대한 포괄적인 이해, 적용_기본 지식

Javascript - 발신자, 수신자, 통화에 대한 포괄적인 이해, 적용_기본 지식

WBOY원래의: 2016-05-16 19:21:40864검색

<title> 방법 - 자바스크립트 호출, 신청, 발신자 - http://www.never-online.net </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="never-online, blueDestiny">
<meta name="Keywords" content="never-online, blueDestiny">
<meta name="Description" content="http://www.never-online.net">
<style> 
 
</style>

<h1>

</h1> Javascript - 호출자, 수신자, 호출, 적용에 대한 포괄적인 이해 <h6>
</h6> 작성자: BlueDestiny, never-online 출처: http://www.never-online.net, Blog.csdn.net/BlueDestiny <div align="center">

<div class="block">
<h3>
  </h3> 1. 발신자 <h5>
  <h5> JScript 참조 설명: 현재 함수를 호출하는 함수에 대한 참조를 반환합니다. 
이 문장을 이해하는 방법, 먼저 간단한 예를 들어보겠습니다. <pre class="code"> 
// caller demo { 
function callerDemo() { 
    if (callerDemo.caller) { 
        var a= callerDemo.caller.toString(); 
        alert(a); 
    } else { 
        alert("this is a top function"); 
    } 
} 
function handleCaller() { 
    callerDemo(); 
} 
  </pre>
  <input type="button" onclick="callerDemo()" value="callerDemo">
    <input type="button" onclick="handleCaller()" value="handleCaller">
    <h5>
    </h5>위의 예에서 볼 수 있듯이 호출 데이터에 대한 참조를 반환합니다. (요청에 의해 호출된 함수를 가리키며) onclick이 이벤트를 트리거할 때 항상 익명 함수를 전달한다는 것도 여기서 볼 수 있습니다 </h5>
</h5>
</div>
</div>
<div align="center">

<div class="block">
    <h3>
        </h3> 2. 수신자 <h5>
        </h5> JScript 참조의 설명은 다음과 같습니다. 실행 중인 Function 개체를 반환합니다. 이는 지정된 Function 개체의 본문입니다. 
        호출 수신자에게는 길이 속성이 있으며 때로는 확인에 더 적합하다는 점에 유의해야 합니다. <pre class="code"> 
function calleeDemo() { 
    alert(arguments.callee); 
} 
function calleeLengthDemo(arg1, arg2) { 
    if (arguments.length==arguments.callee.length) { 
        window.alert("验证形参和实参长度正确！"); 
        return; 
    } else { 
        alert("实参长度：" +arguments.length); 
        alert("形参长度： " +arguments.callee.length); 
    } 
} 
        </pre>
        <input type="button" onclick="calleeDemo()" value="handleCallee">
        <input type="button" onclick="calleeLengthDemo()" value="handleCalleeLength">
        <h5>
        </h5> 위의 예에서 볼 수 있듯이 호출 수신자는 실행 함수를 적중하는 데, 즉 호출된 함수를 가리키는 데 사용될 수 있습니다. 위의 예는 calee가 스스로 인쇄할 수 있으며 물론 다른 용도로도 사용할 수 있음을 보여줍니다. 길이 속성에서,args.length는 실제 매개변수 길이이고,args.callee.length는 형식 매개변수 길이입니다. 이를 통해 호출 중에 형식 매개변수 길이가 실제 매개변수 길이와 일치하는지 확인할 수 있습니다. </div>
    <script language="JavaScript" type="text/javascript"> 
//<![CDATA[

// caller demo 
function callerDemo(b) { 
    if (callerDemo.caller) { 
        var a= callerDemo.caller.toString(); 
        alert(a); 
    } else { 
        alert("this is a top function"); 
    } 
} 
function handleCaller() { 
    callerDemo(); 
} 
// callee demo 
function calleeDemo() { 
    alert(arguments.callee); 
} 
function calleeLengthDemo(arg1, arg2) { 
    if (arguments.length==arguments.callee.length) { 
        window.alert("验证形参和实参长度正确！"); 
        return; 
    } else { 
        alert("实参长度：" +arguments.length); 
        alert("形参长度： " +arguments.callee.length); 
    } 
}

// simple call demo 
function simpleCallDemo(arg) { 
    window.alert(arg); 
} 
function handleSPC(arg) { 
    simpleCallDemo.call(this, arg); 
} 
// simple apply demo 
function simpleApplyDemo(arg) { 
    window.alert(arg); 
} 
function handleSPA(arg) { 
    simpleApplyDemo.apply(this, arguments); 
}

// inherit 
function base() { 
    this.member = "never-online"; 
    this.method = function() { 
        alert(this.member); 
    } 
} 
function extend() { 
    base.call(this); 
    window.alert(member); 
    window.alert(this.method); 
} 
// advanced apply demo 
function adApplyDemo(x) { 
    return ("this is never-online, BlueDestiny '" + x + "' demo"); 
} 
function handleAdApplyDemo(obj, fname, before) { 
  var oldFunc = obj[fname]; 
  obj[fname] = function() { 
    return oldFunc.apply(this, before(arguments)); 
  }; 
} 
function hellowordFunc(args) { 
  args[0] = "hello " + args[0]; 
  return args; 
} 
function applyBefore() { 
    alert(adApplyDemo("world")); 
} 
function applyAfter() { 
    handleAdApplyDemo(this, "adApplyDemo", hellowordFunc); 
    alert(adApplyDemo("world")); // Hello world! 
} 
//]]> 
</script>

<div align="center"> 
    <div class="block"> 
        <h3> 3、call 和 apply</h3> 
        <h5> call方法JScript参考中的说明：调用一个对象的一个方法，以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[,   [,.argN]]]]])，但是没有示例 
        </h5> 
        <h5> apply方法JScript参考中的说明：应用某一对象的一个方法，用另一个对象替换当前对象。apply([thisObj[,argArray]]) </h5> 
        <h5> 实际上这两个的作用几乎是相同的，要注意的地方是call(thisObj[,arg1[, arg2[,)中的arg参数可以是变量，而apply([thisObj[,argArray]])中的参数为数组集合。下面来看看call, apply的具体应用 </h5> 
    <pre class="code"> 
// simple call demo 
function simpleCallDemo(arg) { 
    window.alert(arg); 
} 
function handleSPC(arg) { 
    simpleCallDemo.call(this, arg); 
} 
// simple apply demo 
function simpleApplyDemo(arg) { 
    window.alert(arg); 
} 
function handleSPA(arg) { 
    simpleApplyDemo.apply(this, arguments); 
} 
    </pre> 
    <input type="button" onclick="handleSPC('never-online')" value="handle simple call"> 
    <input type="button" onclick="handleSPA('BlueDestiny')" value="handle simple apply"> 
    <h5> 从上面简单的例子可以看出，call和apply可以把当前的参数传递给另外一个函数的参数中，从而调用另一个函数的应用。有的时候这是一个很实用的方法，当然，用call或是apply（是参数或是数组），看实际情况而定了。 
    </h5> 
    <h4> 下面来看另一个应用 </h4> 
    <h5> call和apply还有一个技巧在里面，就是用call和apply应用另一个函数（类）以后，当前的函数（类）就具备了另一个函数（类）的方法或者是属性，这也可以称之为"继承"。看下面示例。 
    </h5> 
    <pre class="code"> 
// inherit 
function base() { 
    this.member = "never-online"; 
    this.method = function() { 
        window.alert(this.member); 
    } 
} 
function extend() { 
    base.call(this); 
    window.alert(member); 
    window.alert(this.method); 
} 
    </pre> 
    <input type="button" onclick="extend()" value="inherited"> 
    <h5> 上面的例子可以看出，通过call之后，extend可以继承到base的方法和属性。 </h5>

<h4> 再看一个apply的应用 </h4> 
    <pre class="code"> 
// advanced apply demo 
function adApplyDemo(x) { 
    return ("this is never-online, BlueDestiny '" + x + "' demo"); 
} 
function handleAdApplyDemo(obj, fname, before) { 
  var oldFunc = obj[fname]; 
  obj[fname] = function() { 
    return oldFunc.apply(this, before(arguments)); 
  }; 
} 
function hellowordFunc(args) { 
  args[0] = "hello " + args[0]; 
  return args; 
} 
function applyBefore() { 
    alert(adApplyDemo("world")); 
} 
function applyAfter() { 
    handleAdApplyDemo(this, "adApplyDemo", hellowordFunc); 
    alert(adApplyDemo("world")); // Hello world! 
} 
    </pre> 
    <h5> 需要注意的是，要先点"原始的adApplyDemo('world')"按钮，如果先点"应用后的adApplyDemo('world')"按扭，会先应用了apply方法，这样原始的值将会被改变。或许有的朋友没有发现有什么特别的，我在这里指明一下，当点击左边的按扭时，只有"this is never-online, BlueDestiny 'world' demo"， 当点击右边的按扭后，会现结果是"this is never-online, BlueDestiny 'hello world' demo"，再点点左边的按扭，看看结果又会是什么呢？自己试试看:D，已经改写了函数adApplyDemo。这个例子则说明了call和apply的"真正"作用了。 
    </h5> 
    <input type="button" onclick="applyBefore()" value="原始的adApplyDemo('world')"> 
    <input type="button" onclick="applyAfter()" value="应用后的adApplyDemo('world')"> 
    </div> 
</div> 
  <h4 class="copyright"> 
    Power By BlueDestiny, never-online,  
    <a href="http://www.never-online.net">http://www.never-online.net</a>  
  </h4> 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

성명：

이전 기사：Javascript 기타 - window.status_Typical 특수 효과를 사용하여 실시간으로 데이터 표시다음 기사：Javascript 기타 - window.status_Typical 특수 효과를 사용하여 실시간으로 데이터 표시

Javascript - 발신자, 수신자, 통화에 대한 포괄적인 이해, 적용_기본 지식

관련 기사