中级笔记,函数调用规则

JavaScript函数调用规则一

不过,既然脚注有这些好处,我们当然要在网页中也加以利用,本文向您介绍了用
Javascript 和 CSS 实现脚注效果的方法。

3,作用域
所有的面向对象的语言都有某种形式的作用域,JavaScript也不例外。在JavaScript里,作用域是由函数划分的,而不是由块(while,if之类的)来划分的。
我们先来看一个简单的作用域的例子。

(1)全局函数调用:
function makeArray( arg1, arg2 ){
return [this , arg1 , arg2 ];
}
这是一个最常用的定义函数方式。相信学习JavaScript的人对它的调用并不陌生。
调用代码如下:
makeArray(‘one’, ‘two’);
// => [ window, ‘one’, ‘two’ ]

复制代码 代码如下:

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

这种方式可以说是全局的函数调用。
为什么说是全局的函数?
因为它是全局对象window 的一个方法,
我们可以用如下方法验证:
alert( typeof window.methodThatDoesntExist );
// => undefined

<script type=”text/javascript”>
// 说明:用 Javascript 和 CSS 实现脚注(Footnote)效果
var footNotes = function(){};
footNotes.prototype = {
footNoteClassName : “footnote”, // 脚注的 className
footNoteTagName : “span”, // 脚注的标签名
footNoteBackLink : ” [back]”, // 返回链接
format : function(contentID, footnoteID)
{
if (!document.getElementById) return false;
var content = document.getElementById(contentID);
var footnote = document.getElementById(footnoteID);
var spans = content.getElementsByTagName(this.footNoteTagName);
var noteArr = [];
var note = 0;
var elContent;
var len = spans.length;
for (i=0; i<len; i++)
{
note ++;
if (spans[i].className == this.footNoteClassName)
{
// 获取脚注内容
elContent = spans[i].innerHTML;
noteArr.push(elContent);
// 创建一个指向脚注的链接
var newEle = document.createElement( “a” );
newEle.href = ‘#ftn_’ + footnoteID + ‘_’ + note;
newEle.title = “show footnote”;
newEle.id = ‘ftnlink_’+footnoteID+’_’ + note;
newEle.innerHTML = note;
// 清空原有内容
while (spans[i].childNodes.length)
{
spans[i].removeChild( spans[i].firstChild );
}
spans[i].appendChild( newEle );
}
}
// 创建注释列表
var ul = this.__buildNoteList(noteArr, footnoteID);
footnote.appendChild(ul);
},
__buildNoteList : function(notes, noteID)
{
if(!notes || notes.length < 1) return;
var ul = document.createElement(‘ul’);
ul.className = this.footNoteClassName;
var li;
var len = notes.length + 1;
for(i=1; i<len; i++)
{
li = document.createElement(‘li’);
li.id = “ftn_”+noteID+”_”+i;
li.innerHTML = notes[i-1];
// 创建【返回】链接
var link = document.createElement(“a”);
link.href = “#ftnlink_” + noteID + “_” + i;
link.innerHTML = this.footNoteBackLink;
li.appendChild( link );
ul.appendChild( li );
}
return ul;
}
};
</script>

在if块中,虽然foo的值改为“b“,但还是在全局作用域中,所以输出结果是“b“。
基于浏览器的JavaScript语言有一门有趣的特性是,所有属于全局作用域的变量都是window对象的属性。
看下面代码:

alert( typeof window.makeArray);
// => function

要实现脚注,我们需要下列元素:

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

所以我们之前调用 makeArray的方法是和下面调用的方法一样的
window.makeArray(‘one’, ‘two’);
// => [ window, ‘one’, ‘two’ ]

复制代码 代码如下:

我们再上例的基础上,再添加一个函数来修改foo的值,代码如下:

JavaScript函数调用规则二

<div id=”article1″>
CSS <span class=”footnote”>CSS 是 Cascading Style Sheet
的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</span>
</div>
<div id=”artnotes1″ class=”footnoteHolder”></div>

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

(1)对象方法调用:
//creating the object
var arrayMaker = {
someProperty: ‘some value here’,
make: makeArray
};

其中:
article1 是你需要脚注的文章主体
<span class=”footnote”> .. </span> 是注释内容,标签 span 和
class 均可配置。
artnotes1 是显示脚注的地方
按照默认的设置调用方式:

结果也许有点另你意外,不过结果肯定是正确的。代码②的结果是输出
“b”,而不是”c”。原因就是作用域有关,虽然调用change()来改变foo的值,但是此时的改变只
在函数作用域内起作用,并不会改变全局作用域内的foo的值。
如果想在change()函数内修改全局的foo的值,我们可以去掉变量的声明,例如:

arrayMaker.make(‘one’, ‘two’); // => [ arrayMaker, ‘one’, ‘two’ ]
//或者用下面的方法调用:
arrayMaker[‘make’](‘one’, ‘two’); // => [ arrayMaker, ‘one’, ‘two’
]

复制代码 代码如下:

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

看到这里跟刚才的区别了吧,this的值变成了对象本身.
你可能会质疑:为什么原始的函数定义并没有改变,而this却变化了呢?

<script type=”text/javascript”>
var footnote = new footNotes();
footnote.format(‘article1′,’artnotes1’);
</script>

在JavaScript中,如果变量没有显式定义,它就是全局定义的。所以调用change()后,会修改全局foo的值。最终输出”c”

4,上下文对象
在JavaScript中,代码总是有一个上下文对象,代码处于该对象之内。上下文对象是通过this变量来体现的。这个变量永远指向当前代码所处的对象中。
全局对象其实是window对象的属性。
接下来,我们看一个上下文对象的例子。

非常好,有质疑是正确的。这里涉及到 函数在JavaScript中传递的方式,
函数在JavaScript 里是一个标准的数据类型,
确切的说是一个对象.你可以传递它们或者复制他们.
就好像整个函数连带参数列表和函数体都被复制,
且被分配给了 arrayMaker 里的属性 make,那就好像这样定义一个 arrayMaker
:
var arrayMaker = {
someProperty: ‘some value here’,
make: function (arg1, arg2) {
return [ this, arg1, arg2 ];
}
};

如果你想自定义一些内容,可以用下面的方式:

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

发表评论