展会信息港展会大全

JavaScript中的方法、方法引用和参数
来源:互联网   发布日期:2016-01-26 10:22:08   浏览:729次  

导读:首先,我们来看一段代码,如果觉得不甚明白的,则本文会对你有益: var player = function (e) { return (function f(m) { return m ? (function (n) { return $( 39; Player 39;, ...

首先,我们来看一段代码,如果觉得不甚明白的,则本文会对你有益:

var player = function (e) {

return (function f(m) {

return m ? (function (n) {

return $('#Player', n).get(0) || f($('iframe', n).get(0));

})(m.contentWindow.document) : null;

})($(e).get(0));

};

该段代码涉及到的知识点包括:方法、匿名方法、匿名方法的立即执行、JQuery对象及Dom对象的互转等。现在,我们回过头来从基础的出发,争取对于JavaScript中的方法、方法引用和参数弄得概念清楚一些。

一:示例代码

首先,先看测试代码:

该代码的执行结果为:

=================================

self:outp0

self:p0

=================================

self:outp00B

newo:BB

newo:outp00C

=================================

self:outp01D

newo:p01

=================================

self:p1

=================================

self:p11

newo:outp11_2p11

newo:outp11p11

=================================

self:p12

newo:outp121

invoker:p12outp122

二:示例代码的讲解

1:对象,即 new

由于 p0 是一个 function,所以可以被 new,function 本身就相当于构造器了。不过过因为 p0 本身内部没有参数、方法或者 return,所以 A 基本没什么用处。

image

由于 p00 return 一个 function,所以 B 可以执行自己,即被调用;

B("BB");

上面说了,由于 B 是一个 function,所以可以被 new

image

2:匿名方法及立即执行

p01 return 的本身是一个立即执行的匿名方法,

于是很不幸,D 本身变成什么也不是了,以下代码不能执行

D("DD");

不同于 B,B 是 function 本身,所以可以执行:

image

p1 是定义了一个匿名方法,并立即执行它,并且说明也没返回(或者说返回 null),所以:

1: p1 即不能被 new ,即 new p1();

2: 也不能执行,即 p1();

image

p11 定义了一个匿名方法,并且立即执行了它,同时返回了一个方法,所以

1:p11 本身就代表了这个被 return 的方法,所以可被执行,即 p11("x");

2:因为 p11 本身是 function,故可以 new

image

现在,为了便于查看,上一个加了注释的版本:

以上,基本上阐明了全部的Js方法怎么用的做法。如果认真体会上文代码,并明白其中的输出,那么基本上对于 JS 的方法的应用可以满足日常开发了。

三:一个实际代码

现在,我们就可以轻松的看明白下面这段代码的含义了:

var learning = (function ($) {

var player = function (e) {

return (function f(m) {

return m ? (function (n) {

// $('#Player', n) 指的是:在 DOM对象n 中寻找#Player对象

return $('#Player', n).get(0) || f($('iframe', n).get(0));

})(m.contentWindow.document) : null;

})($(e).get(0));

};

var playing = (function () {

return {

current: function () {

return chapter;

},

tiny: function (e) {

tinyObj = e;

},

body: function (e) {

bodyObj = e;

}

}

})();

return {

player: player,

load: function (options, fn) {

playing.tiny(options.tiny);

playing.body(options.body);

}

};

})(this.jQuery);

$(function () {

learning.load({

tiny: $('#player_tiny'),

body: $('#player_body')

},

function (e) {

});

var p1 = learning.player($('#player_tiny'));

var p2 = learning.player($('#player_body'));

if (p1) p1.pause();

if (p2) p2.pause();

});

以上代码中,最后一个方法调用指的是作为页面 dom 加载完毕执行的代码,它作为页面的主方法。在该代码中, 调用了 learning.load 方法,并且传入了两个参数。继而,我们执行了一个方法,它是:

var p1 = learning.player($('#player_tiny'));

我们可以看到,这个方法本身定义为:

var player = function (e) {

return (function f(m) {

return m ? (function (n) {

// $('#Player', n) 指的是:在 DOM对象n 中寻找#Player对象

return $('#Player', n).get(0) || f($('iframe', n).get(0));

})(m.contentWindow.document) : null;

})($(e).get(0));

};

执行该方法,执行一个立即执行的匿名方法,该方法返回下面的东西:

m ? (function (n) {

// $('#Player', n) 指的是:在 DOM对象n 中寻找#Player对象

return $('#Player', n).get(0) || f($('iframe', n).get(0));

})(m.contentWindow.document) : null;

这个方法本身看上去这么复杂,是因为这里存在一个递归调用(虽然该递归调用是可以被去掉的),即 f 方法内部,又调用了 f 方法本身。也许,我们把它换成不那么高级的写法,就好容易理解多了:

var findDoc = function (n) {

return $('#Player', n).get(0) || findX($('iframe', n).get(0));

};

var findX = function (m) {

return m ? findDoc(m.contentWindow.document) : null;

};

var player = function (e) {

findX($(e).get(0));

};

赞助本站

人工智能实验室

相关热词: JavaScript 方法 参数

AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港