Javascript 教程 在线

530JavaScript函数调用

this 是 JavaScript 语言的一个关键字。

它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如:

function test() {
    this.x = 1;
}

随着函数使用场合的不同,this 的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

529JavaScript函数定义

解释一下三楼的最后的一块代码:

var a = function () {
    document.write("Hello! 我是自己调用的" + "<br />");
    return '返回的东西';
}();        // 因为函数自调了,变量a不再指向一个函数,而是“返回的东西”这个字符串

document.write(a);    //输出字符串

补充一下 return 的知识(与后面的闭包一节有联系!):

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}  //这里return了一个内嵌方法,即add指向一个方法
                                                
})();

上面的 return 为什么不是返回一个数值呢?不懂的请学习闭包一节,笔记里有人解释。

再补充:

x=x+5; 
return x; 

可以简化为:

return x=x+5;

528JavaScript函数定义

对于函数自调用,必须通过把函数表达式外面添加括号(来说明它是一个函数表达式)再调用,否则会报错,如下实例:

function () { document.write( "Hello! 我是自己调用的" );}();
// 报错:Uncaught SyntaxError: Unexpected token (

正确写法:

(function () { document.write( "Hello! 我是自己调用的" );})();

现在我们知道函数表达式后面紧跟 () 会自动调用,但是如果把函数表达式赋给一个变量则不需要添加括号也可以直接调用,下方的代码中,函数表达式的主体部分会执行,并且会返回一个字符串给 a:

var a = function () {
    document.write("Hello! 我是自己调用的" + "<br />");
    return '返回的东西';
}();

document.write(a);

527JavaScript函数定义

ES6 里自调用可以写成箭头函数形式。

匿名自调用表达式:

(()=>{})()

尝试一下 »

526JavaScript 函数定义

<p>匿名函数自动调用表达式:</p><pre style=""><span class="pun"><span class="pun"><span class="pun">(</span></span></span><span class="kwd"><span class="kwd"><span class="kwd">function</span></span></span><span class="pun"><span class="pun"><span class="pun">(){})()</span></span></span></pre><p>例如:</p><pre style=""><span class="tag"><p< span=""><span class="pln"><span class="pln"></span></span><span class="tag"><span class="pun"></span><p></p></span><span class="pln"><span class="pln"><span class="pln"></span><span class="pln">&lt;p id="demo"&gt;&lt;/p&gt;&lt;script&gt;</span><script><span class="pln"></span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"demo"</span><span class="pun">).</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">"hello kity"</span><span class="pun">;})()</span><span class="pln"></span></script><span class="pln">(function(){document.getElementById("demo").innerHTML = "hello kity";})()&lt;/script&gt;</span></span></span><span class="tag"><script><span class="pun">&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pun"</span><span class="pun">&gt;&lt;</span><span class="str">/&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pln"</span><span class="pun">&gt;</span><span class="pln">span</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&gt;&lt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pln"</span><span class="pun">&gt;</span><span class="pln">span </span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="kwd"&gt;class&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pun"</span><span class="pun">&gt;=&lt;</span><span class="str">/span&gt;&lt;span class="str"&gt;"pln"&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pun"</span><span class="pun">&gt;&gt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pln"</span><span class="pun">&gt;</span><span class="pln"></span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&lt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;(&lt;/</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pun"</span><span class="pun">&gt;&gt;&lt;&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span &lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"kwd"</span><span class="pun">&gt;</span><span class="kwd">class</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;=&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">"kwd"</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&gt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"kwd"</span><span class="pun">&gt;</span><span class="kwd">function</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&lt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;(){&lt;/</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pun"</span><span class="pun">&gt;&gt;&lt;&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span &lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"kwd"</span><span class="pun">&gt;</span><span class="kwd">class</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;=&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">"pln"</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&gt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pln"</span><span class="pun">&gt;</span><span class="pln">document</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&lt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;.&lt;/</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pun"</span><span class="pun">&gt;&gt;&lt;&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span &lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"kwd"</span><span class="pun">&gt;</span><span class="kwd">class</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;=&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">"pln"</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&gt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pln"</span><span class="pun">&gt;</span><span class="pln">getElementById</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&lt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;(&lt;/</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pun"</span><span class="pun">&gt;&gt;&lt;&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span &lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"kwd"</span><span class="pun">&gt;</span><span class="kwd">class</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;=&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">"str"</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&gt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">"demo"</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&lt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;).&lt;/</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pun"</span><span class="pun">&gt;&gt;&lt;&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span &lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"kwd"</span><span class="pun">&gt;</span><span class="kwd">class</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;=&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">"pln"</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&gt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pln"</span><span class="pun">&gt;</span><span class="pln">innerHTML </span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&lt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;=&lt;/</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pun"</span><span class="pun">&gt;&gt;&lt;&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span &lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"kwd"</span><span class="pun">&gt;</span><span class="kwd">class</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;=&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">"pln"</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&gt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pln"</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&lt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">/span&gt;&lt;span class="str"&gt;"hello kity"&lt;/</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pun"</span><span class="pun">&gt;&gt;&lt;&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span &lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"kwd"</span><span class="pun">&gt;</span><span class="kwd">class</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;=&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">"pun"</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&gt;;})()&lt;/</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pun"</span><span class="pun">&gt;&gt;&lt;&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span &lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"kwd"</span><span class="pun">&gt;</span><span class="kwd">class</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;=&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">"pln"</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&gt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pln"</span><span class="pun">&gt;</span><span class="pln"></span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&lt;/</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"pun"</span><span class="pun">&gt;&gt;&lt;&lt;</span><span class="str">/span&gt;&lt;span class="pln"&gt;span &lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"kwd"</span><span class="pun">&gt;</span><span class="kwd">class</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;=&lt;/</span><span class="pln">span</span><span class="pun">&gt;&lt;</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"str"</span><span class="pun">&gt;</span><span class="str">"tag"</span><span class="pun">&lt;</span><span class="str">/span&gt;&lt;span class="pun"&gt;&gt;&lt;/</span><span class="pln">span</span><span class="pun">&gt;</span></script></span></p<></span></pre><p><a href="/try/try.php?filename=js-anonymous-function-automatic-self-c " target="_blank">尝试一下 »</a></p>