`
Rainbow702
  • 浏览: 1076996 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类

【JavaScript语言精粹系列】apply的用法

阅读更多

之前写过一个apply的用法的博客:http://rainbow702.iteye.com/admin/blogs/1635299

但在读了JavaScript语言精粹中的介绍之后,发现之前的理解还不是很好,所以,今天重写一个实例来说明一下。

先说明一下apply函数的声明:

apply(context, args);

 其中, context 表示要绑定给方法的this的值,args表示方法执行所需要的参数,它必须是一个数组。

另外,上面说到的方法不是指apply本身,而是调用apply的那个方法。比如下面这行代码:

fn.apply();

其中的fn就是上面所说的方法。

好了,下面具体集合例子来说明apply的用法。



  

画面中有两个按钮,它们的click事件的绑定请看第8行和第12行的代码。

第18行和21行是我定义的两个方法,它们的方法体稍微有点不一样。

第24行和25行是我定义的两个对象。

 

下面通过DEBUG的方式,来看一下apply的执行过程:

① 单击第一个按钮:



  
此时,代码运行到第9行,准备为fn传递两个值,null 和 [stu] 

 

② 按下 F11


  
此时,代码运行到19行,fn方法内部。 

通过右边的“Scope Variables”,我们可以看到,此时的fn方法体内的this仍然是当前的window对象。也就是说,虽然传递了null给fn方法,但由于null的特殊性,它被无视了。而fn的参数obj的值,此时就是我们传递过来的stu这个对象。

 

③点击F10


  
 画面中弹出了 stu 的name属性的值。

 

④ 点击 确定 按钮,然后,点击F10按钮,代码将运行到第10行:



   

⑤ 按下F10按钮,也许,你会认为,画面将会弹出 per 的字样,但实际结果却是:



 
 对,程序出错了。为什么呢?请看一下第8行和第9行代码的区别。没错,你发现了,第9行的per没有被“[]”包着,也就是说传递给fn的不是一个数组,而直接是一个对象,这与apply所需的参数的形式是相违背的,所以,程序出错。

修正之后的代码我就不重新截图了。

 

⑥ 刷新页面后,点击,第二个按钮,代码将运行到第13行:



  

⑦点击 F11 按钮:



  
 通过右边的“Scope Variables”可以看到,fn的this发生了变化,变成了传递过来的stu对象。

⑧ 点击F10按钮,画面将显示 stu 字样:

 

 

⑨ 点击 确定按钮,然后,点击F8按钮,将会看到画面弹出 per 字样



 

 

源码请参见 附件的  test.zip

  • 大小: 85.8 KB
  • 大小: 92.3 KB
  • 大小: 92 KB
  • 大小: 91.1 KB
  • 大小: 91.2 KB
  • 大小: 91.4 KB
  • 大小: 91.1 KB
  • 大小: 91 KB
  • 大小: 92.7 KB
  • 大小: 91.7 KB
分享到:
评论

相关推荐

    《JavaScript语言精粹》.pdf

    《JavaScript语言精粹》这本书是深入理解这一语言的宝贵资源,它涵盖了JavaScript的核心概念和技术,旨在帮助读者掌握这门语言的精髓。 在描述中提到的"JavaScript语言精粹 包含pdf 与 epub"表明,这本书提供了两种...

    JavaScript语言精粹 中文版

    JavaScript语言精粹 中文版 共两部分

    JavaScript语言精粹_修订版带书签.pdf

    JavaScript语言精粹,已经编辑好书签,分享给各位初学者

    JavaScript语言精粹 中文高清PDF

    《JavaScript语言精粹》是一本深受开发者欢迎的权威书籍,旨在深入探讨JavaScript这门重要的编程语言,帮助初学者和有经验的程序员掌握其核心概念和最佳实践。这本书以中文高清PDF的形式提供,使得读者可以方便地...

    JavaScript语言精粹.pdf.zip

    12. **测试与调试**:使用Mocha、Chai等工具进行单元测试,以及Chrome开发者工具的使用方法,帮助找出并修复代码问题。 通过这本书的学习,开发者不仅能够掌握JavaScript的基础,还能了解到高级特性及其在实际项目...

    JavaScript语言精粹_修订版.pdf

    JavaScript语言精粹_修订版.pdf

    JavaScript语言精粹.修订版 Javascript:The Good Parts 中英 pdf

    "JavaScript语言精粹.修订版",即《Javascript: The Good Parts》,是由知名的计算机科学家Douglas Crockford所著,这本书深入探讨了JavaScript的核心概念和最佳实践,为开发者提供了宝贵的洞察力。 书中的内容主要...

    JavaScript语言精粹 修订版 中文高清PDF

    《JavaScript语言精粹 修订版》是一本深受前端开发者喜爱的经典教材,专注于讲解JavaScript的核心概念和最佳实践。这本书深入浅出地介绍了JavaScript的精髓,帮助读者掌握这门强大的脚本语言,尤其对于前端开发人员...

    JavaScript语言精粹(修订版)

    "JavaScript语言精粹(修订版)"是一本深入探讨JavaScript编程精髓的书籍,旨在帮助开发者掌握其核心概念、最佳实践以及常见陷阱。这本书对初学者和经验丰富的开发者都具有很高的价值,能够提升对JavaScript的理解和...

    JavaScript 语言精粹(修订版,文字版+扫描版)

    本书通过对JavaScript语言的分析,甄别出好的和坏的特性,从而提取出相对这门语言的整体而言具有更好的可靠性、可读性和可维护性的JavaScript的子集,以便你能用它创建真正可扩展的和高效的代码。 雅虎资深...

    JavaScript语言精粹 修订版 pdf

    JavaScript语言精粹修订版pdf是许多朋友都在寻找的一款学习资料,在这里能够为您详细的介绍JS这门计算机语言,作者从语法、对象、函数、继承、数组、正则表达式、方法、样式和优美的特性这9 个方面来呈现这门语言...

    JavaScript语言精粹_修订版【高清】带书签 PDF

    "JavaScript语言精粹_修订版【高清】带书签 PDF"是一本专门为JavaScript初学者和进阶者编写的指南,旨在帮助读者深入理解并掌握这种强大的脚本语言。 该书修订版可能包含对原版内容的更新和优化,以适应不断发展的...

    javascript语言精粹_修订版带书签.pdf

    "JavaScript语言精粹_修订版带书签.pdf" 这本书是开发者深入理解JavaScript语法、特性及最佳实践的重要参考资料。书中的修订版意味着它包含了最新的更新,以适应JavaScript语言的不断发展。 JavaScript最初由...

Global site tag (gtag.js) - Google Analytics